HTML5 <h1-h6> Tag

The HTML <h1>–<h6> tags are used to represent six levels of section headings. The <h1> tag is the highest section level and the <h6> tag is the lowest.

The only content permitted inside these elements is phrasing content. Both the starting and ending tag are mandatory for these elements. The parent of the <h1>-<h6> tags can be any element that accepts flow content. Don’t use them as a child of <hgroup> element, it is now deprecated.

Here are a few things to keep in mind while using headings:

  • Heading information may be used by user agents etc. to automatically construct a table of contents for the document.
  • You should not use lower levels of headings to decrease heading font size. This should be accomplished using the CSS font-size property instead.
  • You should avoid skipping heading levels. Always start from <h1>, next use <h2> and so on.
  • With the <section> element, you should consider avoiding using <h1> more than once on a page. By convention and for accessibility, 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.
  • You should not use any of the heading elements as a descendant of the address element.

The following style is applied to these elements by default:

h1 {
  display: block;
  font-size: 2em;
  margin-before: 0.67em;
  margin-after: 0.67em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}

h2 {
  display: block;
  font-size: 1.5em;
  margin-before: 0.83em;
  margin-after: 0.83em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}

h3 {
  display: block;
  font-size: 1.17em;
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}

h4 {
  display: block;
  margin-before: 1.33em;
  margin-after: 1.33em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}

h5 {
  display: block;
  font-size: .83em;
  margin-before: 1.67em;
  margin-after: 1.67em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}

h6 {
  display: block;
  font-size: .67em;
  margin-before: 2.33em;
  margin-after: 2.33em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}

Here is an example of using this tag:

<h1>Heading elements</h1>

<h2>Introduction</h2>
<p>Write something about heading elements here.</p>

<h2>Attributes</h2>
<h3>Attribute One</h3>
<p>Some explanation of attribute one.</p>

<h3>Attribute 2</h3>
<p>Some explanation of attribute one.</p>

<h2>Further Reading</h2>
<p>A list of resources.</p>

Attributes

These elements only accepts global attributes.

Examples

See the Pen HTML h1-h6 Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <h1> element on MDN.
  2. You can also read the HTML <h1> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top