HTML Headings <h1> → <h6> – Structuring Content
📌 Introduction
HTML provides 6 levels of headings, from <h1> (most important) to <h6> (least important).
Headings are used to structure content and make it easier to read for both users and search engines.
🧱 Syntax
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<h4>Smaller Section</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Headings Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<h2>About Me</h2>
<h3>My Skills</h3>
<h4>HTML</h4>
<h4>CSS</h4>
</body>
</html>
🖥️ Output Explanation
The browser displays headings in different sizes:
<h1>→ biggest and most important<h2>→ slightly smaller<h3>→ smaller- ...
<h6>→ smallest
🎯 Why Headings are Important
1. 📊 Content Structure
Headings organize your page like a book:
- Title → chapters → sections → sub-sections
2. 🔍 SEO (Search Engines)
Search engines use headings to understand:
- What your page is about
- Which content is most important
✔ <h1> should represent the main topic of the page
3. 👀 Readability
Good headings make content:
- Easier to scan
- More user-friendly
- Better organized
⚠️ Best Practices
Use only one
<h1>per page (recommended)Follow proper order:
<h1>→<h2>→<h3>(don’t skip levels randomly)
Don’t use headings just to make text bigger
Use headings for structure, not styling
🚫 Common Mistakes
- Using multiple
<h1>tags everywhere ❌ - Skipping levels (e.g.
<h1>→<h4>) ❌ - Using headings for design instead of structure ❌
🧪 Mini Exercise
Create a page about yourself:
Add a main title using
<h1>Add sections using
<h2>:- About me
- Skills
- Goals
Add at least 2 subheadings using
<h3>