When to use h1 in HTML – SEO – Semantic HTML

In this article you will learn once and for all when to use h1 in HTML, the main heading of webpages!

What’s up programmer, okay? Let’s learn something new!

Well, here we go: the subject of this article is very theoretical, as there is a big purpose behind headings, besides when to use h1 

What makes no difference

If you use headings just because of the font size, be aware that it doesn’t really matter.

You can change the font of any element via CSS with the font-size property

Tip: Any style changes to HTML tags must be guided by CSS

What makes the difference

Google uses headings to read and understand the page, so we have the entry of a well-spoken term in the world of web programming: SEO and another that comes as a freebie: semantic HTML

SEO: comes from Search Engine Optimization, that is, a ‘score’ that improves your page’s position on Google;

Semantic HTML: use tags according to the purpose they were created;

That said, we use the h1 tag to define the main content presented on the page, as a main title and once per page (this is a recommendation, not a rule)

Of course there is no limit, but leaving the page simple and organized can favor a more accurate analysis of it by Google

Consequently, it will make your HTML more semantic, following good development practices, that is, other developers will read your code better

And as a result your SEO increases, the two concepts go hand in hand

Other headings

Another important detail is that the ranking from h1 to h6 must be kept

That is, in degree of importance, use h1 for the most important subject and h6 for the least relevant to the page

Also try not to jump from headings!

For example: from h1 to h4

And don’t worry about using all the headings either, most pages reach at most h3

Note: This is neither required by Google nor by the W3C.

It is also important to mention that headings, from h2 onwards, do not have a ‘limit’ of use

For example: use h1 for the main subject, once, and several h2 for subtopics/sections (as is done in this blog  )

The title tag in the head and the h1

Make use of this tag, as it is very important for SEO, but we must note its relationship with the main title of the body (the h1)

Avoid repeating the title tag in the head equal to h1 on your page

This repetition may be frowned upon in the eyes of the SEO, as it would be an ‘attempt to circumvent’ the mechanism, forcing a repetition of content to try to make your page more evident

On h1: be straight to the point of the page

On title: work a short sentence with the context of the page/article

For example:

<h1>O melhor blog do mundo sobre Star Wars</h1>

<title>No melhor blog do mundo sobre Star Wars, você encontra toda a explicação da saga</title>

And what do you think, you know when to use h1 in HTML now? I hope so 🙂

Conclusion

In this article we’ve seen when to use h1 in HTML and what it’s really for and also some nuances between headings and the title tag

The style properties for HTML elements must all be changed via CSS

And the real importance of headings is to guide Google in what we present on our page

And that’s it for today, see you on the next post! 🙂

Want to improve your HTML skills? Click here!