HTML5 Fundamentals

Headings & Document Outline

20 min Lesson 4 of 18

Understanding HTML Headings

Headings are one of the most important elements in HTML. They define the structure and hierarchy of your content, much like the chapters and sections in a book. HTML provides six levels of headings, from <h1> (the most important) down to <h6> (the least important).

Headings are not just about making text larger or bolder. They carry semantic meaning that browsers, search engines, and assistive technologies all rely on to understand your page.

The Six Heading Levels

Each heading level represents a different degree of importance. The <h1> tag is the main heading of the page, while <h2> through <h6> represent progressively smaller subsections.

Example: All Six Heading Levels

<h1>Main Page Title</h1>
<h2>Major Section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<h5>Minor Point</h5>
<h6>Least Important Heading</h6>

By default, browsers render <h1> as the largest and boldest text, with each subsequent level appearing smaller. However, you should never choose a heading level based on how it looks -- always choose it based on the content hierarchy.

The One h1 Per Page Rule

Every page should have exactly one <h1> element. This heading represents the primary topic of the entire page. Having multiple <h1> tags confuses search engines about what the page is actually about and weakens your SEO ranking.

Example: Correct Single h1 Usage

<body>
  <h1>Complete Guide to HTML Headings</h1>

  <h2>Why Headings Matter</h2>
  <p>Headings provide structure to your documents...</p>

  <h2>Heading Best Practices</h2>
  <p>Follow these guidelines for better results...</p>

  <h3>Accessibility Considerations</h3>
  <p>Screen readers use headings for navigation...</p>
</body>

Note: The <h1> heading is often the same as or similar to the content in the <title> tag, but they serve different purposes. The title appears in the browser tab and search results, while the h1 is displayed on the page itself.

Semantic Hierarchy and Document Outline

The hierarchy of your headings creates what is known as the document outline. This outline reveals the logical structure of your content. Headings should follow a sequential order without skipping levels -- an <h3> should appear under an <h2>, not directly under an <h1>.

Example: Proper vs Improper Heading Hierarchy

<!-- Correct: No levels skipped -->
<h1>Web Development Tutorial</h1>
  <h2>Chapter 1: HTML Basics</h2>
    <h3>What is HTML?</h3>
    <h3>Setting Up Your Editor</h3>
  <h2>Chapter 2: CSS Fundamentals</h2>
    <h3>Selectors</h3>

<!-- Incorrect: Skips from h1 to h3 -->
<h1>Web Development Tutorial</h1>
  <h3>What is HTML?</h3>
  <h4>Setting Up Your Editor</h4>

Common Mistake: Choosing heading levels based on visual size rather than content hierarchy is one of the most common errors beginners make. Never use an <h3> just because you want smaller text. Use CSS to control the appearance and let the heading level reflect the document structure.

Headings and Search Engine Optimization

Search engines like Google use headings to understand what your page is about. The <h1> carries the most weight, telling search engines the primary topic of the page. Subheadings (<h2> and <h3>) help search engines understand the subtopics you cover. A well-structured heading hierarchy can significantly improve your search rankings.

When writing headings, include relevant keywords naturally. However, avoid stuffing keywords into headings unnaturally, as search engines penalize this practice.

Headings and Accessibility

For users who rely on screen readers, headings are the primary way to navigate a web page. Screen readers allow users to jump between headings, creating an experience similar to scanning a table of contents. If your heading structure is broken or inconsistent, these users will struggle to find the content they need.

According to web accessibility surveys, navigating by headings is the most common way screen reader users find information on a page. This makes proper heading structure not just a best practice but a necessity for inclusive web design.

Pro Tip: You can test your document outline by using browser extensions like the HeadingsMap extension. It visualizes your heading hierarchy, making it easy to spot skipped levels or structural issues before they affect users or search rankings.

Styling vs Semantics

There is a critical distinction between how a heading looks and what it means. The visual appearance of headings should be controlled entirely through CSS, while the HTML heading level should reflect the content structure. You might want a particular heading to appear small, but if it represents a major section, it should still be an <h2>, styled with CSS to match your design.

Example: Separating Style from Structure

<!-- Wrong: Using h4 just for smaller text -->
<h1>My Blog</h1>
<h4>Latest Articles</h4>

<!-- Right: Correct level, styled with CSS -->
<h1>My Blog</h1>
<h2 class="section-subtitle">Latest Articles</h2>

In the correct version, the heading level accurately represents the content hierarchy while the CSS class controls its visual appearance. This approach ensures both accessibility and design flexibility.

Building a Good Heading Structure

A well-structured page reads like a detailed table of contents. Each heading should clearly describe the section that follows it, and the nesting should reflect logical groupings of content. Before writing HTML, it can be helpful to sketch out your heading outline on paper first.

Practice Exercise

Create an HTML page for a fictional restaurant website. Use a proper heading hierarchy with one <h1> for the restaurant name, <h2> headings for major sections like Menu, About Us, and Contact, and <h3> headings for subsections like Appetizers, Main Courses, and Desserts under the Menu section. Add a paragraph of descriptive text under each heading. Review your structure to ensure no heading levels are skipped and the outline reads logically from top to bottom.