Taras Dashkevych

Frontend developer focused on inclusive design

Choose HTML tag for site title

While working on my website, I was faced with a question: what HTML tag to use for the site title? To find the answer, I started investigation.

Problem

Before going straight to the solution, let me explain the problem I faced in regards to the site title. The thing is that 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.

Next.js automatically creates a <head> area with a <title> tag for the webpage's name, but that's not the title I'm talking about. I'm referring to the site title in the Header area.

I was unsure whether to use an <h1> or <div> tag there.

The thing is that I want to use <h1> tags for page titles in the Main area, but having two <h1> tags might confuse screen reader users. This is not good for accessibility and SEO.

I believe if the site is semantic and understandable for screen reader devices then it will also be easily read by search engines.

Solution

After researching the topic, I 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.

In my case, the site title, along with the tagline, are wrapped within a top level <header> tag. Since this tag represents introductory content, both title and tagline already describe a webpage.

No need to use <h1> tag for the site title to emphasize the meaning of a webpage. It is already done by a top level <header> tag.

Multiple top-level headings

Exists a generally accepted rule to have one (1) <h1> per page in order to improve accessibility of a webpage. However, it is acceptable to have more than one top-level heading on a webpage.

Internet SEO advice often says to use just one <h1> tag per page, but this is no longer true. You can use multiple <h1> tags, but it's important to use them wisely.

In my case, the main content is located inside a top level <main> tag. Since this tag represents the dominant content of a webpage, I need to have <h1> tag inside that area to provide a short description of the area.

If every webpage would have the same <h1> tag — in my case it’s the site title — it would degrade the value of those webpages.

Thus, I decided to use <h1> tag for the page title.

Conclusion

A webpage structure 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.