Headings

Headings

Among the HTML elements are the 6 heading elements. They are labeled 1-6, with 1 being the largest sized heading and 6 being the smallest. These are great for labeling different sections in a website:

<h1>
Heading 1
<h1>
<h2>
Heading 2
<h2>
<h3>
Heading 3
<h3>
<h4>
Heading 4
<h4>
<h5>
Heading 5
<h5>
<h6>
Heading 6
<h6></h6>
</h6>
</h5>
</h5>
</h4>
</h4>
</h3>
</h3>
</h2>
</h2>
</h1>
</h1>

Rendered page with the 6 HTML heading elements

Accessibility with Headings

Each heading has semantic meaning for the overall structure of a page. Headings have affects on how well a page performs with SEO and how devices like screen readers can access them. Here are a few best practices for using heading elements in an accessible and SEO-friendly way:

  • Keep it to one <h1> element to one page. This element should be associated with the main topic of the page.
  • Do not skip levels. Go from <h1> to <h2> and so on.
  • Avoid nesting headings too deeply so they aren’t skipped.
Interested in helping build Docs? Read the Contribution Guide or share your feedback.

Learn HTML on Codecademy