h1, h2, h3, h4, h5, h6: The HTML Section Heading elements

The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest. Headings create a hierarchical structure that helps users and assistive technologies understand the organization of your content.

Heading Hierarchy and Document Structure

Proper heading structure is crucial for accessibility and SEO. Follow these principles:

Sequential Order

Always use headings in sequential order without skipping levels. Start with <h1> for your main page title, then use <h2> for major sections, <h3> for subsections, and so on.

<!--  Good: Sequential hierarchy -->
<h1>Building Your Personal Website</h1>
<h2>Getting Started</h2>
<h3>Choosing a Domain</h3>
<h3>Selecting Hosting</h3>
<h2>Design Principles</h2>
<h3>Typography</h3>
<h4>Font Selection</h4>
<h4>Readability</h4>

<!-- L Bad: Skipping levels -->
<h1>Building Your Personal Website</h1>
<h4>Getting Started</h4>  <!-- Skipped h2 and h3 -->

One H1 Per Page

Each page should have exactly one <h1> element that represents the main topic or title of the page.

Logical Structure

Headings should reflect the logical structure of your content, not just visual styling. Use CSS for visual appearance.

Attributes

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Creating an Independent Website | IndieWeb Guide</title>
</head>
<body>
    <!-- Main page heading - only one h1 per page -->
    <h1>Creating an Independent Website</h1>
    
    <!-- Major sections use h2 -->
    <h2>Why Own Your Content?</h2>
    <p>When you publish on social platforms, you're building value for someone else...</p>
    
    <h2>Getting Started</h2>
    <p>Building your own website gives you complete control...</p>
    
    <!-- Subsections use h3 -->
    <h3>Choosing Your Domain</h3>
    <p>Your domain name is your identity on the web...</p>
    
    <h3>Static Site Generators</h3>
    <p>Static site generators help you build fast, secure websites...</p>
    
    <!-- Sub-subsections use h4 -->
    <h4>Jekyll</h4>
    <p>Jekyll is a popular Ruby-based static site generator...</p>
    
    <h4>Hugo</h4>
    <p>Hugo is known for its incredible build speed...</p>
    
    <h4>Eleventy</h4>
    <p>Eleventy offers great flexibility and simplicity...</p>
    
    <h2>IndieWeb Technologies</h2>
    <p>The IndieWeb community has developed several technologies...</p>
    
    <h3>Webmention</h3>
    <p>Webmention allows websites to notify each other about links...</p>
    
    <h4>How It Works</h4>
    <p>When you link to another website that supports webmentions...</p>
    
    <h4>Implementation</h4>
    <p>Adding webmention support to your site involves...</p>
    
    <h3>Microformats</h3>
    <p>Microformats add semantic meaning to your HTML...</p>
    
    <h3>IndieAuth</h3>
    <p>IndieAuth lets you use your domain as your identity...</p>
    
    <h2>Building Community</h2>
    <p>The IndieWeb is more than technologyit's a community...</p>
    
    <h3>Homebrew Website Club</h3>
    <p>Regular meetups where people work on their personal websites...</p>
    
    <h3>IndieWebCamp</h3>
    <p>Annual conferences focused on building independent websites...</p>
</body>
</html>

Accessibility Considerations

Screen readers use heading structure to navigate content
Skip links often jump between headings
Document outline tools rely on proper heading hierarchy
Search engines use headings to understand page structure

Common Mistakes to Avoid

Using headings for styling only - Use CSS instead
Skipping heading levels - Always go in sequential order
Multiple h1 elements - Use only one per page
Empty headings - Every heading should have meaningful content
Very long headings - Keep them concise and descriptive