【问题标题】:What tag should be used for a logo element if the logo is text?如果徽标是文本,应该为徽标元素使用什么标签?
【发布时间】:2016-02-12 20:15:25
【问题描述】:

我读到了<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>

谢谢!

【问题讨论】:

    标签: html semantic-markup


    【解决方案1】:

    没有“语义”方式(即语法)来标记 HTML 中的徽标,因此从根本上说,没有正确或错误的方式。也就是说,我不会使用 &lt;h1&gt; 作为徽标,因为标题标签应该构成您的 HTML。

    我通常使用带有徽标的简单&lt;div&gt;&lt;a&gt; 作为背景图片,因为我认为这是将其隐藏在屏幕阅读器之外的最佳方式。坦率地说,我认为将徽标作为 &lt;img&gt; 放在 &lt;section&gt; 中没有多大价值,因为一个部分应该包含主题的内容分组。

    在您的情况下,我会将您的 &lt;a&gt; 格式化为 inline-block 并将徽标设置为背景图片。

    【讨论】:

    • 徽标是纯文本,不是图像。
    • 那为什么不直接使用 -tag 呢?
    • 这就是我最终所做的。很简单,对吧?我只是在探究它是否是最好的语义选择。也许这是一个愚蠢的问题。
    • 我已经等 w3c 15 年多了。我使用&lt;brand&gt; 作为默认品牌标签。 &lt;img&gt;&lt;a&gt;&lt;span&gt; 内部品牌以支持可行性。
    【解决方案2】:

    鉴于您的标记示例,您似乎在询问 nav 元素中的链接。如果是这种情况,则不应为其使用标题元素,因为标题元素将标记nav 部分(这可能不是您想要传达的内容;如果您在nav 中有一个标题,它可能应该类似于“导航”)。

    在这种情况下,您根本不需要特殊元素,只需列出 nav 中的链接(最好在 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>
    

    但是,如果您谈论(通常)显示在每个页面的站点范围横幅/标题中的站点名称,使用 h1 是有意义的,因为它代表站点,所有页面的部分应该是(例如,站点范围的导航),并且它为文档大纲提供了一个顶级标签(否则将未指定)。在这种情况下,它不能是nav 的一部分;它最近的部分应该是body 切片根。

    从语义上讲,网站名称/徽标显示为图像还是文本没有区别。对于图像,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>
    

    【讨论】:

      【解决方案3】:

      我相信这个标签主要取决于你。

      我不明白为什么它不应该是 h1,因为那是纯文本。

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

      选项 1. 使用 h1 并将其确定为用于显示徽标的标记。再也不要在 dom 中使用它了。

      选项 2. 为徽标创建一个新标签,例如 .这些被称为“自定义元素”。它应该是这样的:

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

      然后你必须用 CSS 来格式化 logo。

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

      【讨论】:

      【解决方案4】:

      对此没有真正正确的答案,因为网站徽标没有官方语义元素,例如,我们有 &lt;figure&gt; 用于图像,&lt;blockquote&gt; && &lt;q&gt; 用于引用块和引号,以及&lt;main&gt; 不言自明

      所以从个人角度来说:

      • figure &gt; img 如果徽标是图像
      • div &gt; span 用于文本

      现在为什么要div &gt; span

      • h1 只能在页面上使用一次(不幸的是我没有官方参考)&& 搜索引擎会将徽标视为第一个标题
      • 如果您在徽标中创建主页链接,则用户界面不好,因为某些用户不习惯在找不到主页链接时单击站点徽标
      • divs 对屏幕阅读器没有帮助,因此在这种情况下它们对 SEO 不利,不像 &lt;section&gt; 这没有意义
      • 不只是 span 作为一个容器将有助于定中心等样式
        最后但并非最不重要的一点是,您应该将徽标放在导航内部还是外部:内部 出于与将 &lt;span&gt; 包装在 &lt;div&gt; 内相同的原因

      总结

      1. 将包含徽标的元素放在导航中
      2. 使用任一
      • figure &gt; img
      • div &gt; span
      1. 制作单独的 HOME 链接以获得更好的用户界面

      希望我有所帮助:)

      【讨论】:

        【解决方案5】:

        与当前接受的答案相反,理想情况下,我们不应该使用H1 来包装您的品牌名称,因为:

        • 我了解H1 的最佳和正确用法是为网页/文档而不是网站本身提供顶级标题(即,所有标题为站点名称的文档在这种情况下都没有意义),并且
        • 使用多个 H1s 通常被认为是不好的做法(如果您想使用 H1 为文档/页面命名,这是必要的)。

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

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

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

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

        【讨论】:

          【解决方案6】:

          只需使用&lt;site-logo&gt;...&lt;/site-logo&gt;W3C validator 不会抱怨as long as the element contains a dash

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2015-05-20
            • 1970-01-01
            • 2015-04-29
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2011-10-14
            相关资源
            最近更新 更多