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

Question

I have read that an <h1> tag is inappropriate for a logo. But if your logo is plain text, what should you use? I feel like <p> and <span> are also unsuitable. Here's a sample:

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

Thanks!

Answer 1

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.