Skip to content
Foxipa

Suggest an edit

Tell us what should be corrected, clarified, or improved. Submission will be connected to Foxipa’s contribution service later.

No information is sent anywhere yet. Your suggestion is only prepared in your browser.

Learning

HTML Headings

Learn how to structure document headings with HTML heading elements from h1 through h6.

Levels: Beginner ~12 min read

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.

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.

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

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.

html
<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.

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

Was this page helpful?

Mark this learning resource complete to track your learning progress.