Headings (h1–h6)

Learn how to structure web content using HTML heading elements (h1–h6) to improve accessibility, SEO, and document clarity.

What it is

HTML headings are semantic elements that define the title or section header of a document. There are six levels: <h1> through <h6>. The <h1> represents the most important heading, while <h6> represents the least important. Think of them as an outline for your page, similar to chapters and sub-chapters in a book.

Related terms include "document outline," "semantic markup," and "accessibility tree."

Why it matters

• Accessibility: Screen readers use headings to navigate pages. Users can jump between sections quickly if the hierarchy is logical.
• SEO: Search engines use headings to understand the structure and main topics of your content, influencing ranking.
• Readability: Visual users scan pages faster when text is broken into clear, hierarchical chunks.
• Maintenance: A consistent structure makes code easier to read and update for developers.

Syntax or steps

Use one <h1> per page for the main title. Use subsequent headings (<h2>, <h3>, etc.) to create subsections. Do not skip levels (e.g., jumping from <h1> to <h4>) unless necessary for specific design constraints, though best practice is strict nesting.

1. Identify the main topic of the page and wrap it in <h1>.
2. Break down the main topic into major sections using <h2>.
3. Break down major sections into subsections using <h3>, and so on.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Coffee Brewing Guide</title>
</head>
<body>
    <h1>Ultimate Coffee Brewing Guide</h1>
    
    <h2>French Press Method</h2>
    <p>The French press produces a rich, full-bodied coffee.</p>
    
    <h3>Grind Size</h3>
    <p>Use a coarse grind to prevent sediment.</p>
    
    <h3>Steeping Time</h3>
    <p>Let the coffee steep for four minutes.</p>
    
    <h2>Pour Over Method</h2>
    <p>This method highlights subtle flavor notes.</p>
</body>
</html>

In this example, <h1> defines the article's main subject. <h2> tags separate the two distinct brewing methods. <h3> tags break down specific steps within the French Press section. This creates a clear parent-child relationship.

Common mistakes

• Using headings for styling only: Never choose <h3> just because you want smaller text than <h2>. Use CSS for visual size; use HTML for structure.
• Skipping levels: Going from <h1> directly to <h4> confuses screen reader navigation. Keep the hierarchy sequential.
• Multiple h1 tags: While technically allowed in some contexts, having multiple <h1> tags dilutes the main topic signal for SEO and accessibility tools. Stick to one primary <h1>.
• Empty headings: Avoid <h2></h2> with no text. It creates invisible navigation points that confuse assistive technology.

When to use it

Compare headings with other structural elements like paragraphs or lists.

Use headings when you need to define a new section or topic. Use paragraphs for continuous prose. Use strong tags for inline emphasis, not structural breaks.

Practice

Guided Exercise: Take a simple blog post about "Healthy Eating." Write an <h1> for the title, two <h2> sections for "Benefits" and "Tips," and one <h3> under "Tips" for "Hydration."

Challenge: Review a webpage you visit often. Identify its heading structure. Does it follow a logical hierarchy? If not, rewrite the first three sections using correct <h1>-<h3> nesting.

Quick check

Question: Can you use <h2> before <h1> in a document?

Answer: Technically yes, but it is bad practice. The <h1> should generally appear first to establish the main topic. Starting with <h2> implies there is a missing higher-level context, which harms accessibility.

Summary

HTML headings provide the skeleton of your web page, guiding both search engines and assistive technologies. By maintaining a strict, non-skipping hierarchy starting with a single <h1>, you ensure your content is accessible, readable, and optimized for discovery.