Using a H1 logo in HTML5

Asked 20/8, 2014 at 13:16 Answered 20/8, 2014 at 22:54

The "h1 tag with an image" debate seems as old as time itself, but with HTML5 explicitly allowing multiple H1 tags as part of its spec, all the previous questions on this subject seem out of date.

As I understand it, the following works perfectly with the HTML OA:

<body>
  <header>
    <h1>
      <a href="http://www.example.com"> 
        <img src="logo.png" alt="Ernie's Restaurant - Great Italian food">
      </a>
    </h1>
  </header>

  <nav><!-- the site-wide navigation --></nav> 

  <article>
    <h1>About us</h1>
    <p>…</p>
  </article>

</body>

But I'm working with an SEO company on a website and they've told me:

"The logo link CAN’T be H1. It doesn’t make sense."

Are they right? Is there something bad about the above document outline? If you can't put the logo in a H1 tag, why do the W3C do it themselves on their website?

These people are supposedly SEO experts, but I just don't understand their complaint. What am I missing?

Electrotype answered 20/8, 2014 at 13:16 Comment(0)

Most of the time, you'd want to wrap the image in an anchor, which also has a title... See This answer and This answer.

Maybe they were just nervous about the lack of a proper anchor? The img tag is entirely legitimate.

Chil answered 20/8, 2014 at 13:23 Comment(1)

Doh. Well spotted. There IS a <a> tag on the actual website. I just forgot to include it. There isn't a title= attribute, so maybe that's it. – Electrotype 20/8, 2014 at 13:27

Yes, you can have an img element as content of an h1 element.
Yes, it makes sense to have the img-logo as h1 (in case it belongs to the body sectioning root, like it does in your example).

If your site doesn’t show a separate textual name, you definitely should do this. Otherwise, the document outline could be wrong (if you don’t use sectioning elements wherever needed) or at least the outline would have an unlabeled top-level entry, which is not very user friendly/accessible.

If you have a site logo and a textual site name, it’s discussible: either include the img together with the text in the same h1, or have only one of these elements in h1 (either one is possible) and have the other one as "alternative title", e.g., together in a header element.

For examples, see some of my related answers on SO (1, 2, 3) and Code Review (1, 2, 3).

(Your "SEO expert" is not the only one having a problem with this, as you can see in some of the comments to my linked answers. I have yet to see an argument against it ….)

Mediocre answered 20/8, 2014 at 22:54 Comment(0)

Recommended topics

Hot tags