新的HTML5元素，比如<section>和<article>是否毫无意义？

Question

别急着杀我，我只是出于好奇问问。

像<section>, <nav>, <article>, <aside>等元素似乎完全没有意义。当然它们可以让每个元素都有自己的位置（并进行搜索引擎优化）...但是过度组织也是可能的。有些情况下，一些元素不属于任何类别。使用这些新元素编写代码还需要更多时间。我真的没有看到添加这些新元素的真正目的。

我们（开发人员和查看网页的人）从中获得了什么？

- dustinliamc

---

好问题。有些人确实不知道。+1 - NotMe

参考链接：http://en.wikipedia.org/wiki/Semantic_web - Callum Rogers

我找到使用它们的唯一网站是getbootstrap.com。 - Omu

一个关于HTML5 section的好文章：https://www.impressivewebs.com/html5-section/ - elad silver

Answer 1

这些元素对于盲人的屏幕阅读器和Kindle等电子书阅读器非常重要。它们帮助它们知道何时显示/阅读什么内容。

- Joel Coehoorn

---

此外，它们对于像Google、Yahoo等网络爬虫（也称为搜索引擎）非常关键。使用语义元素可以帮助它们索引更精细的内容，以便最终用户搜索到所需内容。 - RBT

Answer 2

阅读一下这篇文章，（点此链接）它指出了使用HTML5的多种优势，如下所述：

使用这些元素有几个好处。当与标题元素（h1到h6）一起使用时，所有这些都提供了一种标记嵌套部分的方法，并且可以超出以前版本的HTML所可能的六个级别。

通过使用特定的分区元素来识别页面中各个部分的目的，辅助技术可以帮助用户更轻松地浏览页面。例如，他们可以轻松跳过导航部分或快速地从一篇文章跳转到另一篇文章，而无需作者提供跳转链接。作者也会因为将文档中的许多div替换为几个不同的元素之一而受益，这有助于使源代码更清晰，易于编写。

- keyboardP

Answer 3

HTML5样式化CSS也更容易阅读：

div#header
div#content .article
div#content .article h1
div#content .article h1+h2
div#footer

vs

header
section#content
section#content article
section#content article hgroup h1
section#content article hgroup h2
footer

（不使用高级选择器）

正如keyboardP通过引用所暗示的那样，对于非人类访问者来说，导航页面更容易。它增加了语义。但我同意你的观点，有时很难弄清楚要使用哪个元素section，article或老旧的div。在我看来，这使得语义变得不太强。但我们拭目以待。

- Michael

---

这与问题或您的答案完全无关，但是许多CSS作者建议不要使用id选择器。也许您想改变示例，使它们具有class选择器。我不是在评判您的答案意义，我只是提出另一种呈现方式的建议。 - chharvey

@TestSubject528491 写的这个例子，我一开始并没有把它看作是 CSS，而是一种伪 HTML，但你说得对，这可能会让人们认为这是一种不错的 CSS 编写方式。实际上的 CSS 不需要在 section 前面加上选择器，只需要使用 #content 就可以了，这样既简洁又快速。 - Michael

@chharvey 这太荒谬了。很多人从不使用ID，只使用类，这是荒谬的。ID存在于那些在页面上仅出现一次且可以被针对性地定位的元素中。您认为使用ID的缺点是什么？ - Bram Vanroy

@BramVanroy — 很高兴你问。 (1) 即使你“知道”将来不会重复使用它们，它们也不可重用。(想想：联合。) (2) 它们的特异性非常高。您需要255（或无限）个链接类来覆盖一个ID。(3) 在CSS中，它们与类别相比没有明显的优势。你能想到什么好处吗？ - chharvey

@chharvey 谢谢你分享这些文章，让我受益匪浅。不过我不同意作者的观点。是的，它们非常具体，这正是它的美妙之处。此外，当ID已经可用于例如JS函数中时，在该元素中添加另一个类似乎很愚蠢。我认为在处理非常大规模的项目时应避免使用ID，以防止重复使用ID。在较小的项目中，我看不出有什么问题。 - Bram Vanroy

@BramVanroy，我尊重你的意见。对于较小的静态项目来说，使用ID选择器可能没有太大的危害。实际上，“不起眼的优势”是浏览器在应用它们时稍微更有效率一些。但显然，对于需要随时间扩展的大型项目来说，它们可能会带来很多麻烦。顺便说一下，为了缓解我的强迫症，我必须纠正我之前评论中的拼写错误：我想表达的是“their”，而不是“they're”。 - chharvey

Answer 4

这一切都与语义有关！

但我同意你的观点，对于一些人来说，这些新的标记似乎毫无意义。一个经常被问到的问题是为什么选择这些特定的标记而不是其他任何标记，特别是一些标记非常适用于博客（例如article、section等），但没有包括其他常用的名称，比如产品或内容。正如您在下面的评论中所看到的，这是一个备受争议的话题！

因此，使用这些新标记取决于您如何编写标记，而且如何去做也没有对错之分。以列表为例，您可能会将其用于导航，不想对其进行样式化，并将其用于主要内容并需要进行样式化。您可以添加额外的类来指定哪些列表已进行了样式化，也可以只使用标记并从标记中针对样式进行操作：

<nav>
 <ul>
  <li><a href="">导航项1</a></li>
  <li><a href="">导航项2</a></li>
 </ul>
</nav>
<div>
 <ul>
  <li><a href="">列表项1</a><li>
  <li><a href="">列表项2</a></li>
 <ul>
</div>

在您的CSS中：

ul { list-style: bullet }
nav ul { list-style: none; }

- graham

---

如果你问任何一个参与工作组的人为什么选择这些特定的标签而不是其他标签，他们实际上无法回答。没错。除非你问Ian Hickson，就像xhtml.com在这次采访中所做的那样，在那里他回答说，新元素是基于作者已经在做的事情，这是通过Google对数十亿个网页的调查来判断的。 - Paul D. Waite

例如，您会注意到：1.nav是第8个最常用的类；2.navigation不在前20名中；3.nav占用的带宽比navigation少。 - Paul D. Waite

保罗，第一段只是表达了原始问题的背景和观点。我认为继续讨论HTML5是有用的，因为这个回答是在今年早些时候伦敦@media的演讲后的问答环节中针对为什么选择这些特定标签的问题而给出的。如果你仔细阅读我的回答，你会发现我确实指出了Web开发人员使用HTML5标签所获得的好处。 - graham

“第一段只是表达了原问题的背景，其中包含了我的观点。” —— “你指的是我引用你的那句话吗？它并不像是一个观点，而更像是在陈述为什么HTML5中添加了特定的标签而非其他标签。这是不正确的，这也是我对你回答的唯一异议所在。” - Paul D. Waite

我理解，我已经编辑了我的答案的第一个段落，以排除任何可能具有误导性的陈述。 - graham

顶级的东西，取消了踩。 - Paul D. Waite

Answer 5

好的，哪个听起来更加高效易读：

 <div id="nav">list of links</div>
 <div id=header> 
 <div id=section>content is good
 </div>
 </div>
 <div id=footer>copyright</div>

vs

  <nav>list of links</nav>
  <header>
  <section>content is good</section>
  </header> 
   <footer>copyright</footer>

在 DIV 混乱的堆积中扫描部分、标题和对话框会更容易。这样做还可以提高盲人的可访问性，因为它可以清楚地告诉屏幕阅读器它是什么。文章标签也是如此。此外，它可以改善结构并为标签提供更多含义。

有些网络浏览器不支持未知元素上的 CSS 样式，我认为这非常短视。

- netrox

Answer 6

我认为 HTML 语义化分区（例如

）的一个巨大缺陷在于，使其在实际浏览器中工作所需的代码涉及多个语句来应对真实用户使用的浏览器。上述示例并非真实的，而且无论如何，要阅读 HTML5 代码，您都必须记得 footer 是 div 的一种类型。仅仅将其称为 div 并赋予其描述性 ID，即使我们忽略实际上需要的多个语句（确实需要几年时间），这看起来对我来说更加清晰易懂。

这是一个想法：将语义化 div 的 ID 属性设置为像“title =”之类的属性-让现代浏览器和屏幕阅读器使用此信息来识别章节、旁注等，代码就会更简洁。不要停止称 div 为 div，因为您不能为整个星球安装新浏览器。

<div id ="footer" class="someclass someotherclass" semantic="footer">You, the screen
readers and all browsers know this is a div</div>

- Geoff Kendall

Answer 7

允许标题范围是使用<section>和<article>的主要好处。请参见http://diveintohtml5.info/semantics.html#header-element。

简而言之，在HTML5中，更容易标记文档的大纲（对于屏幕阅读器非常有用），而不必担心是否使用<h2>或<h3>等（当您在不同页面的不同位置包含组件时，这变得非常复杂）。

他们不能使用<div>来实现这一点，因为已经有数十亿个网页使用了<div>和标题，而不一定意味着标题范围。

诚然，<section>和<hgroup>已足够实现此目的。

- Paul D. Waite

Answer 8

使用新的HTML5标记语言的视觉效果可能对用户隐藏，但是用户可能会不知不觉地受益，因为这些标记语言可能会提供更好的搜索结果。我认为一旦HTML5成为标准，使用这些标记语言将对您网站的SEO非常重要。

- Kilmazing