Search code examples
htmlheadersemantic-markup

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


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?


Solution

  • 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.