<h1> through <h6>
Heading elements establish the outline and hierarchy of a page. They are essential for scanning, navigation, and understanding how content is organized.
Overview
Heading elements establish the outline and hierarchy of a page. They are essential for scanning, navigation, and understanding how content is organized.
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.
Related links
Powered by web-features