问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

我读到 <h1> 标签 不适用于徽标。但是，如果您的徽标是纯文本，您应该使用什么？我觉得 <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>

谢谢！

原文由 Michael Swarts 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlsemantic-markup
阅读 218
2 个回答
得票最新
社区维基
1
✓ 已被采纳

鉴于您的标记示例，您似乎询问了 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>

原文由 unor 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

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

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

在您的情况下，我会将您的 <a> 格式化为 inline-block 并将徽标设置为背景图像。

原文由 Johannes Jander 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题