Mik*_*ike 17 html semantic-markup
我读过<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>
谢谢!
Joh*_*der 12
在HTML中标记徽标没有"语义"方式(即语法),因此在基本层面上没有正确或错误的方式.也就是说,我不会使用a <h1>作为徽标,因为标题标签应该构建您的HTML.
我通常使用简单<div>或<a>带徽标作为背景图像,因为我认为这是将其隐藏在屏幕阅读器中的最佳方式.坦白说,我不认为把标志作为的多少价值<img>的<section>,因为一节应包括的内容的专题分组.
在您的情况下,我将您的格式设置<a>为inline-block并将徽标设置为背景图像.
鉴于您的标记示例，您似乎询问了nav元素中的链接。如果是这种情况，您不应该为它使用标题元素，因为标题元素会标记该nav部分（这可能不是您想要传达的内容；如果您在 中有一个标题nav，它可能应该类似于“导航” ）。
在这种情况下，您根本不需要特殊元素，只需列出nav（最好在 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>
但是，如果您谈论在每个页面的站点范围的横幅/标题中（通常）显示的站点名称，则使用 ah1是有意义的，因为它代表站点，所有页面的部分都应该在哪个范围内（例如，站点范围的导航），并为文档大纲提供顶级标签（否则将不指定）。在这种情况下，它不能是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>