Heading elements

Summary

Heading elements implement six levels of document headings, <h1> is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

• Content categories Flow content, heading content, palpable content.
• Permitted content Phrasing content.
• Tag omission None, both the starting and ending tag are mandatory.
• Permitted parent elements Any element that accepts flow content; or as a child of an <hgroup> element
• DOM interface HTMLHeadingElement

Attributes

These elements include the global attributes.

The align attribute is in HTML 4.01 and in HTML5.

Examples

All headings

The following code shows all the heading levels, in use.

<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>

Here is the result of this code:

Example page

The following code shows a few headings with some content under them.

<h1>Heading elements</h1>
<h2>Summary</h2>
<p>Some text here...</p>

<h2>Examples</h2>
<h3>Example 1</h3>
<p>Some text here...</p>

<h3>Example 2</h3>
<p>Some text here...</p>

<h2>See also</h2>
<p>Some text here...</p>

Here is the result of this code:

Notes

Do not use lower levels to decrease heading font size: use the CSS font-size property instead.

Avoid skipping heading levels: always start from <h1>, next use <h2> and so on. Also try to have only one first level heading on a page.

In HTML5, use the <section> element to define the outline of a document. Headings provide titles for sections and subsections. You can also group a heading and its content using the <div> element.

Specifications

Browser compatibility

See also

• <p>
• <div>
• <section>