What tag should be used for a logo element if the logo is text?

There is no "semantic" way (i.e. syntax) to markup a logo in HTML, so on a fundamental level there is no right or wrong way. That said, I would not use a <h1> for a logo, since the heading-tags should structure your HTML.

I usually use a simple <div> or <a> with the logo as a background image because I think that's the nicest way to hide it from screen readers. Frankly I don't see much value of putting the logo as an <img> in a <section> since a section should encompass a thematic grouping of content.

In your case, I'd format your <a> as inline-block and set the logo as a background image.


Given your markup example, you seem to ask about a link in the nav element. If that’s the case, you should not use a heading element for it, because the heading element would label the nav section (that’s probably not what you want to convey; if you would have a heading in nav, it should probably be something like "Navigation").

In that case, you wouldn’t need a special element at all, just list the links in nav (ideally within a ul):

<header>
  <nav>
    <ul>
      <li><a id="logo" href="." rel="home">Company Name</a></li>
      <li><a id="linkOne" href="#thingOne"><img src="…" alt="…"></a></li>
      <li><a id="linkTwo" href="#thingTwo"><img src="…" alt="…"></a></li>
      <li><a id="linkThree" href="#thingThree"><img src="…" alt="…"></a></li>
    </ul>
  </nav>
</header>

However, if you talk about the site name that gets (typically) shown in the site-wide banner/header on each page, using a h1 makes sense, because it represents the site, in which scope all of the page’s sections should be (e.g., the site-wide navigation), and it gives the document outline a top-level label (which would be unspecified otherwise). In that case it must not be part of the nav; its nearest section should be the body sectioning root.

Semantically, it makes no difference if the site name/logo is shown as image or as text. In case of an image, the alt attribute provides equivalent content as text.

So for a site logo you might have:

<body>
  <header>
    <h1><a href="/" rel="home"><img src="…" alt="ACME Inc."></a></h1>
  </header>
</body>

And for a site name you might have:

<body>
  <header>
    <h1><a href="/" rel="home">ACME Inc.</a></h1>
  </header>
</body>

Tags:

Html

Semantic Markup

Recent Posts