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.
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
- Main: content of this area is wrapped within a top level
- Footer: content of this area is wrapped within a top level
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
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.
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.
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