1. What is HTML?
HTML stands for HyperText Markup Language. Think of it as the skeleton of a webpage – it gives structure to all the text, images, links, and buttons you see on your browser.
-
HyperText means text that can contain links to other documents.
-
Markup means we use special tags to tell the browser what each piece of content is.
-
Language because it has its own set of rules and keywords.
A tiny history note: HTML was first created in 1991 by Tim Berners-Lee. It’s grown a lot since then, and today we use HTML5, which is modern, flexible, and mobile-friendly.
Why HTML is Important in Web Development
-
It’s the base layer – CSS and JavaScript are added on top.
-
Without HTML, browsers wouldn’t know what to display.
-
Search engines read HTML to understand your website’s content.
2. Basic Structure of an HTML Page
Every HTML file follows a basic pattern. Here’s the simplest example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my very first webpage.</p>
</body>
</html>
Breaking It Down
-
<!DOCTYPE html>– Tells the browser “This page is HTML5”. -
<html>– The root element. Everything goes inside it. -
<head>– Contains information about the page (title, meta tags, CSS links). -
<title>– Sets the title that appears in the browser tab. -
<body>– This is where all visible content goes (text, images, videos).
3. HTML Tags – Your Building Blocks
Tags are like labels that wrap around content to describe its purpose.
Types of Tags
| Type | Example | Description |
|---|---|---|
| Opening tag | <p> |
Starts an element |
| Closing tag | </p> |
Ends an element |
| Self-closing tag | <img src="photo.jpg" alt="My photo"> |
No closing tag needed |
Example:
<p>This is a paragraph.</p>
<img src="cat.jpg" alt="A cute cat">Tip: HTML tags are not case-sensitive, but using lowercase is a good habit.
4. Semantic HTML – Writing with Meaning
Semantic tags describe the purpose of content instead of just how it looks.
This helps search engines and screen readers understand your page better.
Examples of Semantic Tags:
-
<header>– Top section of the page (logo, navigation). -
<footer>– Bottom section (copyright, links). -
<nav>– Navigation menu. -
<article>– Self-contained content (like a blog post). -
<section>– Groups related content.
Don’t: Use
<div>everywhere for everything.
Do: Use semantic tags for better SEO and accessibility.
Common HTML Tags You’ll Use Daily
-
Paragraphs:
<p>This is a paragraph.</p>-
Headings (
<h1>to<h6>):
<h1>Main Heading</h1>
<h2>Subheading</h2>-
Links (
<a>):
<a href="https://example.com">Visit Example</a>-
Images (
<img>):
<img src="image.jpg" alt="Description">-
Bold & Emphasis:
<strong>Important text</strong>
<em>Italicized text</em>Pro Tip: Use
<strong>instead of<b>– it adds meaning, not just style.
6. HTML Attributes – Extra Info for Tags
Attributes live inside the opening tag and provide extra details.
Common Attributes:
-
href– URL for links. -
src– File path for images, videos, etc. -
alt– Alternative text for images (important for accessibility). -
id– Unique identifier for an element. -
class– Used for styling groups of elements.
Example:
<a href="about.html" class="nav-link">About Us</a>7. Lists – Ordered & Unordered
-
Unordered list (bullets):
<ul>
<li>Milk</li>
<li>Bread</li>
</ul>-
Ordered list (numbers):
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>8. Images & Responsive Images
Basic Image:
<img src="flower.jpg" alt="A red flower">Responsive Image with <picture>:
<picture>
<source srcset="flower-large.jpg" media="(min-width: 800px)">
<img src="flower-small.jpg" alt="A red flower">
</picture>Use
alttext for accessibility andsrcsetfor faster loading on different devices.
9. Tables – Displaying Data
<table>
<thead>
<tr><th>Name</th><th>Age</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>24</td></tr>
<tr><td>Bob</td><td>30</td></tr>
</tbody>
</table>Attributes like
colspanandrowspanlet you merge cells.
10. Meta Tags – The Hidden Helpers
Meta tags go in the <head> and are invisible to users, but important for SEO.
Examples:
<meta charset="UTF-8">
<meta name="description" content="Learn HTML from scratch with examples.">
<meta name="viewport" content="width=device-width, initial-scale=1">11. Embedding Media
-
Video:
<video controls>
<source src="video.mp4" type="video/mp4">
</video>-
Audio:
<audio controls src="song.mp3"></audio>-
Iframe (embed another webpage):
<iframe src="https://example.com" width="600" height="400"></iframe>Key Takeaways
-
Use semantic HTML for better SEO and accessibility.
-
Always include
altfor images. -
Structure your HTML logically and keep it clean.