In this section, we will learn what headers <h1> – <h6> elements are and how to use them in HTML.

Heading Tags in HTML: What is <h1> – <h6> Tags in HTML?

In an HTML document, in order to create headers, we use <h1> through <h6> elements, which are known as header elements.

Among these header elements, the <h1> </h1> creates the largest header and as we use the others headers with larger number, the size becomes smaller and smaller.

Usually, in a document, the top header is created via <h1> header and for other headers on the page, depending on how important those headers are, we use <h2> and <h3> elements.

Note: for SEO reason, it’s usually best to limit the use of these headers to <h1> through <h3> and in rare cases <h4> as well.

HTML <h1> – <h6> Tags Syntax:

<h1> Header </h1>

<h2> Header </h2>

<h3> Header </h3>

<h4> Header </h4>

<h5> Header </h5>

<h6> Header </h6>

HTML <h1> – <h6> Tags Values

The value we set for <h1> – <h6> elements are the headers that we want to use in a document.

Example: Headings in HTML

See the Pen Headings in HTML by Omid Dehghan (@odehghan) on CodePen.

Example of Subheadings

See the Pen Example of Subheadings by Omid Dehghan (@odehghan) on CodePen.

Heading Styles in HTML

By default, browsers display headers with the following values:

HTML <h1> Header Default Style:

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

HTML <h2> Header Default Style:

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

HTML <h3> Header Default Style:

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

HTML <h4> Header Default Style:

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

HTML <h5> Header Default Style:

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

HTML <h6> Header Default Style:

h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

But we’re not limited to just the default styles set for these headers! Using CSS, we can change the style of any header as we want.

Example: header style HTML

See the Pen header style HTML by Omid Dehghan (@odehghan) on CodePen.

As you can see, we’ve changed the font-size of the <h2> element to 46px (which is even larger than the default size of <h1> element).

So with the help of CSS we can restyle any header as we like.