Headings are one of the most important elements in HTML. They define the structure and hierarchy of your content, making it easier for users to scan and understand your page. They're also crucial for accessibility and SEO. Let's explore all six heading levels and learn how to use them effectively.
What Are HTML Headings?
HTML headings are elements that represent titles and subtitles in your content. They help organize your page into a clear hierarchical structure, similar to how a book has chapters, sections, and subsections.
HTML provides six levels of headings, from <h1> (most important) to <h6> (least important):
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>Visual Hierarchy
By default, browsers display headings with decreasing size and importance. Here's how they typically appear (actual appearance depends on browser defaults):
💡 Important:
Don't choose heading levels based on their visual appearance! Choose them based on their semantic importance in your document hierarchy. You can always style them with CSS to look however you want.
The Six Heading Levels
H1 - Main Page Title
The <h1> is the most important heading and should represent the main topic or title of your page.
<h1>Complete Guide to HTML Headings</h1>Key points about h1:
- There should typically be only one h1 per page
- It represents the main title or subject of the entire page
- Search engines give it significant weight for SEO
- Screen readers often navigate by h1 first
- Should describe what the page is about
H2 - Major Sections
The <h2> elements divide your content into major sections.
<h1>Complete Guide to HTML Headings</h1>
<h2>What Are HTML Headings?</h2>
<p>Content about headings...</p>
<h2>Heading Hierarchy</h2>
<p>Content about hierarchy...</p>
<h2>Best Practices</h2>
<p>Content about best practices...</p>Key points about h2:
- Direct subsections of the h1
- You can have multiple h2 elements on a page
- Represent the main topics within the page
- Create the primary outline of your content
H3 - Subsections
The <h3> elements create subsections within h2 sections.
<h1>Complete Guide to HTML Headings</h1>
<h2>Heading Hierarchy</h2>
<p>Introduction to hierarchy...</p>
<h3>Primary Headings</h3>
<p>About h1 and h2...</p>
<h3>Secondary Headings</h3>
<p>About h3 through h6...</p>
<h2>Best Practices</h2>
<p>Content about best practices...</p>H4, H5, H6 - Deeper Subsections
Headings h4 through h6 are used for even deeper levels of content hierarchy. Most pages don't need to go beyond h3, but they're available when you need more detailed organization.
<h1>Main Title</h1>
<h2>Major Section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<p>Some content...</p>
<h5>Even Deeper</h5>
<p>More specific content...</p>
<h6>Deepest Level</h6>
<p>Very detailed content...</p>Heading Hierarchy Rules
1. Maintain Proper Order
Headings should follow a logical order without skipping levels. Think of them as an outline structure.
<!-- GOOD: Proper hierarchy -->
<h1>Main Title</h1>
<h2>Section 1</h2>
<h3>Subsection 1.1</h3>
<h3>Subsection 1.2</h3>
<h2>Section 2</h2>
<h3>Subsection 2.1</h3>
<h4>Detail 2.1.1</h4>
<!-- BAD: Skipping levels -->
<h1>Main Title</h1>
<h4>This skips h2 and h3!</h4>
<h2>Now back to h2</h2>2. Use Only One H1
While HTML5 technically allows multiple h1 elements, it's still best practice to use only one h1 per page for clarity and SEO.
<!-- GOOD: One h1 per page -->
<h1>About Our Company</h1>
<h2>Our History</h2>
<h2>Our Team</h2>
<h2>Our Values</h2>
<!-- AVOID: Multiple h1 elements (confusing) -->
<h1>About Our Company</h1>
<h1>Our History</h1>
<h1>Our Team</h1>3. Don't Skip Levels Going Down
<!-- WRONG: Skipping from h2 to h4 -->
<h2>Section Title</h2>
<h4>Subsection (skipped h3!)</h4>
<!-- CORRECT: Following proper order -->
<h2>Section Title</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>4. You CAN Skip Levels Going Up
When moving back up the hierarchy, you can jump to any higher level:
<!-- FINE: Jumping from h4 back to h2 -->
<h2>Section 1</h2>
<h3>Subsection 1.1</h3>
<h4>Detail 1.1.1</h4>
<h4>Detail 1.1.2</h4>
<h2>Section 2</h2> <!-- Jumped from h4 to h2 - OK! -->
<h3>Subsection 2.1</h3>Complete Example: Proper Heading Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complete Guide to Baking Bread</title>
</head>
<body>
<!-- Main page title -->
<h1>Complete Guide to Baking Bread</h1>
<!-- Introduction paragraph -->
<p>Learn everything you need to know about baking delicious bread at home.</p>
<!-- Major section 1 -->
<h2>Getting Started</h2>
<p>Before you begin, you'll need the right tools and ingredients.</p>
<h3>Essential Tools</h3>
<ul>
<li>Mixing bowl</li>
<li>Measuring cups</li>
<li>Loaf pan</li>
</ul>
<h3>Basic Ingredients</h3>
<ul>
<li>Flour</li>
<li>Water</li>
<li>Yeast</li>
<li>Salt</li>
</ul>
<!-- Major section 2 -->
<h2>The Baking Process</h2>
<p>Follow these steps to bake perfect bread.</p>
<h3>Step 1: Mixing</h3>
<p>Combine your ingredients...</p>
<h4>Dry Ingredients</h4>
<p>Mix flour and salt first...</p>
<h4>Wet Ingredients</h4>
<p>Dissolve yeast in warm water...</p>
<h3>Step 2: Kneading</h3>
<p>Knead the dough for 10 minutes...</p>
<h3>Step 3: First Rise</h3>
<p>Let the dough rise until doubled...</p>
<h3>Step 4: Shaping</h3>
<p>Shape your dough...</p>
<h3>Step 5: Second Rise</h3>
<p>Allow another rise...</p>
<h3>Step 6: Baking</h3>
<p>Bake at 375°F for 30 minutes...</p>
<!-- Major section 3 -->
<h2>Troubleshooting</h2>
<p>Common problems and solutions.</p>
<h3>Dense Bread</h3>
<p>If your bread is too dense...</p>
<h3>Bread Won't Rise</h3>
<p>Check your yeast freshness...</p>
<!-- Major section 4 -->
<h2>Advanced Techniques</h2>
<p>Take your baking to the next level.</p>
<h3>Sourdough Starter</h3>
<p>Creating and maintaining a starter...</p>
<h3>Artisan Scoring</h3>
<p>Decorative cuts for better crust...</p>
<!-- Conclusion -->
<h2>Conclusion</h2>
<p>With practice, you'll be baking like a pro!</p>
</body>
</html>Headings and Accessibility
Proper heading structure is crucial for users with screen readers and other assistive technologies.
How Screen Readers Use Headings
- Screen readers can navigate by headings, jumping from one to the next
- Users can list all headings to get a page overview
- Proper hierarchy helps users understand content structure
- Users can quickly find the section they need
<!-- Screen reader users can jump between these headings -->
<h1>Main Article</h1>
<h2>Introduction</h2>
<!-- User skips to next heading -->
<h2>Main Content</h2>
<h3>Subsection A</h3>
<!-- User skips to next heading -->
<h3>Subsection B</h3>
<!-- And so on... -->✅ Accessibility Best Practice:
Never use headings just for their visual appearance. Always maintain proper semantic hierarchy. If you need different styling, use CSS, not a different heading level.
Headings and SEO
Search engines use headings to understand your content's structure and main topics.
Why Headings Matter for SEO
- H1 carries significant weight: Search engines consider it the main topic
- Keyword placement: Include relevant keywords naturally in headings
- Content structure: Clear hierarchy helps search engines index content
- Featured snippets: Well-structured headings increase chances of appearing in snippets
- User experience: Better structure leads to lower bounce rates
<!-- GOOD: Clear, keyword-rich headings -->
<h1>How to Bake Sourdough Bread at Home</h1>
<h2>Essential Sourdough Ingredients</h2>
<h2>Step-by-Step Sourdough Baking Instructions</h2>
<!-- POOR: Vague, generic headings -->
<h1>My Page</h1>
<h2>Section 1</h2>
<h2>Section 2</h2>Styling Headings with CSS
You can style headings to look however you want using CSS. The semantic meaning stays the same regardless of appearance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styled Headings</title>
<style>
/* Reset default heading styles */
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: normal;
}
/* Custom h1 styling */
h1 {
font-size: 3rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 1rem;
border-bottom: 3px solid #3498db;
padding-bottom: 0.5rem;
}
/* Custom h2 styling */
h2 {
font-size: 2rem;
font-weight: 600;
color: #34495e;
margin: 2rem 0 1rem 0;
}
/* Custom h3 styling */
h3 {
font-size: 1.5rem;
font-weight: 500;
color: #7f8c8d;
margin: 1.5rem 0 0.75rem 0;
}
/* Make h4 look like regular text with icon */
h4 {
font-size: 1rem;
font-weight: 600;
color: #555;
margin: 1rem 0 0.5rem 0;
}
h4::before {
content: "▸ ";
color: #3498db;
}
</style>
</head>
<body>
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<h4>Detail Point</h4>
</body>
</html>Common Heading Mistakes
Mistake 1: Choosing Headings for Appearance
<!-- WRONG: Using h4 because it "looks right" -->
<h1>Main Title</h1>
<h4>This should be h2, but I want smaller text</h4>
<!-- CORRECT: Use proper level and style with CSS -->
<h1>Main Title</h1>
<h2 class="small-heading">Proper hierarchy, styled smaller</h2>
<style>
.small-heading {
font-size: 1rem;
}
</style>Mistake 2: Multiple H1 Elements
<!-- AVOID: Multiple h1 elements -->
<h1>Welcome to Our Site</h1>
<h1>Featured Article</h1>
<h1>Latest News</h1>
<!-- BETTER: One h1, use h2 for other sections -->
<h1>Welcome to Our Site</h1>
<h2>Featured Article</h2>
<h2>Latest News</h2>Mistake 3: Skipping Heading Levels
<!-- WRONG: Skipping from h2 to h5 -->
<h1>Title</h1>
<h2>Section</h2>
<h5>Subsection (skipped h3 and h4!)</h5>
<!-- CORRECT: Following proper order -->
<h1>Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>Mistake 4: Empty Headings
<!-- WRONG: Empty heading -->
<h2></h2>
<!-- WRONG: Only whitespace -->
<h2> </h2>
<!-- CORRECT: Meaningful content -->
<h2>Section Title</h2>Mistake 5: Overly Long Headings
<!-- POOR: Heading is too long, should be paragraph -->
<h2>
This is a very long heading that contains way too much information
and should probably be split into a shorter heading followed by a
paragraph of explanatory text because headings should be concise
</h2>
<!-- BETTER: Concise heading with supporting paragraph -->
<h2>Introduction to HTML</h2>
<p>
This section provides a comprehensive overview of HTML, including
its history, purpose, and fundamental concepts that every web
developer should understand.
</p>Mistake 6: Documents with Only Headings
<!-- WRONG: No content, just headings -->
<h1>My Article</h1>
<h2>Introduction</h2>
<h2>Main Points</h2>
<h2>Conclusion</h2>
<!-- CORRECT: Headings with content -->
<h1>My Article</h1>
<h2>Introduction</h2>
<p>This article discusses...</p>
<h2>Main Points</h2>
<p>The key points are...</p>
<h2>Conclusion</h2>
<p>In conclusion...</p>Heading Attributes
Like all HTML elements, headings can have attributes:
<!-- ID for linking to specific sections -->
<h2 id="getting-started">Getting Started</h2>
<a href="#getting-started">Jump to Getting Started</a>
<!-- Classes for styling -->
<h1 class="page-title hero-title">Main Title</h1>
<!-- Data attributes for JavaScript -->
<h2 data-section="intro" data-track="true">Introduction</h2>
<!-- Multiple attributes -->
<h3 id="features" class="section-heading" data-animated="true">
Features
</h3>Testing Your Heading Structure
1. Use Browser Extensions
Install browser extensions that visualize heading structure:
- HeadingsMap (Firefox/Chrome): Shows document outline
- HTML5 Outliner: Displays heading hierarchy
- WAVE (Web Accessibility Tool): Checks accessibility issues
2. Create an Outline
You can visualize your heading structure with JavaScript:
// Run in browser console to see all headings
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
headings.forEach(heading => {
const level = heading.tagName;
const text = heading.textContent;
const indent = ' '.repeat(parseInt(level.charAt(1)) - 1);
console.log(`${indent}${level}: ${text}`);
});3. Use HTML Validators
The W3C HTML Validator will warn you about heading structure issues.
Practical Tips
1. Outline First, Write Second
Before writing content, create your heading structure as an outline:
<!-- Start with just headings -->
<h1>Complete Guide to React</h1>
<h2>What is React?</h2>
<h2>Getting Started</h2>
<h3>Installation</h3>
<h3>Creating Your First Component</h3>
<h2>Core Concepts</h2>
<h3>Props</h3>
<h3>State</h3>
<h3>Lifecycle</h3>
<h2>Best Practices</h2>
<!-- Then fill in content under each heading -->2. Make Headings Descriptive
<!-- VAGUE -->
<h2>Overview</h2>
<h2>Details</h2>
<h2>More Info</h2>
<!-- DESCRIPTIVE -->
<h2>Product Features Overview</h2>
<h2>Technical Specifications</h2>
<h2>Pricing and Plans</h2>3. Use Parallel Structure
<!-- INCONSISTENT -->
<h2>How to Install</h2>
<h2>Configuration</h2>
<h2>Using the Software</h2>
<!-- CONSISTENT (all using same pattern) -->
<h2>Installing the Software</h2>
<h2>Configuring the Software</h2>
<h2>Using the Software</h2>Key Takeaways
- HTML provides six heading levels: h1 through h6
- Use only one h1 per page as the main title
- Follow proper hierarchy—don't skip levels going down
- Choose headings for semantic meaning, not appearance
- Headings are crucial for accessibility and SEO
- Screen readers use headings for navigation
- Search engines weight h1 heavily for understanding content
- Style headings with CSS, not by choosing different levels
- Make headings descriptive and concise
- Headings should create a clear document outline
- Test your heading structure with browser tools
- Empty or overly long headings should be avoided
What's Next?
Now that you understand how to create structure with headings, we'll explore paragraphs—the fundamental element for body text. You'll learn how to create paragraphs, when to use them, and best practices for organizing text content effectively. Paragraphs work hand-in-hand with headings to create well-structured, readable documents!