html - 使用 等有什么意义吗？

Question

HTML5(或更准确地说是新的 HTML 规范)最受关注的方面之一是添加了 <section>。 , <article> , <aside>等。目标是引入一种新的轮廓算法。例如，以下文档:

<h1>Types of dogs</h1>
<section>
 <h1>Doberman</h1>
 <aside>
  <h1>Advertisement</h1>
 </aside>
</section>

应该产生这个大纲:

1. Types of dogs
   1. Doberman
      1. Advertisement

理论上，<aside>不应该是主要大纲的一部分，但是gsnedder's tool无论如何包括它。此外，众所周知，在用户代理中不存在此算法的实现¹。这阻止了我采用这些标签。虽然它们将是“最佳实践”，因为它们比 <div> 添加了更多的“语义”含义。 ，使用这些标签构建文档的方式(以保留实际预期的大纲)会破坏目的。通过谨慎使用 header 标签、源代码本身的信息结构和 CSS 可以达到相同的效果。

是否有充分的理由使用这些标签？

¹:来源MDN和 www.w3.org/TR/html5/sections.html(尽管 W3 喜欢编辑 WHATWG 规范，但它仍然是半权威的)

Answer 1

文档大纲和语义是两个独立的问题。你是正确的，因为不存在面向用户的大纲实现——唯一的实现是在专门为此目的创建的工具和一致性检查器中。这就是规范建议继续使用 h1–h6 来标记标题的原因。

但如今，HTML5 语义本身已在现代浏览器和无障碍工具中广泛实现。一些 HTML5 语义元素甚至为您内置了 ARIA 角色。查看ARIA in HTML spec , caniuse.com ，以及 this test (caniuse.com 本身链接到)。

比较以下片段(更改标题以说明缺少大纲算法):

<h1>Types of dogs</h1>
<section>
 <h2>Doberman</h2>
 <aside>
  <h3>Advertisement</h3>
 </aside>
</section>

<h1>Types of dogs</h1>
<div class=section>
 <h2>Doberman</h2>
 <div class=ad>
  <h3>Advertisement</h3>
 </div>
</div>

如果您需要支持不理解 HTML5 的用户代理，您可以只填充元素，或者使用旧标记。无论哪种方式，这两个片段对于那些用户代理来说在语义上都是毫无意义的。

如果您不需要支持旧版浏览器，则第一个片段在语义上是有意义的，而第二个片段……不是这样。无论您如何命名类名，类名都没有任何内在的语义值(value)——它们的存在只是为了方便作者。充其量，您所拥有的只是一系列通用部分和小节。广告部分中的 h3 与内容子部分中的 h3 没有区别。

当然，人类读者仍然可以通过查看类名从元素中推断出含义，但是将所有内容都放在 div 中会非常非常快地变得困惑。

坦率地说，除了支持旧版浏览器外，我想不出有什么理由在今天的新站点中使用旧版标记。如果有的话，HTML5 语义标记应该是默认的。请记住，内容为王，我们正在处理一种专为网络内容设计的语言。但我很快就转向了自以为是的领域。

请注意，我在这里没有提到 CSS。那是因为在谈论语义标记时，CSS 是完全不相关的。当您的文档独立于任何 CSS 使用时，语义最有效。