如果徽标是文本，徽标元素应该使用什么标签？

Question

我读到 <h1> 标签 is inappropriate for a logo。但是，如果您的徽标是纯文本，您应该使用什么？我觉得<p>和<span>也不合适。这是一个示例：

<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>

谢谢！

Answer 1

我相信标签主要由您决定。

鉴于它是纯文本，我不明白为什么它不应该是 h1。

但是分析你的情况，这就是我会做的。

方案1.使用h1并将其确定为用于显示logo的标签。永远不要再在 dom.

中使用它

选项 2. 为徽标创建一个新标签，例如。这些被称为 "Custom elements"。它应该是这样的：

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

然后您必须使用 CSS 格式化徽标。

阅读 this 以了解更多关于自定义元素的信息！ :)

Answer 2

在 HTML 中没有 "semantic" 标记徽标的方法（即语法），因此在基本层面上没有正确或错误的方法。也就是说，我不会使用 <h1> 作为徽标，因为 heading-tags 应该构建您的 HTML.

我通常使用带有徽标的简单 <div> 或 <a> 作为背景图像，因为我认为这是从屏幕阅读器中隐藏它的最佳方式。坦率地说，我认为将徽标作为 <img> 放在 <section> 中没有多大价值，因为一个部分应该包含内容的主题分组。

对于你的情况，我会将你的 <a> 格式化为 inline-block 并将徽标设置为背景图片。

Answer 3

鉴于您的标记示例，您似乎在询问 nav 元素中的 link。如果是这种情况，您不应该为它使用标题元素，因为标题元素会标记 nav 部分（这可能不是您想要传达的内容；如果您在 nav 中有一个标题, 它可能应该类似于 "Navigation").

在那种情况下，您根本不需要特殊元素，只需在 nav 中列出 link（最好在 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>

但是，如果您谈论（通常）显示在每个页面上的 site-wide banner/header 中的站点名称，则使用 h1 是有意义的，因为它代表站点，所有页面部分都应在该范围内（例如，site-wide 导航），它为文档大纲提供了一个 top-level 标签（否则将未指定）。在那种情况下，它不能是 nav 的一部分；它最近的部分应该是 body 部分根。

从语义上讲，站点 name/logo 显示为图像还是文本都没有区别。对于图像，alt 属性提供与文本等效的内容。

因此对于站点徽标，您可能有：

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

对于站点名称，您可能有：

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

Answer 4

只需使用<site-logo>...</site-logo>。 W3C validator wont complain as long as the element contains a dash.

Answer 5

与目前接受的答案相反，我们最好不要使用 H1 来包装您的品牌名称，如：

我知道 H1 的最佳和正确使用是将顶级标题指向 webpage/document，而不是 站点本身（即，将所有文档都命名为站点名称在这种情况下没有意义），并且
使用多个 H1s 通常被认为是不好的做法（如果您想使用 H1 为您的 documents/pages 命名，这是必要的）。

经过深思熟虑，我认为最好的答案是 通过包含 schema.org 微数据 来表达品牌名称，然后使用您认为对您来说合理的任何标签.

例如，您可以看到从 https://schema.org/LocalBusiness 底部附近拍摄的示例：

<div itemscope itemtype="https://schema.org/Restaurant">
  <span itemprop="name">GreatFood</span>

希望这有助于更明确地回答这个问题！

Answer 6

没有真正正确的答案，因为网站徽标没有官方语义元素，例如，我们有 <figure> 图像，<blockquote> && <q>对于引号块和引号，<main> 是 self-explanatory

所以从个人角度来说：

figure > img 如果徽标是图片
div > span 用于文本

现在为什么 `div > span`？

h1 应该在页面上只使用一次（不幸的是我没有官方参考）&& 搜索引擎会将徽标视为第一个标题
糟糕 UI 如果您在徽标中制作 link 主页页面，因为一些用户不习惯在找不到主页时单击站点徽标 link
divs 对屏幕阅读器没有帮助，因此在这种情况下它们对 SEO 不利，不像说 <section> 那样没有意义
不只是 span 因为容器有助于像居中这样的样式
最后但并非最不重要的一点是，您应该将徽标放在导航内部还是外部：内部出于与在 <div>

<span>

总结

将包含徽标的元素放在导航中
使用其中之一

figure > img
div > span

单独建一个HOMElink更好UI

希望我有所帮助:)

如果徽标是文本，徽标元素应该使用什么标签？

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

html

semantic-markup

所以从个人角度来说：

现在为什么 `div > span`？

总结

如果徽标是文本，徽标元素应该使用什么标签？

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

html

semantic-markup

所以从个人角度来说：

现在为什么 div > span？

总结

现在为什么 `div > span`？