Mastering HTML Headings
Learn how HTML heading tags work, why only one H1 in HTML is allowed, how to build a proper heading hierarchy, and how headings impact SEO and accessibility.
If you have ever landed on a webpage and instantly knew where to look for the information you needed, that was not an accident. That was a developer using HTML heading tags the right way.
Headings are not just about making text bigger or bold. They are the backbone of your page structure. They tell browsers, search engines, and screen readers exactly what your content is about and how it is organized.
In this tutorial, you will learn everything about HTML headings from scratch. What they are, how to use them correctly, why the single <h1> rule matters, how heading hierarchy works, and how real screen readers navigate your page using nothing but your headings.
By the end, you will structure every page you build with confidence.
01What Are HTML Heading Tags?
HTML gives you six heading tags. From <h1> all the way down to <h6>. Each one represents a different level of importance in your content structure.
Think of them like a book. A book has a main title, then chapters, then sections inside chapters, then sub-sections inside those. That is exactly how HTML heading tags work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Headings Example</title>
</head>
<body>
<h1>This is Heading 1 (H1)</h1>
<h2>This is Heading 2 (H2)</h2>
<h3>This is Heading 3 (H3)</h3>
<h4>This is Heading 4 (H4)</h4>
<h5>This is Heading 5 (H5)</h5>
<h6>This is Heading 6 (H6)</h6>
</body>
</html>By default, browsers render each heading with a different font size. <h1> is the largest, <h6> is the smallest. But here is the thing: you should never choose a heading level based on its size. You choose it based on its position in your content hierarchy. You can always change the visual size using CSS.
Visual: How Browsers Display H1 to H6 by Default
Main Page Title
Major Section Title
Sub-section Title
Minor Sub-section
Small Sub-section
Smallest Heading
Browsers apply these default sizes, but you control the visual appearance with CSS. Never pick a heading level just for its size.
Now that you can see the six levels, let us look at each one and what it is actually for.
02The Six HTML Heading Levels: What Each One Means
Every HTML heading tag has a purpose. Using them randomly will hurt your SEO and confuse both users and assistive technologies.
H1: The Page Title (Only One Per Page)
The <h1> tag is your page title. It tells everyone, browsers, Google, and screen readers, what this entire page is about. There should only ever be one <h1> per page. We will talk more about this rule in a minute.
H2: Major Sections
The <h2> tag marks the big sections of your page. If your H1 in HTML is the book title, your H2s are the chapter names. They sit directly below the H1 in the hierarchy.
H3: Sub-sections Inside H2
The <h3> tag breaks down a section that is already introduced by an H2. If an H2 is “Types of Fruits”, then H3s might be “Citrus Fruits”, “Tropical Fruits”, and so on.
H4, H5, H6: Going Deeper
These three are for deeply nested content. Most pages and blog posts rarely need H4, H5, or H6. If you find yourself reaching for H4 often, it might be a sign your content structure needs a rethink. But they are there when you genuinely need them, like in technical documentation or multi-level guides.
03H1 in HTML: The One Rule You Must Never Break
This is the most important rule in the world of HTML h1 tags: use only one H1 per page.
The <h1> tag tells search engines what the entire page is about. If you have three or four H1 tags on the same page, Google gets confused. It does not know which one is the real topic of the page. That hurts your rankings directly.
It also hurts accessibility. Screen reader users often jump between headings to understand the page structure. When they hit multiple H1 tags, they have no idea which one is the actual main topic.
Here is a clean, correct example of using HTML h1 tags properly:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Best Coffee Shops in New York</title>
</head>
<body>
<!-- Only ONE H1 on the whole page -->
<h1>Best Coffee Shops in New York</h1>
<h2>Coffee Shops in Manhattan</h2>
<h3>Upper East Side Cafes</h3>
<h3>Midtown Spots</h3>
<h2>Coffee Shops in Brooklyn</h2>
<h3>Williamsburg Favorites</h3>
<h3>DUMBO Gems</h3>
</body>
</html>Notice how there is only one <h1>, and every <h2> and <h3> fits perfectly under it. That is clean, correct heading structure.
The Golden Rule of H1 in HTML
Every page gets exactly one <h1> tag. It should clearly describe what the whole page is about. Think of it as the headline of a newspaper. One page, one headline.
04Understanding HTML Heading Hierarchy
Heading hierarchy is the order and nesting of your heading levels. It means you never skip levels. You do not jump from an H1 to an H4. You build downward, step by step.
A proper heading hierarchy looks like an outline. And that is exactly what it is. Your headings, when read in order, should tell the complete story of your page even without the body text.
Here is the core rule for HTML heading hierarchy:
Visual: Correct HTML Heading Hierarchy (Outline View)
How to Grow Indoor Plants
Choosing the Right Soil
Potting Mix vs Garden Soil
Drainage Tips for Indoor Plants
Watering and Light Requirements
How Often to Water
Best Light Conditions by Plant Type
Common Beginner Mistakes
See how everything flows naturally? Each H3 lives inside an H2. No jumping, no skipping. That is a well-built heading hierarchy.
What Happens When You Skip Heading Levels?
Skipping levels breaks the logical structure of your page. It confuses screen readers and may also be treated as a signal of poor content quality by search engines.
Good: Correct Order
<h1> Page Title </h1><h2> Section </h2><h3> Sub-section </h3><h2> Another Section </h2><h3> Sub-section </h3>
Bad: Skipping Levels
<h1> Page Title </h1><h3> Section </h3><h5> Sub-section </h5><h2> Another Section </h2><h4> Sub-section </h4>
The bad example jumps from H1 to H3, then from H5 back up to H2, then to H4. There is no logical structure at all. Screen readers and search engines cannot make sense of this.
Now here is the correct way, in actual code:
<!-- Correct HTML heading hierarchy -->
<h1>A Complete Guide to Running</h1>
<h2>Getting Started</h2>
<h3>Choosing the Right Shoes</h3>
<h3>Warm-Up Exercises</h3>
<h2>Training Plans</h2>
<h3>Beginner Plan (5K)</h3>
<h4>Week 1 Schedule</h4>
<h4>Week 2 Schedule</h4>
<h3>Intermediate Plan (10K)</h3>
<h2>Nutrition Tips</h2>
<h3>Pre-Run Meals</h3>
<h3>Post-Run Recovery</h3>Clean, logical, and easy to scan. That is what good HTML headings look like in real code.
05HTML Headings and SEO: Why Google Cares So Much
Search engines use your HTML heading tags to understand your content. When Google crawls your page, it reads your headings to figure out the main topic and the subtopics you cover.
Your <h1> is the most important signal. It should contain your primary keyword, naturally. Not stuffed in awkwardly, just naturally as part of the title.
Your <h2> and <h3> tags are your secondary signals. They tell Google what specific angles you are covering on that topic. This helps your page rank for related searches as well, not just your exact main keyword.
Keyword Placement in HTML Heading Tags
Here is a practical approach that actually works for SEO:
- Put your primary keyword in the
<h1>naturally. - Use related phrases and secondary keywords in your
<h2>headings. - Use more specific, long-tail phrases in
<h3>headings. - Never repeat the same exact keyword in every heading. That looks spammy.
Here is a realistic example of how this looks for a page about HTML:
<!-- Smart keyword placement in headings -->
<h1>Mastering HTML Heading Tags for Better SEO</h1>
<h2>Why HTML Heading Levels Matter for Search Rankings</h2>
<h3>How Google Reads Your H1 and H2 Tags</h3>
<h3>Using Keywords Naturally in Heading Tags</h3>
<h2>Building a Proper Heading Hierarchy</h2>
<h3>The One H1 in HTML Rule Explained</h3>
<h3>When to Use H3, H4, and Beyond</h3>
<h2>HTML Headings and Accessibility</h2>
<h3>How Screen Readers Navigate Heading Structure</h3>Notice how the keywords flow naturally? No heading sounds forced. Every heading actually tells you what that section is about. That is the balance you are aiming for.
What Not to Do with Heading Tags in HTML for SEO
Some mistakes people make that actually hurt their SEO:
Common SEO Mistakes with HTML Heading Tags
- Stuffing the same keyword into every single heading.
- Using multiple
<h1>tags on one page. - Using heading tags just to make text look big (use CSS for that).
- Skipping heading levels, like going from H1 directly to H4.
- Having no headings at all, making the page one giant block of text.
If you want to understand how HTML fits into the bigger picture of a well-structured page, our article on building the perfect HTML document structure covers exactly how all the pieces connect together.
06How Screen Readers Navigate HTML Headings
This section might just change how you think about headings forever.
Screen readers are tools used by people who are blind or have low vision. They read your webpage content out loud. But here is the key part: screen reader users do not read your page from top to bottom like sighted users do. They jump between headings to navigate.
Most screen readers have a keyboard shortcut, often just the letter “H”, that jumps directly from heading to heading. This means your HTML heading tags are literally the navigation menu for millions of people.
Click the button above and see how a screen reader jumps between your headings. Now imagine if those headings were random, skipped levels, or used multiple H1s. The user would have absolutely no idea how the page is structured.
Proper heading tags in HTML are not just good practice. They are a responsibility. Real people depend on them to navigate your content.
ARIA and Heading Roles
HTML heading tags come with a built-in semantic role. The <h1> through <h6> tags are automatically recognized by assistive technologies without you adding any extra attributes. That is one of the reasons semantic HTML is so powerful. You write meaningful tags, and accessibility comes built in.
If you use a <div> and make it visually look like a heading with CSS, screen readers will not treat it as a heading. It will just read it as plain text, and users lose that navigation capability entirely.
<!-- This looks like a heading visually but is NOT accessible -->
<div style="font-size: 2rem; font-weight: bold;">
This Is NOT a Real Heading
</div>
<!-- This is a real heading that screen readers understand -->
<h2>This IS a Real Heading</h2>Always use real HTML heading tags. Never fake them with styled divs.
07Creating Scannable Content Structure with Headings
Here is something interesting: studies show that most people do not read webpages. They scan them. They look at headings first, and only dive into the body text when a heading catches their attention.
That means your HTML headings need to carry the weight of your content all on their own. A visitor should be able to read only your headings and understand exactly what your page covers.
Make Every Heading Descriptive
Vague headings like “Overview” or “Introduction” tell your reader nothing. Descriptive headings like “How H2 Tags Affect Google Rankings” tell them exactly what they will get if they keep reading.
Vague (Bad)
- Introduction
- Overview
- Details
- More Info
- Conclusion
Descriptive (Good)
- What Are HTML Heading Tags?
- The Six Heading Levels Explained
- How H1 Tags Affect Your SEO
- How Screen Readers Use Headings
- Start Using Headings the Right Way
Keep Headings Short and Clear
Headings are not paragraphs. Keep them short. Aim for under 10 words when you can. Long, wordy headings are hard to scan quickly.
Use H2 as Your Main Signposts
Your <h2> tags do the heaviest lifting on a typical page. They divide your content into major readable chunks. A page with well-written H2 headings can be navigated by anyone in seconds, even before they read a single sentence.
08A Real-World Complete Page Example
Let us put everything together. Here is a complete, real-world HTML page with proper heading structure, correct use of the single H1 rule, no skipped levels, and meaningful heading text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beginner's Guide to Python Programming</title>
</head>
<body>
<!-- One H1: The page topic -->
<h1>Beginner's Guide to Python Programming</h1>
<p>Python is one of the most beginner-friendly programming languages in the world.
This guide walks you through everything you need to know to get started.</p>
<!-- H2: First major section -->
<h2>Setting Up Your Python Environment</h2>
<p>Before you write your first line of Python, you need to install it on your machine.</p>
<!-- H3: Sub-sections under the first H2 -->
<h3>Installing Python on Windows</h3>
<p>Head to python.org and download the latest stable release for Windows.</p>
<h3>Installing Python on Mac</h3>
<p>Mac users can install Python using Homebrew or the official installer.</p>
<!-- H2: Second major section -->
<h2>Your First Python Program</h2>
<p>The classic first program in any language is a simple Hello World output.</p>
<h3>Writing and Running Your First Script</h3>
<p>Open your code editor, create a file called hello.py, and write your first line.</p>
<h3>Understanding the Print Function</h3>
<p>The print() function outputs text to your terminal or console window.</p>
<!-- H2: Third major section -->
<h2>Python Data Types for Beginners</h2>
<p>Python has several built-in data types that you will use in nearly every program.</p>
<h3>Strings, Integers, and Floats</h3>
<p>These are the three most common data types for handling text and numbers.</p>
<h3>Lists and Dictionaries</h3>
<p>Lists store ordered collections of items. Dictionaries store key-value pairs.</p>
<!-- H4 used only when genuinely needed for deeper nesting -->
<h4>When to Use a List vs a Dictionary</h4>
<p>Use a list when order matters. Use a dictionary when you need a label for each item.</p>
<!-- H2: Final section -->
<h2>Next Steps in Your Python Journey</h2>
<p>Once you have mastered the basics, explore libraries like NumPy, Pandas, and Django.</p>
</body>
</html>This is a real page structure. One H1, logical H2 sections, H3 sub-sections, and one H4 used exactly where it genuinely makes sense. Every heading tells you something useful.
09HTML Heading Tags vs. CSS: Getting the Visual Right
One of the most common beginner mistakes is choosing a heading level based on how big or small you want the text to appear. That is the job of CSS, not HTML.
In HTML, you choose the heading level based on content importance and hierarchy. Then you use CSS to control how it looks visually.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Headings with Custom CSS</title>
<style>
/* Override browser defaults with your own sizing */
h1 {
font-size: 2.5rem;
color: #6366f1;
font-weight: 800;
}
h2 {
font-size: 1.75rem;
color: #e2e8f0;
font-weight: 700;
}
h3 {
font-size: 1.25rem;
color: #94a3b8;
font-weight: 600;
}
/* You can even make an H3 visually larger than an H2 */
/* But you'd never do this in practice — it breaks visual logic */
/* The point is: CSS controls appearance, HTML controls meaning */
</style>
</head>
<body>
<h1>Your Page Title Here</h1>
<h2>A Major Section</h2>
<h3>A Sub-section Inside It</h3>
</body>
</html>The heading level is about meaning. The CSS is about looks. Keep these two things separate in your mind and you will never misuse a heading tag again.
If you want a deeper understanding of how HTML elements work in general, our article on HTML tags, elements, and attributes covers the full picture, including how attributes work with your heading tags too.
10Common Heading Mistakes Beginners Make (And How to Fix Them)
Let us go through the most frequent mistakes developers make with HTML heading tags and exactly how to correct them.
Mistake 1: Multiple H1 Tags on One Page
<!-- Wrong: Two H1 tags -->
<h1>Our Company</h1>
<h1>Our Services</h1>
<!-- Correct: One H1, rest are H2 -->
<h1>Our Company</h1>
<h2>Our Services</h2>Mistake 2: Using Bold Text Instead of Headings
<!-- Wrong: Bold paragraph pretending to be a heading -->
<p><strong>Why HTML Headings Matter</strong></p>
<p>Your content here...</p>
<!-- Correct: Actual heading tag -->
<h2>Why HTML Headings Matter</h2>
<p>Your content here...</p>Mistake 3: Skipping Levels
<!-- Wrong: Jumping from H1 to H4 -->
<h1>Main Title</h1>
<h4>First Section</h4>
<!-- Correct: Follow the order -->
<h1>Main Title</h1>
<h2>First Section</h2>Mistake 4: Empty Heading Tags
<!-- Wrong: Empty heading tag -->
<h2></h2>
<!-- Correct: Every heading must have meaningful text -->
<h2>Understanding Watering Schedules</h2>Mistake 5: Headings with No Structure Below Them
A heading should always introduce content that follows it. If you place an HTML heading tag and then immediately place another heading with no content between them, that is a sign something is off with your structure.
11HTML Headings and Semantic HTML: They Go Hand in Hand
If you have been learning with us, you know that semantic HTML is about writing code that means something. Heading tags are one of the most powerful semantic tools in HTML.
When you use <h1> through <h6> correctly, you are doing three things at once:
- Giving users a clear visual structure to scan.
- Giving search engines a clear topic map of your page.
- Giving screen readers a navigation system that actually works.
That is why headings are not just a text formatting decision. They are a structural and semantic decision that affects everyone who touches your page.
You can learn more about how HTML5 introduced and formalized these semantic ideas in our guide to what HTML5 is and what changed.
12Quick Reference Cheat Sheet: HTML Heading Tags
13Heading Tags and the Bigger HTML Picture
HTML heading tags do not exist in isolation. They are part of a larger, structured HTML document. If you want to understand exactly where your headings sit inside a complete HTML page, our article on building the perfect HTML document structure walks you through the entire anatomy of an HTML file from DOCTYPE to closing body tag.
And if you are new to HTML in general, it is worth reading our introduction to HTML first to understand the foundation everything is built on.
Understanding how HTML heading tags connect to semantic elements like <article>, <section>, and <nav> is also important. When you place an <h2> inside a <section>, it becomes the title of that section. That gives browsers and screen readers even more context about your content’s structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Headings Inside Semantic HTML</title>
</head>
<body>
<header>
<h1>TechBlog: Web Development Tutorials</h1>
</header>
<main>
<article>
<h2>Understanding CSS Flexbox</h2>
<p>Flexbox changed the way developers build layouts.</p>
<section>
<h3>The Flex Container</h3>
<p>The flex container is the parent element with display: flex.</p>
</section>
<section>
<h3>Flex Items</h3>
<p>Flex items are the direct children of a flex container.</p>
</section>
</article>
</main>
<aside>
<h2>Related Articles</h2>
<ul>
<li>CSS Grid Tutorial</li>
<li>Responsive Design Basics</li>
</ul>
</aside>
</body>
</html>See how the <h1> sits in the header as the site title, and the <h2> inside the article is the article title? And then the aside has its own <h2> for its section? This is how real professional websites are structured.
14What You Have Mastered Today
You now understand HTML heading tags at a deep, practical level. Let us quickly recap what you have learned:
- HTML gives you six heading levels, from
<h1>to<h6>, each representing a different level of content importance. - The single H1 rule: one
<h1>per page, always. It is the main topic signal for both SEO and accessibility. - Heading hierarchy means never skipping levels. You build from H1 downward in a logical, nested order.
- Google uses your heading structure to understand and rank your content. Descriptive headings with natural keywords help your SEO.
- Screen reader users navigate your page entirely through headings. Proper structure is not optional, it is essential for accessibility.
- Headings are a structural and semantic tool. CSS controls how they look. HTML controls what they mean.
Good heading structure does not take long once it becomes a habit. Start applying these rules in every page you build from this point forward, and you will immediately be writing better HTML than the majority of beginners out there.
In the next article, we will discuss HTML paragraph tags, text formatting elements like <strong> and <em>, and how to structure body text properly. The foundation you built today with headings will make everything in text formatting click faster.
Mastering HTML Headings
Loading challenge…
Ready to Practice?
Select a difficulty level above to load your challenge.