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