Font-end developer focused on inclusive design

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.