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.
Looking to contribute?

Learn HTML on Codecademy