HTML <h1> to <h6> Tags

The <h1> - <h6> tags display headings of different sizes. The <h1> tag is the largest heading, and <h6> is the smallest.

HTML Tag

Example

#

Six headings from the largest (<h1>) to smallest (<h6>).

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
h1 = heading level 1
h2 = heading level 2
h3 = heading level 3
h4 = heading level 4
h5 = heading level 5
h6 = heading level 6

Using <h1> to <h6>

The <h1> to <h6> tags display HTML headings.

The <h1> tag is the most important heading with the largest font.

And the <h6> tag is the least important with the smallest font.

Note: There can be only one <h1> tag on a web page. The other headings do not have this limitation.

More Examples

These <h1> to <h6> elements are displayed from most to least important.
They are styled with increased transparency (decreased opacity) as they decrease in importance.

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6
<h1 style="opacity:1.0">This is heading 1</h1>
<h2 style="opacity:0.9">This is heading 2</h2>
<h3 style="opacity:0.8">This is heading 3</h3>
<h4 style="opacity:0.6">This is heading 4</h4>
<h5 style="opacity:0.4">This is heading 5</h5>
<h6 style="opacity:0.2">This is heading 6</h6>

Attributes for <h1> to <h6>

The <h1> to <h6> elements have no attributes, but they do accept global attributes.
The following are the most commonly used.

Attribute Value Description
id    value Provides the h1 to h6 element with a unique identifier.
class    classnames Assigns one or more classnames to the h1 to h6 element.
style    CSS-values Assigns CSS style values to the h1 to h6 element.

For additional global attributes see our global attributes list.


Obsolete Attributes

Do not use the attribute listed below.  It is no longer valid on the h1-h6 tags in HTML5.

Attribute Description Alternative
align Aligns the content to the h1-h6 tags. CSS text-align

Did you know?

Did you know?

Why so many heading tags?

The <h1> to <h6> tags help you organize your documents -- each level with a corresponding font size.

The <h1> tag has the highest level in the hierarchy and should only be used once on a page.

The other heading tags serve as subtitles and can be used multiple times.

These tags also help with SEO (seach engine optimization).

Tip: Don't confuse <head>, <header>, and <h1> - <h6> (heading) tags.  They are all very different.


Text Tags

The <h1> - <h6> tags are part of a group of tags that are used to create and format text documents. This group is referred to as the Text tag group. Together, these tags allow you to create comprehensive HTML text documents.

Here is a list of text tags.

Element Description
<h1>-<h6> Defines text headings in 6 different sizes
<p> Creates a paragraph
<span> Container for one or more inline text elements
<br> Creates a line break
<sup> Specifies superscript text
<sub> Specifies subscripted text
<u> Specifies underlined text
<i> Specifies italic text
<b> Specifies bold text
<em> Marks text that needs emphasis
<strong> Indicates text that is important or with high urgency
<del> Defines deleted text
<ins> Defines inserted text
<ruby> Represents a small annotation with pronunciation of text
<kbd> Specifies keyboard input, such as, CTRL or ALT
<wbr> Specifies a preferred word-break location for long words

Browser support

Here is when <h1> to <h6> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

Guides