Headings
Published Aug 3, 2021Updated Feb 17, 2022
Contribute to Docs
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.
All contributors
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.