What are the Six HTML Heading Tags?

What are the six HTML Heading Tags?

HTML defines six heading levels. A heading element entails all font changes, paragraph breaks before and after the header, and any white space required to portray the heading. H1, H2, H3, H4, H5, and H6 are the heading elements, with H1 being the highest (or most important) level and H6 being the lowest.

HTML headings are defined with the <h1> to <h6> tags.

  <title>first page</title>

  <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>


Note: Browsers automatically add some white space (a margin) before and after a heading.

Here is the result of this code:

HTML headings from H1 to H6

It is not suggested to use headings solely to make text larger or bolder, because search engines use headings to index the structure and content of web pages. Headings are used for highlighting important topics. They provide valuable information and tell us about the structure of the document.

Best Practice

It is best practice to have a single <h1> element on the page, which defines the main heading, and use the other heading element for the other headings on the page.

  <title>first page</title>

   <h1>My Page</h1>
   <p>Some text</p>
   <p>Some more text</p>


Here is the result of this code:

A HTML page showing various heading sizes


In this article were learnt about all the different heading tags. To summarise, a title or subtitle that you want to display on the webpage can be defined as an HTML heading or HTML h tag. When you place text within the heading tags <h1>........./h1>, it is displayed in bold on the browser, and the size of the text is determined by the number of headings.

The <h1> to <h6> tags define six different HTML headings, from the highest level h1 (main heading) to the lowest level h6 (least important heading).

The largest heading tag is h1, and the smallest is h6. As a result, h1 is used for the most important heading and h6 is used for the least important.

Further reading

Learn more about : The HTML Section Heading elements

See also

Text Formatting Tags in HTML with Examples
How to Begin with Semantic HTML
How to Create an HTML Boilerplate

If you liked this article, then please share. You can also find me on Twitter for more updates.

Pin It on Pinterest