HTML Heading Tags

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

<hn> Heading Tags in HTML 5

The <h1> through <h6> tags are the most frequently used heading tags in HTML. When heading tags are not grouped inside a hgroup element, the heading level is simply the number in the element name of the heading tag. When they are inside a heading group, the level represented by the whole group is the lowest number of the enclosed heading tags.

Level	Ungrouped	Grouped	Level	Ungrouped	Grouped
Level 1	<h1>...</h1>	<hgroup> <h1>...</h1> <h2>...</h2> ... </hgroup>	Level 4	<h4>...</h4>	<hgroup> <h4>...</h4> <h5>...</h5> ... </hgroup>
Level 2	<h2>...</h2>	<hgroup> <h2>...</h2> <h3>...</h3> ... </hgroup>	Level 5	<h5>...</h5>	<hgroup> <h5>...</h5> <h6>...</h6> ... </hgroup>
Level 3	<h3>...</h3>	<hgroup> <h3>...</h3> <h4>...</h4> ... </hgroup>	Level 6	<h6>...</h6>	<hgroup> <h6>...</h6> <h6>...</h6> ... </hgroup>

Syntax of HTML Heading Tags

Rules for coding heading elements in HTML 5

<body>
   ... flow content expected ...
   <hn>... phrasing content ...</hn>
   ... flow content expected ...
   <hgroup>
      <hn>... phrasing content ...</hn>
   </hgroup>
   ...
</body>

Inside an element where flow content is allowed, code one or more optional HTML heading (hn) elements.
Begin each heading element with a starting <hn> tag with a number between 1 and 6 following the letter h. The h in the element name is lower case and the element name should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Include any HTML global attributes on the heading tag as appropriate.
End the heading element with a matching </hn> closing tag.
Inside the heading element, code the appropriate flow content.

<aside> Content Model

Content of the <aside> Tag

The inner HTML of HTML heading elements is restricted to HTML comments, text content and only the tags that are allowed in phrasing content:

HTML Heading Tag Attributes

Attributes of HTML heading tags

global attributes

The only attributes that can be coded on the HTML heading tags are the common HTML attributes.

HTML Heading Tag Examples

Examples of heading tags in HTML 5

Multiple level headings in HTML

<h1 class="center">Section 1.0 - Top Level Heading</h1>
<p>This is a paragraph in a top level section.</p>
<hgroup>
   <h2>Section 1.1 - Second Level Heading</h2>
   <h3>This Subheading Does Not Start A New Section</h3>
</hgroup>
<p>This is a paragraph in a second level section.</p>
<h3>Section 1.1a - Third Level Heading</h3>
<p>This is a paragraph in a third level section.</p>
<h2>Section 1.2 - Another Second Level Heading</h2>
<p>This is a paragraph in another second level section.</p>
<h1 class="center">Section 2.0 - Another Top Level Heading</h1>
<p>This is a paragraph in another top level section.</p>

Clear after a floating image so headings do not flow around it

You can float an image with style="float: left" or style="float: right" then follow it with headings. If you try to position the headings below the image with style="clear: both", some browsers (Chrome, Safari) will move the headings below the image while other browsers (Firefox, Opera) will flow the headings around the image. For example:

<img src="/images/mathml.png" alt="" style="float: left; border: 1px solid gray; padding: 6px"/>
<p>This is the text that flows to the right of the floating image.</p>
<hgroup style="clear: both">
   <h3>This Is A Heading That Should Appear After The Image</h3>
   <h4>It Is Followed By Another Heading That Is Just A Little Longer</h4>
</hgroup>

View this in Firefox or Opera to see what happens:

This is the text that flows to the right of the floating image.

This Is A Heading That Should Appear After The Image

It Is Followed By Another Heading That Is Just A Little Longer

To make it look consistent in all browsers, code display: block in the style attribute to make sure the element with the clear: both style is rendered as a block element. Now that the position of the headings is correct, code a text-align: center style to center the headings if desired.

<img src="/images/mathml.png" alt="" style="float: left; border: 1px solid gray; padding: 6px"/>
<p>This is the text that flows to the right of the floating image.</p>
<hgroup style="display: block; clear: both; text-align: center">
   <h3>This Is A Heading That Should Appear After The Image</h3>
   <h4>It Is Followed By Another Heading That Is Just A Little Longer</h4>
</hgroup>

This is the text that flows to the right of the floating image.

This Is A Heading That Should Appear After The Image

It Is Followed By Another Heading That Is Just A Little Longer

Of course the styles can be put into a CSS Style Sheet, possibly with a class selector.

Changes in HTML 5 - <hn> Heading Tags

What's new in HTML 5

Differences between HTML 5 and earlier versions of HTML

The following attributes should not be coded on the <heading> tag because they either have been deprecated or were never officially supported:

align

Valid HTML 5