Html: Should the h1 tag be used for the site title or the page title?

Question

In the past I have often put the site title in an <h1> tag, and then the main page title in an <h2>. Is this considered correct, or should the main page title be in the <h1> tag? If so, where do you put the site title? In a regular <div>? Or?

What is the most semantically correct, and what is the best when considering things like accessibility?

Answer 1

There's no real standard and there are quite a few differing opinions. I agree with womp though: you shouldn't have the same H1 on every page of the site. I'd leave the site title to the <title> tag.

Semantically (and to aid accessibility), the generally accepted rule is one <H1> per page or topic. It's valid to have more than one top-level heading on a page, as long as those headings break the document into separate logical chunks discussing different things. So to take the example of a blog home page showing the five most recent articles, it would be fine for each to have its own <H1>.

However, when it comes to SEO, the recommendations are usually that you only have one H1 per page.

I've gone for a hybrid approach on my design blog: on the home page, there is an H1 describing the site, and each post title is an <H2>. However, on the individual post pages, the post title is the <H1>. This seems (so far) to strike a good balance between semantics and optimising for search engines.

Answer 2

It's better if H1 tags are contextually related to the majority of the content on the page - so it should really be the page title.

If every page has the same H1 tag (i.e. the site title), it degrades the value of them (and overall, they are really the most valuable tag).

If you're putting the site title in the header as something that's not an image with alt text, I would usually just style up a div or a span.

Answer 3

On page 20 of Google's Search Engine Optimization Starter Guide :

Use heading tags appropriately

On a page containing a news story, we might put the name of our site into an <h1> tag and the topic of the story into an <h2> tag.