Menu
Text & Formatting
<h1>–<h6> Headings
Six levels of section headings — the page outline.
1Heading Hierarchy
Use exactly one <h1> per page (the main title), then <h2> for sections, <h3> for sub-sections, and so on. Never skip levels for styling — that is what CSS is for.
Example Code
css
<h1>Page Title</h1>
<h2>Section</h2>
<h3>Sub-section</h3>
<h4>Smaller heading</h4>
<h5>Even smaller</h5>
<h6>Smallest</h6>2Put the element in context
Headings establish an outline that people can scan and assistive technology can navigate. Choose levels by the content hierarchy rather than font size. A heading can be visually smaller through CSS without changing its structural level.
3Practice with a small page
Create a page title followed by two section headings and one subsection. Read only the headings and see whether the structure is understandable. Change their font sizes independently while preserving the hierarchy in the HTML.
Finished reading?
Mark this topic as complete to track progress.