Headings
Published Aug 3, 2021Updated Nov 9, 2023
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
Changing Heading size
HTML Headings have default sizes but these can be changed using the CSS style attribute. Using the font-size property can customize how big or small headings will appear on the webpage. This is useful if the default size does not fill the available space correctly.
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.
Contribute to Docs
- 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.