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

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!

Solution

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>