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>添加了更多“语义”含义，但是使用这些标记构建文档（以保留实际的预期轮廓）的方式将失败目的。通过仔细使用标头标签，在源代码本身和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本身链接到的）。

比较以下片段（标题已更改为缺少概述alg的帐号）：

<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的用户代理，您可以只是填充元素，或者使用旧版标记。无论哪种方式，这两个片段对于那些用户代理来说在语义上都没有意义。

如果您不需要支持旧浏览器，则第一个代码段在语义上有意义，而第二个代码段则不是这样。无论你为什么命名，类名都没有任何内在的语义价值 - 它们只是为了作者的便利而存在。充其量，您拥有的是一系列通用部分和子部分。广告部分中的h3与内容子部分中的h3没有区别。

当然，人类读者仍然可以通过查看类名来从元素中推断出意义，但是将div中的所有东西都非常快速地弄乱了。

坦率地说，除了支持旧版浏览器之外，我现在无法想到在新网站中使用旧版标记的任何理由。如果有的话，HTML5语义标记应该是默认的。请记住，内容为王，我们正在处理专为网络内容设计的语言。但是我很快就会转向舆论界。

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

Answer 2

无论你怎么称呼它们 - 块，盒子，区域，区域 - 我们已经将网页划分为可见的部分十多年了。问题是，我们从来没有合适的工具来做到这一点。虽然我们的界面看起来像网格一样，但是底层结构已经从编号标题和非语义帮助元素拼凑而成;肆无忌惮的内容与自己的盒状外观不一致。

来源： https://www.smashingmagazine.com/2013/01/the-importance-of-sections/

使用<section>等有什么意义吗？

2 个答案: