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>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn HTML on Codecademy