Dilemma: HTML tag for site title
While working on my website, I was faced with a question: what HTML tag should I use for the site title?
To find an answer to this question, I started my own investigation. So today, I would like to share with you my findings on this matter.
Problem
Before going straight to solutions, I would like to explain the problem I faced, in regards to the site title.
Each page on my website is consisted of three (3) main areas:
- Header: content of this area is wrapped within a top level
<header>tag. - Main: content of this area is wrapped within a top level
<main>tag. - Footer: content of this area is wrapped within a top level
<footer>tag.
There is also <head> area which is autogenerated by Next.js. This area also includes <title> tag, which contains the name of the webpage. However, I do not want to talk about that title.
Instead, what I mean by the “site title” is the section which is located in the Header area. In other words, it is a visible title, which is located above the site navigation and next to the site tagline.
My problem regarding the site title was that I was not sure which tag to use for it: either <h1> or <div>.
The thing is that I would like to use <h1> tag for the page titles. The page title is located in the Main area.
Because of that, I was not sure if having two (2) <h1> tags would not be confusing for the users who use screen reader devices.
So yes, I do not really care about SEO in this case, because I think if the site will be semantic and understandable for screen reader devices then it will also be easily read by search engines.
Solution
After my research on this topic, I have found that there is no real standard on which tag to use for the site title.
Some suggests to use <h1> tag, while other suggests the opposite.
As for me, I decided to go against using <h1> tag for the site title, and use <div> instead. I believe it better contributes to the meaning of my webpage.
Here is what I think why this approach is better for my case.
The site title, along with the site tagline, on my website are wrapped within a top level <header> tag. Since this tag represents introductory content, text from site title and site tagline already describes a webpage in a few words.
So, there is no need to use <h1> tag for the site title in order to emphasize the meaning of a webpage. It is already done.
Exists a generally accepted rule to have one (1) <h1> per page in order to improve accessibility of a webpage. However, it is totally acceptable to have more than one top-level heading on a webpage.
There are some “SEO advices” on the Internet stating that you must have only one (1) <h1> tag per page. That is no longer true. You can have multiple <h1> tags on your webpage. However, you have to use them wisely.
The main content of my website is located in a top level <main> tag. Since this tag represents the dominant content of a webpage, I need to have <h1> tag inside that area in order to provide a short description of the area.
If every webpage on my website would have the same <h1> tag — in this case it is the site title — it would degrade the value of those webpages.
Thus, I decided to use <h1> tag for the page title.
Conclusion
In short, a structure of a webpage should be semantically meaningful. Thus, if you think that <h1> tag for site title better fits your structure — use it.
If you have the same situation as I then use div instead.