HTML 3 💻 Headings
Headings are essential for structuring your web content. They create a clear hierarchy that helps both users and search engines understand the organization of your page.
All Heading Levels
HTML provides six levels of headings, from <h1> (most important) to <h6> (least important):
<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>Key Rules for Using Headings
| Rule | Explanation |
|---|---|
Start with <h1> | Always begin your page with a single <h1> that describes the main content. |
| Don’t skip levels | Follow <h1> with <h2>, then <h3>, and so on — never jump from <h1> to <h3>. |
Use only one <h1> per page | While technically allowed, multiple <h1> elements are not considered a best practice. |
| Don’t use headings to resize text | Headings are for structure, not styling. Use CSS font-size for visual adjustments. |
| Use headings to build a table of contents | User agents (like screen readers) can automatically generate a document outline from your headings. |
How Headings Create Structure
Think of headings like the outline of a book chapter:
<h1>Introduction to HTML</h1>
<h2>What is HTML?</h2>
<h3>Brief History</h3>
<h3>Why Learn HTML?</h3>
<h2>Getting Started</h2>
<h3>Setting Up Your Editor</h3>
<h3>Your First Page</h3>This structure would generate a clear outline:
- Introduction to HTML
- What is HTML?
- Brief History
- Why Learn HTML?
- Getting Started
- Setting Up Your Editor
- Your First Page
Real-World Example: This Could Be a Book’s Contents
Here’s how you might structure a travel guide using headings:
<h1>Ultimate Travel Guide to Japan</h1>
<h2>1. Planning Your Trip</h2>
<h3>Best Time to Visit</h3>
<h3>Budget Planning</h3>
<h3>Visa Requirements</h3>
<h2>2. Top Destinations</h2>
<h3>Tokyo</h3>
<h4>Shinjuku</h4>
<h4>Shibuya</h4>
<h3>Kyoto</h3>
<h4>Fushimi Inari Shrine</h4>
<h4>Kinkaku-ji Temple</h4>
<h2>3. Food & Culture</h2>
<h3>Must-Try Dishes</h3>
<h3>Cultural Etiquette</h3>Accessibility Tips
Screen reader users often navigate pages by jumping between headings. Following best practices ensures your content is accessible:
✅ Do this:
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>❌ Don’t do this (skipping levels):
<h1>Main Title</h1>
<h3>Section Title</h3> <!-- Oops! Skipped <h2> -->Quick Reference
| Element | Use For | Example |
|---|---|---|
<h1> | Main page title (once per page) | <h1>My Website</h1> |
<h2> | Major sections | <h2>About Me</h2> |
<h3> | Subsections under <h2> | <h3>My Skills</h3> |
<h4> | Subsections under <h3> | <h4>Technical Skills</h4> |
<h5> | Minor subsections | <h5>JavaScript</h5> |
<h6> | Least important heading | <h6>Notes</h6> |
For more in-depth information, check out the MDN Web Docs on Heading Elements.
Stop using slow, ad-bloated tool sites! 🤮
🔎 Search “KandZ Tools” on Google to use many professional utilities for free.
KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)
⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free
🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!
