DEV Community

Cover image for What are Heading Tags?
Bronwen Gien
Bronwen Gien

Posted on

What are Heading Tags?

One of the first tags you will learn in HTML is the heading tag, which is why we also included it in our list of 10 HTML tags every beginner should know. Heading tags range from <h1> (Heading 1) to <h6> (Heading 6).  As a beginner at coding, I was pleasantly surprised when I came across the heading tags as they were so simple to understand and implement in my code. The rest of this article will detail what heading tags are, when to use them and what they do exactly.

Heading tags are HTML tags that represent your page’s headings. Headings help the user (and browser) understand the importance of the content below the heading and what the content will be about. A <h1> tells the browser that heading is more important than a <h4>.

Table Of Contents

  1. What are heading tags used for in HTML
  2. How many types of headings can be written in HTML
  3. Which is the largest heading tag
  4. Which is the smallest heading tag
  5. Attributes to use with heading tags
  6. What are the benefits of using heading tags
  7. Heading tags code example
  8. Conclusion

What are heading tags used for in HTML

If you have seen how heading tags are rendered in the browser, you may be asking, “Why should I use heading tags when I can just change the weight and size of the font?“.

By adding heading tags, rather than simply changing the font weight or size, you tell the browser more about the importance of the heading and its subsequent content than merely making a formatting change.

You can change the formatting of a heading tag to look how you would like it to in weight, colour, size and more through CSS. Although headings with different tags render differently in the browser, heading tags have very little to do with formatting.

HTML headings are also used to benefit end-users. End-users frequently scan a page based on the headings, so organising content according to its importance and allocating the appropriate header can be very helpful.

Lastly, but by no means least are search engines, like Google. Search engines like Google utilise headings to index the structure and content of web pages. Using your heading tags appropriately makes it easier for the Google search engine to rank your web page.

How many types of headings can be written in HTML

According to the official HTML documentation 6 different levels of headings exist. These different levels are represented by tags from <h1> to <h6?>.

Which is the largest heading tag

The <h1> heading tags is the tag that will render the largest text (assuming no styling) and will be given the highest level of importance. <h1> tags are normally closely associated keywords in SEO, where the goal is to insert your keyword into a <h1> to tell search engines that your content relates to the specific keyword.

Learn more about heading tags and what the benefits are of using heading tas by Clicking Here.

Top comments (0)