HTML heading Tags - h1, h2, h3, h4, h5, h6

In an HTML document in order to provide different heading levels heading elements are used. It is not the <heading> tag which creates a heading, but <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>, with <h1> used for the 1st heading, <h2> for the second heading which is sub-heading for <h1>, and so on.

Heading Elements are used to create a headline for the text displayed on the webpage.

For example, if you want to display an article on your HTML page, then the article is written in normal plain text while its title is written in bold and large text. In such cases, heading elements are used to provide a distinction between the title(sub titles) and the remaining text.

A heading element is defined as <hn> where the range of n is from 1 to 6.

If you want to group all the heading elements in a single group then you can use the <hgroup> ... </hgroup> element, and put the heading tags inside the opening and closing <hgroup> tag, which is newly introduced in HTML.

Also, these are block-level elements.

HTML <hn> Tag - Syntax and Usage

The <hn> element requires the start(opening) tag and end(closing) tag.

The required syntax for the same is given below:

<h1>.....content here ...</h1>

<h2>.....content here....</h2>

<h3>.......content here...</h3>

<h4>.....content here.....</h4>

<h5>.....content here...</h5>

<h6>.....content here.....</h6>

Once again, please note that <hn> is not a tag, n here is just to represent the six numbers using which the 6 heading tags are created, as shown in the example above.

HTML <hn> Tag Basic Example:

Below we have a basic example for a clear understanding of the heading tags:

In the code example above, we have also used the <hgroup> tag to group together heading 4, 5, and 6.

Browser Support for HTML <heading> tag

Following browsers support this attribute:

• Firefox 1+

• Google Chrome 1+

• Internet Explorer 2+

• Apple Safari 1+

• Opera 4+