HTML <h1>-<h6> Elements
The HTML <h1> through <h6> elements define six levels of headings used to organize a document into sections and establish a clear content hierarchy. The <h1> element represents the highest heading level, while <h6> represents the lowest.
Syntax
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>Each heading element requires an opening and closing tag. The number identifies the heading's level in the document hierarchy, with <h1> representing the highest level and <h6> the lowest.
Attributes
The <h1> through <h6> elements support the global HTML attributes. They do not have any element-specific attributes.
Example
This example uses several heading levels to organize a page into a main topic, sections, and subsections. Notice how the heading levels describe the structure of the content rather than simply changing the size of the text.
Usage Notes
Use heading levels to represent the organization of the content. A page will commonly begin with an <h1> for its main heading, followed by <h2> elements for major sections and lower-level headings for subsections.
HTML allows more than one <h1> element in a document, but using one clear <h1> for the main page heading usually provides a simple and understandable structure.
Keep heading levels in a logical order whenever possible. For example, an <h3> normally identifies a subsection of an <h2> section rather than being used directly after an <h1> simply because its default appearance is preferred.
Do not select a heading element based on its default font size. Heading levels describe the structure and importance of content, while CSS should be used to control their visual appearance.
Headings should contain meaningful text that identifies the content that follows. Avoid using heading elements solely to make ordinary text larger or bolder.
Accessibility
A clear heading hierarchy helps people understand how a page is organized and allows screen reader users to navigate between sections by heading level.
Use descriptive headings that clearly identify the subject of the following content. Avoid empty headings and maintain a logical hierarchy so the relationship between sections and subsections is understandable.
Do not use heading elements only for visual styling. If text is not actually a heading, use an appropriate element and CSS to create the desired appearance instead.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <h1>-<h6> Elements .
Related Elements
<hgroup> - Groups a heading with related secondary content such as a subtitle, alternative title, or tagline.
<header> - Represents introductory content that may contain a heading, navigation, or other introductory information.
<section> - Represents a thematic section of content that commonly includes a heading.
Specifications
HTML Living Standard: The <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> Elements