What HTML is and why we use it
HTML stands for HyperText Markup Language. It's not a programming language—it's a markup language used to structure content on the web.
Why HTML Matters:
Structures content: It tells browsers how to display text, images, videos, and links
Universal standard: Every website uses HTML as its foundation
Works with CSS and JavaScript: HTML provides structure, CSS adds style, and JavaScript adds interactivity
Semantic meaning: It helps search engines and screen readers understand your content
What is an HTML tag?
An HTML tag is like a label or instruction that tells the browser how to display a piece of content.
Tags are written with angle brackets (< >). For example:
html
<p>
This is a paragraph tag. It tells the browser: "Hey, the text that follows is a paragraph!"
Anatomy of an HTML Tag
Most HTML tags come in pairs:
html
<p>This is a paragraph of text.</p>
Let's break this down:
<p> — Opening tag (starts the paragraph)
This is a paragraph of text. — Content (what you want to display)
</p> — Closing tag (ends the paragraph)
What is an HTML Element?
Here's where many beginners get confused: What's the difference between a tag and an element?
An HTML element is the complete package: the opening tag + content + closing tag.
html
<h1>Welcome to My Website</h1>
In this example:
Simple rule: Tags are the individual pieces; the element is the whole structure.
Self-Closing (Void) Elements
Not all HTML elements have content between tags. Some elements are self-closing (also called void elements) because they don't wrap around content.
Common Self-Closing Elements:
html
<img src="photo.jpg" alt="A beautiful sunset">
<br>
<hr>
<input type="text" placeholder="Enter your name">
<meta charset="UTF-8">
Why are they self-closing?
These elements don't need content inside them. For example:
An <img> tag displays an image—the image file is referenced through an attribute, not wrapped in tags
A <br> tag creates a line break—there's nothing to wrap
An <hr> tag creates a horizontal line—same idea
Block-Level vs Inline Elements
HTML elements behave differently based on whether they're block-level or inline.
Block-Level Elements
Block-level elements:
Take up the full width available
Always start on a new line
Stack vertically like boxes
Examples:
html
<div>This is a div</div>
<p>This is a paragraph</p>
<h1>This is a heading</h1>
<section>This is a section</section>
```
**Visual representation:**
```
┌─────────────────────────────┐
│ <div>Content here</div> │
└─────────────────────────────┘
┌─────────────────────────────┐
│ <p>Another block</p> │
└─────────────────────────────┘
Inline Elements
Inline elements:
Only take up as much width as needed
Do not start on a new line
Flow within the text like words in a sentence
Examples:
html
<span>This is a span</span>
<a href="#">This is a link</a>
<strong>This is bold text</strong>
<em>This is italic text</em>
```
**Visual representation:**
```
This is normal text <strong>with bold</strong> and <a href="#">a link</a> inline.
Quick Comparison Table
| Block-Level | Inline |
<div> | <span> |
<p> | <a> |
<h1> to <h6> | <strong> |
<section> | <em> |
<article> | <img> |
<ul>, <ol> | <input> |
Let's explore the tags you'll use most frequently:
1. Headings
html
<h1>Main Heading (Largest)</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>
<h4>Even Smaller</h4>
<h5>Smaller Still</h5>
<h6>Smallest Heading</h6>
Use case: Organize content hierarchically. <h1> is typically the page title, and you use smaller headings for sections.
2. Paragraphs
html
<p>This is a paragraph. It's used for regular text content.</p>
3. Links
html
<a href="https://example.com">Click here to visit Example</a>
Attributes:
4. Images
html
<img src="image.jpg" alt="Description of image">
Attributes:
5. Lists
Unordered list (bullets):
html
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Ordered list (numbers):
html
<ol>
<li>Step one</li>
<li>Step two</li>
<li>Step three</li>
</ol>
6. Divisions and Spans
html
<div>
This is a block container for grouping content.
</div>
<p>This is a paragraph with <span style="color: red;">red text</span> inside.</p>
7. Text Formatting
html
<strong>Bold text (important)</strong>
<em>Italic text (emphasis)</em>
<b>Bold text (stylistic)</b>
<i>Italic text (stylistic)</i>
<u>Underlined text</u>
8. Line Breaks and Horizontal Rules
html
<p>This is line one.<br>This is line two.</p>
<hr>
Practical Example: Putting It All Together
Here's a simple HTML page using the tags we've learned:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Blog</h1>
<p>Hello! I'm learning <strong>HTML</strong> and it's <em>amazing</em>.</p>
<h2>My Favorite Things</h2>
<ul>
<li>Coding</li>
<li>Reading</li>
<li>Coffee</li>
</ul>
<h2>Useful Resources</h2>
<p>Check out <a href="https://developer.mozilla.org">MDN Web Docs</a> for more information.</p>
<img src="coding.jpg" alt="Person coding on a laptop">
<hr>
<p>Thanks for visiting!</p>
</body>
</html>
