What You’ll Learn

By the end of this tutorial, you’ll structure pages with correct h1–h6 heading hierarchy for readability, SEO, and accessibility.

HTML provides six heading elements — <h1> through <h6> — that define the outline of your content. This guide covers syntax, hierarchy rules, styling, and best practices.

What Are HTML Heading Tags?

Heading tags (<h1> to <h6>) label sections of content by importance. <h1> is the main heading (largest, most significant) and <h6> is the smallest subheading. Browsers render each level at a default size, but CSS can change appearance while preserving semantic meaning.

Proper heading structure helps screen readers navigate by headings, helps search engines understand topic hierarchy, and makes long pages scannable for all users.

📝 Syntax

Wrap heading text in the appropriate opening and closing tag:

<h1>Main Heading</h1>

<h2>Subheading</h2>

<h3>Section Title</h3>

<!-- ... -->

<h6>Least Significant Heading</h6>

Syntax Rules

• Use exactly one h1 per page for the primary topic (in most layouts).
• Do not skip levels — go from h2 to h3, not h2 to h5.
• Heading elements are block-level and require closing tags.
• Place headings inside main, article, or section — not randomly in footer for page structure.

⚖️ Heading Tags vs <header>

These are often confused. They work together but serve different purposes:

⚖️ Heading Level Hierarchy

Each level nests logically under the one above it:

📚 Importance of Heading Tags

Examples Gallery

Heading hierarchy, attributes, document outline, and CSS styling with live previews and Try It Yourself editors.

<main>

  <h1>Main Heading</h1>

  <h2>Subheading</h2>

  <h3>Heading 3</h3>

  <h4>Heading 4</h4>

  <h5>Heading 5</h5>

  <h6>Least Significant Heading</h6>

</main>

<h1 id="main-heading" class="highlight">Main Heading</h1>

<h2 id="subheading" class="emphasis">Subheading</h2>

<main>

  <h1>HTML Tutorial</h1>

  <section>

    <h2>Getting Started</h2>

    <h3>Install Tools</h3>

    <p>Setup instructions...</p>

  </section>

  <section>

    <h2>First Page</h2>

    <p>Build your first HTML file...</p>

  </section>

</main>

<h1 class="page-title">Styled Main Heading</h1>

<h2 class="section-title">Styled Subheading</h2>

♿ Accessibility

Headings are one of the most important accessibility features on a page:

• Write descriptive text — headings should summarize the section they introduce.
• Do not skip levels — jumping from h1 to h4 confuses screen reader outline navigation.
• One h1 per page — in most documents, a single h1 identifies the main topic.
• Do not use headings for styling only — pick the correct level; use CSS for size and color.

💡 Best Practices