我读到了<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
没有“语义”方式（即语法）来标记 HTML 中的徽标，因此从根本上说，没有正确或错误的方式。也就是说，我不会使用 <h1> 作为徽标，因为标题标签应该构成您的 HTML。
我通常使用带有徽标的简单<div> 或<a> 作为背景图片，因为我认为这是将其隐藏在屏幕阅读器之外的最佳方式。坦率地说，我认为将徽标作为 <img> 放在 <section> 中没有多大价值，因为一个部分应该包含主题的内容分组。
在您的情况下，我会将您的 <a> 格式化为 inline-block 并将徽标设置为背景图片。
【讨论】：
<brand> 作为默认品牌标签。 <img>、<a> 和 <span> 内部品牌以支持可行性。
鉴于您的标记示例，您似乎在询问 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>
【讨论】：
我相信这个标签主要取决于你。
我不明白为什么它不应该是 h1，因为那是纯文本。
但是分析你的情况，这就是我会做的。
选项 1. 使用 h1 并将其确定为用于显示徽标的标记。再也不要在 dom 中使用它了。
选项 2. 为徽标创建一个新标签，例如 .这些被称为“自定义元素”。它应该是这样的：
var logo = document.registerElement('com-logo', {
prototype: Object.create(HTMLElement.prototype)
});
然后你必须用 CSS 来格式化 logo。
阅读this 了解更多关于自定义元素的信息！ :)
【讨论】：
对此没有真正正确的答案，因为网站徽标没有官方语义元素，例如，我们有 <figure> 用于图像，<blockquote> && <q> 用于引用块和引号，以及<main> 不言自明
figure > img 如果徽标是图像div > span 用于文本div > span？divs 对屏幕阅读器没有帮助，因此在这种情况下它们对 SEO 不利，不像 <section> 这没有意义span 作为一个容器将有助于定中心等样式
<span> 包装在 <div> 内相同的原因
figure > imgdiv > span【讨论】：
与当前接受的答案相反，理想情况下，我们不应该使用H1 来包装您的品牌名称，因为：
H1 的最佳和正确用法是为网页/文档而不是网站本身提供顶级标题（即，所有标题为站点名称的文档在这种情况下都没有意义），并且H1s 通常被认为是不好的做法（如果您想使用 H1 为文档/页面命名，这是必要的）。经过深思熟虑，我认为最好的答案是通过包含 schema.org 微数据来表达品牌名称，然后使用您认为对您来说合理的任何标签。
例如，您可以看到从https://schema.org/LocalBusiness 底部附近拍摄的示例：
<div itemscope itemtype="https://schema.org/Restaurant">
<span itemprop="name">GreatFood</span>
希望这有助于更明确地回答这个问题！ ?
【讨论】：
只需使用<site-logo>...</site-logo>。 W3C validator 不会抱怨as long as the element contains a dash。
【讨论】：