DEV Community

Max Lockwood
Max Lockwood

Posted on • Originally published at maxlockwood.dev

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.

<head>
  <title>first page</title>
</head>

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

</html>
Enter fullscreen mode Exit fullscreen mode

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

Here is the result of this code:

HTML Headings

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.

<head>
  <title>first page</title>
</head>

<body>
   <h1>My Page</h1>
   <h2>About</h2>
   <p>Some text</p>
   <h2>Contacts</h2>
   <p>Some more text</p>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Here is the result of this code:

HTML Sub-headings

Conclusion

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.

Share this article. Follow me on Twitter for more updates.

Top comments (0)