I recently discovered the power of the <main> tag in HTML.
I started my web development career back in 2019 working as a full freelancer in 2020.
As you may know, I work as a freelancer for several companies. As a freelancer, I also create content for my clients. For one of them, I write monthly articles on the Blog website I created.
A few weeks ago I have written an article for its niche, which is construction.
Within the written article I have used the <main> tag and within the main tag, I have placed the <article> tag.
Similar to this:
The title of my article
I know that using semantic HTML on web pages has a positive impact on SEO. Id semantics it is improving the accuracy and relevance of search results, it also increases crawlability, and accessibility, and makes a better user experience.
You can also see another important article about SEO here.
Having this in mind I wanted to see any benefits of using this exact tag.
I cannot say for sure that it was this little change or others changes that I made, but I noticed an increase in Google Console searches afterward. My impression is that this helped.
One of the keys I discovered during my (not-so-long) experience in writing content is that Google prioritizes people with disabilities. In one of my searches, I discovered that:
The utilization of the main tag enables assistive technologies to comprehend the primary content of the page, thereby facilitating navigation and content discovery for individuals with disabilities. For instance, screen readers can quickly identify the primary content of the page, allowing disabled users to navigate directly to it.
the use of the <main> tag in HTML is a powerful tool for web developers and content creators.
Not only does it improve the accuracy and relevance of search results through semantic HTML, but it also increases crawlability and accessibility.
It also creates a better user experience for all visitors to a website.
Also, Google places high importance on accessibility for people with disabilities and that the <main> tag assists with navigation and content discovery for these individuals.
And, just before you finish reading this article, it is worth mentioning that the main element represents the dominant contents of the document. A document must not have more than one main element that does not have the hidden attribute specified. A hierarchically correct main element is one whose ancestor elements are limited to HTML, body, div, and form without an accessible name and autonomous custom elements. Each main element must be a hierarchically correct main element. According to this site
With all this said, that’s it for this one. Hope it helps.
PS: Have you noticed the pun in the title? 🙂