HTML Headings

Basic

HTML headings give a document a visible and semantic hierarchy. The six heading elements, from <h1> through <h6>, represent different heading levels. Choosing the level should reflect the structure of the content, not simply the size you want the text to appear.

The specification, translated

The HTML specification calls h1 through h6 heading content and gives each element a heading level based on its number. In plain language: the number tells readers and user agents where that heading sits in the hierarchy — h1 is level 1, h2 is level 2, and so on.

The specification also explains that headings identify sections, but a heading does not create a container element in the DOM. Think of a heading as the name of a section; use sectioning elements such as <section> or <article> when you actually need a semantic container around that content.

A useful practical rule follows from the specification: choose the heading level from the content relationship, not from the font size you want. CSS controls appearance; the heading element communicates structure.

The specification's heading-and-outline material also means you should not memorize a rigid 'exactly one h1' rule. What matters is whether the heading hierarchy accurately describes the document's sections. The current HTML Standard even shows that a sequence of heading levels can express section structure without requiring a section element for every heading.

For accessibility, W3C's HTML-AAM maps h1 through h6 to the heading role and exposes the numeric level corresponding to the element name. That is why replacing a real heading with a styled div is not an equivalent change: the visual appearance can match while the semantic information exposed to assistive technology does not.

<h2>Account settings</h2>

/* choose the right CSS property */
?

1. Understand the six heading levels

The heading elements form an ordered set. <h1> is the top-level heading, while <h2> represents the next level, followed by <h3> and so on through <h6>. A deeper level normally represents a subsection of the preceding higher-level section.

<h1>HTML</h1>
<h2>Elements</h2>
<h3>Headings</h3>
<h3>Paragraphs</h3>
<h2>Attributes</h2>

<h2>Document structure</h2>
<?>Headings</h3>

Here, both <h3> headings belong to the same <h2> section. The levels describe relationships rather than a list of visual sizes.

2. Build a semantic hierarchy

Use heading levels to express the relationships between sections. If a page has a main topic followed by several major sections, the main heading can be <h1> and those sections can use <h2>. A subsection inside one of those sections can then use <h3>. Sibling topics should normally use the same heading level.

Do not choose a heading because its default browser styling looks right. If a heading is too small or too large visually, change its appearance with CSS while keeping the semantic level that matches the document.

3. Do not confuse headings with document metadata

The <h1> element is part of the document content. It is not interchangeable with the document's <title> element, which belongs in the document metadata and is used for things such as the browser's title bar or tab. A page can therefore have a meaningful <h1> while its document title serves a related but different purpose.

<head>
  <title>HTML Headings | Foxipa</title>
</head>
<body>
  <h1>HTML Headings</h1>
</body>

4. Avoid common heading mistakes

• Do not use a heading only to make ordinary text look larger or bolder.

• Do not skip levels simply because a deeper heading has the visual style you want.

• Do not treat every prominent label, navigation item, or piece of metadata as a heading.

• Do not assume that heading elements are interchangeable with the visual typography supplied by CSS.

5. Use appropriate inline content inside headings

Headings can contain appropriate phrasing content, including links, emphasis, and inline code when that content belongs in the heading. Keep the heading understandable as a heading rather than turning it into a container for unrelated content.

6. Headings and sections work together

A heading names a section of content; the surrounding structure determines what that section belongs to. A heading does not create a magical container in the DOM. If you need an actual semantic section, choose an appropriate element such as <section>, <article>, or another element whose meaning matches the content.

<article>
  <h1>HTML</h1>

  <section>
    <h2>Headings</h2>
    <p>...</p>
  </section>

  <section>
    <h2>Paragraphs</h2>
    <p>...</p>
  </section>
</article>

The important relationship is conceptual: Headings identify sections; containers establish structure. Do not add a <section> merely because you have an <h2>. Use a sectioning element when the content actually forms a thematic section.

7. Do not treat heading levels as visual sizes

Browsers provide default styles for headings, but those styles are presentation, not meaning. You can make an <h4> look larger than an <h2> with CSS, but that does not change the document structure. Choose the HTML level from the content hierarchy, then use CSS for visual design.

This also means that replacing a heading with a styled <div> or <p> loses semantic information even if the result looks identical.

8. There is no “one h1 per page” rule to memorize

A common teaching shortcut says that a document must contain exactly one <h1>. That is not a useful rule for authoring modern HTML. What matters is that the headings accurately communicate the hierarchy of the content. A page can contain multiple independent top-level sections or articles, each with its own heading, when that structure makes sense.

Do not turn this into the opposite rule either: using many <h1> elements simply because they are visually convenient is not good structure. Choose levels that make the relationships between sections understandable to people navigating the document.

9. Headings are important navigation landmarks

People using screen readers and other assistive technology may navigate a document by its headings. Clear, specific heading text therefore helps users scan the page and jump to the part they need. A heading such as Examples is less useful than Create a semantic navigation bar when the latter accurately describes the section.

Keep heading text concise enough to scan, but do not remove words that are necessary to understand the section. Do not use a heading merely to create visual spacing.

10. Use hgroup when a heading and secondary line belong together

The <hgroup> element groups a heading with related secondary content such as a subtitle or tagline. It is useful when that secondary line belongs to the heading as a unit rather than representing a separate section.

<hgroup>
  <h1>HTML Headings</h1>
  <p>Build clear document hierarchies</p>
</hgroup>

Do not use <hgroup> just to get a particular visual layout. The grouping should reflect the relationship between the heading and its secondary content.

11. Write headings that describe the content

• Prefer specific wording that tells the reader what the section contains.

• Keep the wording consistent with the terminology used in the surrounding content.

• Do not repeat the page title in every subsection unless the repetition has a structural purpose.

• Do not put important information only in CSS-generated content or decorative styling.

• Use the same heading level for peer sections when they have the same structural depth.

12. Practice the hierarchy before styling it

Before writing CSS, try to read your headings as a plain-text outline. If the outline is confusing, changing font sizes will not fix the underlying structure. A useful exercise is to remove every paragraph and keep only the headings; the remaining list should still communicate the organization of the page.

<h1>Learn HTML</h1>
<h2>Document structure</h2>
<h3>Headings</h3>
<h3>Paragraphs</h3>
<h2>Content</h2>
<h3>Lists</h3>
<h3>Links</h3>

The two <h3> elements under <h2>Document structure</h2> are peers. When you later add another subsection under one of them, its level should reflect that relationship rather than the size you want it to have on screen.

Quick check

If you can explain why a heading has its level, distinguish the document heading from the page title, and use CSS rather than heading levels for visual sizing, you have the core idea. When you are ready, test yourself with the HTML Headings quiz. Take the HTML Headings quiz