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( just like the fixed sider bar of this page on the right).
Usage note:
- Do not use lower levels to decrease heading font size: use the CSS {{cssxref("font-size")}} property instead.
- Avoid skipping heading levels: always start from
<h1>
, next use<h2>
and so on. - With the {{HTMLElement("section")}} element, you should consider avoiding using <h1> more than once on a page; by convention, it's used for the page's displayed title, with all headings below starting with
<h2>
. When using sections, you should use one<h1>
per section. See {{SectionOnPage("/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines", "Defining sections")}} for more information.
Content categories | Flow content, heading content, palpable content. |
---|---|
Permitted content | Phrasing content. |
Tag omission | {{no_tag_omission}} |
Permitted parent elements | Any element that accepts flow content; don't use as a child of {{HTMLElement("hgroup")}} element, it is now deprecated |
DOM interface | {{domxref("HTMLHeadingElement")}} |
Attributes
These elements include the global attributes.
The align
attribute is obsolete; don't use it.
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:
{{ EmbedLiveSample('All_headings', '280', '300', '') }}
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:
{{ EmbedLiveSample('Example_page', '280', '480', '') }}
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}} | {{Spec2('HTML WHATWG')}} | |
{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}} | {{Spec2('HTML5 W3C')}} | |
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}} | {{Spec2('HTML4.01')}} |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}} | {{CompatGeckoDesktop("1.0")}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}} | {{CompatGeckoMobile("1.0")}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
See also
- {{HTMLElement("p")}}
- {{HTMLElement("div")}}
- {{HTMLElement("section")}}