Markup CityISSUE #7 of 39

headings · h1 down to h6

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysHeadings <h1>–<h6> rank your content by importance and give the page an outline screen readers and search engines rely on.

Headings aren't just big text — they communicate hierarchy. <h1> is the page's main title; <h2> are major sections; <h3> subsections, and so on down to <h6>.

Use one <h1> per page and don't skip levels for looks — style with CSS if you want a smaller h2. Assistive tech and search crawlers read your heading outline to understand the page's structure.

Power-ups you unlock

Six levels: <h1> (top) down to <h6>
One <h1> per page — it is the title
Don't skip levels for visual size; use CSS instead
Headings form the outline screen readers navigate by

The Unclosed Tag attacks — common mistakes

Using a heading just to make text big (use CSS font-size instead)
Skipping from <h1> to <h4> — breaks the document outline
Multiple <h1>s competing to be "the" page title

Boss battleBuild a three-level outline: one <h1>, two <h2> sections, and an <h3> under the first <h2>. Then resize an <h2> with a style attribute instead of changing its level.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body>
  <h1>Article Title</h1>
  <h2>A Major Section</h2>
  <h3>A Subsection</h3>
  <h2>Another Section</h2>
</body></html>

▶ Open the interactive comic issue

‹ Attributes · Adding Instructions Paragraphs · The Workhorse Tag ›