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>.
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.
Which is the smallest heading tag
Heading tags are numbered sequentially from 1 to 6, where <h1> is the most important and <h6> is the least important or visually smallest heading tag.
Attributes to use with heading tags
As with most elements in HTML you can attach attributes to heading tags, but in the case of heading tags these attributes are limited to global attributes such as style, class and ids. If you are interested in learning what a class is in HTML you can click here.
What are the benefits of using heading tags
While there are many reasons to use heading tags on your web page, undoubtedly, one of the most important reasons is to use heading tags for search engine optimisation purposes by inserting your target keyword into a <h1> heading.
Heading tags code example
Heading tags can be written as follows:
<h1>What are heading tags</h1> <h2>Why are heading tags used in HTML</h2> <h3>How many types of headings can be written in HTML</h3> <h4>Which is the largest heading tag</h4> <h5>Which is the smallest heading tag</h5> <h6>Attributes to use with heading tags</h6>
The above code would render in the browser as follows:
Conclusion
Heading tags are some of the simpler tags in HTML and likely the first ones you will get introduced to. Despite how simple heading tags look, they are vital to your website, specifically from a search engine optimisation perspective.
Did you know everything about what a heading tag is?
I hope this article inspired you to take that leap and start learning to code. Click Here to meet other new coders like you and join our community.
