2

I have two <h1> tags on a website.

  1. Every page is the logo of the site

  2. The article headline of the page.

I know having more than one <h1> tags per page is a bad practice. Should I remove the <h1> tag from the logo?

  • 1
    Is your logo really a heading? – John Conde Dec 6 '16 at 13:04
  • @JohnConde: No but it was there done by the previous developer. – fuddin Dec 6 '16 at 13:06
  • Never use an h1 for a site logo. Never. It is a waste of potential that gives you absolutely nothing. The h1 tag should he the post title. Period. – closetnoc Dec 6 '16 at 16:48
3

Yes, remove the h1 tag from the logo, a common error is to use it just to use its styling but it has no sense from a semantic point of view.

An h1 element represents the heading with the highest rank for a section, so it makes sense to use it for a title.

  • 1
    Marcanuy says the truth. If i can suggest something, you can use span instead of h1 for Logo, if your Logo is based on a typo design, if is an image you can use div img src="yourlogo.png". – Sago Dec 7 '16 at 8:10
2

If you care about semantic HTML and the document outline, it makes sense to use h1 for the logo (assuming that the logo represents the site name).

Why? See the next three steps.

1. Without headings

A simple, common HTML5 document without headings could look like:

<body>
  <header><!-- site-wide header --></header>
  <main><article><!-- page-specific main content --></article></main>
  <nav><!-- site-wide navigation --></nav>
  <footer><!-- site-wide footer --></footer>
</body>

We have three sections here:

  1. The body (sectioning root)
  2. The article
  3. The nav

In the document outline, each section gets an entry (which is, semantically, equivalent to a heading). So the outline, without using any heading elements, is:

1. untitled <body>
  1.1 untitled <article>
  1.2 untitled <nav>

2. With headings for article and nav

Now let’s give the article a heading element. It doesn’t matter which one, but HTML5 recommends to use a heading element that corresponds to the nesting level, i.e., h2 in this case: <h2>My first blog post</h2>.

And for the sake of this example, let’s give the nav a heading, too (h2 for the same reasons), although it typically doesn’t need one if it’s the only navigation: <h2>Navigation</h2>

So we have:

<body>
  <header><!-- site-wide header --></header>
  <main>
    <article>
      <h2>My first blog post</h2>
    </article>
  </main>
  <nav>
    <h2>Navigation</h2>
  </nav>
  <footer><!-- site-wide footer --></footer>
</body>

The document outline doesn’t change, it just gets labels:

1. untitled <body>
  1.1 "My first blog post"
  1.2 "Navigation"

3. … and for body

But what is with the untitled body entry? It longs for a heading! What heading could it possibly get? The site name! Why? Because the page doesn’t contain page-specific content (like the main content) only, but also site-wide content (like the header, the footer, and the navigation). And a site heading allows us to represent this in the outline.

So the heading for the body sectioning root would typically be the site name (<h1>Alice’s blog</h1>), which can of course also be a logo (<h1><img src="logo.png" alt="Alice’s blog" /></h1>).

This gives us:

<body>
  <header>
    <h1><img src="logo.png" alt="Alice’s blog" /></h1>
  </header>
  <main>
    <article>
      <h2>My first blog post</h2>
    </article>
  </main>
  <nav>
    <h2>Navigation</h2>
  </nav>
  <footer><!-- site-wide footer --></footer>
</body>

Which results in this outline:

1. "Alice’s blog"
  1.1 "My first blog post"
  1.2 "Navigation"

My answers to related questions:

  • Except a <h1> that is only an image is not readable text and search engines can't do anything with it, though the alt attribute can help. A better idea is to either use pseudo elements for the image and text inside the <h1>. There are those rare times when an image will not download or disappear altogether. Always use text. btw, there is no closing slash for the <img> tag. – Rob Dec 7 '16 at 12:48
  • @Rob: As explained in my linked answer, the logo is content, so HTML should be used for it, not CSS. The alt attribute does exactly do its job, giving a text representation (in case the logo contains the site name), and every somewhat sophisticated search engine should be able to handle it. -- Regarding the closing slash: We already had this discussion ;-) It’s optional in the HTML syntax, and required in the XHTML syntax. – unor Dec 7 '16 at 12:57
  • An image is always presentation and never content of a heading element. The alt attribute is there in case the image is missing and not a stand-in for the image in an outline. And I'll say again about the closing slash. It is not optional. It's not in the spec for any HTML tag and never has been. It's allowed but does nothing and ignored. – Rob Dec 7 '16 at 13:01
  • @Rob: 1) It’s not correct that an "image is always presentation". Some images are, some are not. 2) And it’s not correct that an image should never be part of a heading. Depending on context, it might be a bad practice, but it can be perfectly fine, semantic, intended, useful. 3) I agree that it’s not a stand-in for the outline (and outline parsers would probably not display the alt value), but it’s what we have to work with if the author doesn’t also have the site name as text. Here CSS could be used to hide an additional text span, containing the site name, next to the img logo. – unor Dec 7 '16 at 13:21
  • @Rob: Regarding closing slash: I already gave you a link to the relevant section in the spec in our last discussion, but you had arbitrary requirements that something like that would have to be noted in a specific other section of the spec (which is not the case). Feel free to create a question about this (although you just said that it’s "allowed", and by definition that means that it is part of the spec). – unor Dec 7 '16 at 13:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.