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!

回答1:

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>

回答2:

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.

回答3:

I believe the tag would be mostly up to you.

I do not see why it shouldn't be h1, given that is plain text.

But analysing your case, this is what I would do.

Option 1. Use h1 and determine it as the tag to be used to display the logo. Never again it should be used in the dom.

Option 2. Create a new tag for the logo, such as . These are called "Custom elements". It should go something like this:

var logo = document.registerElement('com-logo', {
    prototype: Object.create(HTMLElement.prototype)
});

Then you would have to format the logo with CSS.

Read this to learn a little bit more about the custom elements! :)

来源：https://stackoverflow.com/questions/35371457/what-tag-should-be-used-for-a-logo-element-if-the-logo-is-text

标签

html

semantic-markup