<h1> through <h6>
The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest. By default, all heading elements create a block-level box in the layout, starting on a new line and taking up the full width available in their containing block.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| DOM API | ||||||
| The HTMLHeadingElement interface represents the different heading elements, through . It inherits methods and properties from the HTMLElement interface. | 1 | 12 | 1 | 3 | 18 | 1 |
| Other | ||||||
| The to HTML elements represent six levels of section headings. is the highest section level and is the lowest. By default, all heading elements create a block-level box in the layout, starting on a new line and taking up the full width available in their containing block. | 1 | 12 | 1 | 1 | 18 | 1 |
| The to HTML elements represent six levels of section headings. is the highest section level and is the lowest. By default, all heading elements create a block-level box in the layout, starting on a new line and taking up the full width available in their containing block. | 1 | 12 | 1 | 1 | 18 | 1 |
| The to HTML elements represent six levels of section headings. is the highest section level and is the lowest. By default, all heading elements create a block-level box in the layout, starting on a new line and taking up the full width available in their containing block. | 1 | 12 | 1 | 1 | 18 | 1 |
| The to HTML elements represent six levels of section headings. is the highest section level and is the lowest. By default, all heading elements create a block-level box in the layout, starting on a new line and taking up the full width available in their containing block. | 1 | 12 | 1 | 1 | 18 | 1 |
| The to HTML elements represent six levels of section headings. is the highest section level and is the lowest. By default, all heading elements create a block-level box in the layout, starting on a new line and taking up the full width available in their containing block. | 1 | 12 | 1 | 1 | 18 | 1 |
Syntax
<h1>Level 1 heading</h1>
<h2>Level 2 heading</h2>
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<h5>Level 5 heading</h5>
<h6>Level 6 heading</h6>Live demo
Documentoutline
Document. outlinestructure representationationation. with positiveheadinglevel.
Use cases
-
Page sections
Break long content into meaningful sections that users can skim and navigate quickly.
-
Nested hierarchy
Represent parent and child topics clearly in articles, forms, and documentation.
Cautions
- Do not skip heading levels purely for styling convenience; the level should reflect the real content hierarchy.
- Headings should label sections, not act as generic large text for emphasis only.
Accessibility
- A logical heading structure is one of the fastest ways screen reader users navigate complex pages.