<h1>-<h6>
Headings at six levels, from the most important h1 to the least important h6. Together they form the page’s outline.
- Display
- block
- Closing tag
- Required
- Permitted content
- Phrasing content
Example
#<h1>JavaScript course</h1>
<h2>Module 1: Variables</h2>
<h3>Declaring variables</h3>
<h3>Numbers and strings</h3>
<h2>Module 2: Functions</h2>Definition and usage
#The elements from <h1> to <h6> mark headings. The digit is the level: <h1> is the title of the whole page, <h2> marks the main chapters, <h3> their subchapters, and so on. Together they form the document’s outline, a sort of table of contents.
Search engines aren’t the only ones that rely on this outline. Many screen reader users browse a page by jumping from heading to heading, the same way a sighted person skims subheadings with their eyes. That’s why you should pick a heading’s level based on its place in the structure, not on the font size, which you’ll set in CSS anyway.
The rules are simple. A page should have one <h1> describing its topic. Going deeper, don’t skip levels, so after <h2> use <h3>, not straight to <h4>. You can, however, jump back up by any number of levels, for example from <h4> to <h2>.
Browsers bold headings and size them from 2em for <h1> down to 0.67em for <h6>. Don’t use a heading just to make text big and bold, for example for a marketing tagline. A paragraph styled in CSS is enough for that.
Syntax
#<h1>Page title</h1>
<h2>Chapter</h2>
<h3>Subchapter</h3>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
More examples
#<h1>Heading h1</h1>
<h2>Heading h2</h2>
<h3>Heading h3</h3>
<h4>Heading h4</h4>
<h5>Heading h5</h5>
<h6>Heading h6</h6><article>
<h2 style="font-size: 1rem; margin: 0;">Python course</h2>
<p style="margin: 4px 0 0;">A card's small heading is still an h2, because that's what the page's structure calls for.</p>
</article>Default CSS
#Most browsers display this element with these default styles:
h1, h2, h3, h4, h5, h6 {
display: block;
font-weight: bold;
}
h1 { font-size: 2em; margin-block: 0.67em; }
h2 { font-size: 1.5em; margin-block: 0.83em; }
h3 { font-size: 1.17em; margin-block: 1em; }
h4 { font-size: 1em; margin-block: 1.33em; }
h5 { font-size: 0.83em; margin-block: 1.67em; }
h6 { font-size: 0.67em; margin-block: 2.33em; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Every page should have one
<h1>with its main topic. - Don’t skip levels going down.
<h3>comes after<h2>, even if you like how<h4>looks better. - Set a heading’s appearance in CSS. The level should follow from the content’s structure, not from font size.
Related entries
#- <hgroup>Groups a heading together with a subtitle, tagline, or kicker.
- <section>A thematic part of a document, usually with its own heading.
- <article>Self-contained content that makes sense read or shared on its own.
- <header>An introduction to a page or section: logo, title, navigation, author info.
- <p>A paragraph of text.
Spotted a mistake or missing an example? Write to us.