Heading Tag

Overview

Heading tags refer to the <h1>–<h6> elements that express the title and hierarchical structure of content in HTML. The "h" stands for heading, and a smaller number denotes a higher level: <h1> is the most important top-level title and <h6> is the lowest. Headings not only break a document into chunks that are easy for people to read, they also act as semantic signposts that help assistive technologies such as screen readers—and search engines—grasp the structure and subject of the content.

According to the MDN documentation, heading elements generate block-level boxes by default and are designed to express the title hierarchy of a page. They are not elements meant for adjusting font weight or size.

Hierarchy and Best Practices

Headings behave like a document's table of contents. You place a single <h1> for the title that represents the whole page, mark its subsections with <h2>, and express the finer points inside those with <h3>, descending along the logical depth. The core principles can be summarized as follows.

• Express the page topic with a single <h1>. Much like the document's <title>, the <h1> summarizes the entire content of the page.
• Do not skip levels. Don't jump straight from <h2> to <h4>; pass through <h3> on the way down. Skipping a level leads screen reader users to believe an intermediate level is missing.
• Make each title accurately reflect its section, including relevant keywords naturally rather than stuffing them in.
• Use CSS for visual sizing. Don't abuse heading tags just to make text look bigger.

<h1>The Complete Guide to Heading Tags</h1>
  <h2>What Heading Tags Are</h2>
  <h2>Hierarchical Structure</h2>
    <h3>The Role of h1</h3>
    <h3>The Role of h2 Through h6</h3>
  <h2>SEO and Accessibility</h2>

Evidence

Two common misconceptions about headings are clarified by the sources.

Semantic order and rankings. At the 2024 SEO Office Hours, Google's Gary Illyes stated that the semantic order of headings is very useful for accessibility—especially for screen readers—but has little impact on Google's search ranking algorithms. As Search Engine Journal summarizes, fixing heading order will not change your rankings. This does not mean "order doesn't matter, so use headings however you like"; rather, it means proper order is still recommended for accessibility and readability.

Multiple <h1> allowed. Google has explained that having more than one <h1> on a page is not a problem and is a common pattern on the web. SEO audit tools such as Ahrefs, Semrush, and Screaming Frog, on the other hand, flag "multiple H1" as an issue—but they do so against a best-practice standard, not against what Google actually allows. In short, multiple <h1> tags are not a penalty factor by Google's standards, yet keeping one <h1> per page is the safer choice for a clear content structure.

Implementation Checklist

• Give each page exactly one clear <h1> that captures the core topic.
• Lay out the section structure as <h2> → <h3> → <h4> without skipping levels.
• Confirm that each heading accurately summarizes the body content directly beneath it.
• Keep titles concise (roughly four to eight words) and include relevant keywords naturally.
• Handle font size and weight with CSS rather than heading tags.
• Check that the page structure makes sense when you navigate by headings alone with a screen reader.

References and Sources

• MDN Web Docs — The HTML Section Heading elements (h1–h6)
• Search Engine Journal — Google Clarifies H1-H6 Headings For SEO
• Stan Ventures — Multiple H1 Tags on Page is Perfectly Fine in SEO
• Seobility Wiki — H1-H6 Headings: SEO Best Practices