Question

不要只是杀了我，我是出于纯粹的好奇心。

像<section>, <nav>, <article>, <aside>等元素似乎都毫无意义。当然，他们让一切都有自己的小地方（并且seo'd）......但可能会过度整理事物。在某些情况下，事情也不适合任何类别。它还增加了尝试编写这些内容所花费的时间。我只是没有看到任何移动添加这些新元素的真正目的。

我们（开发者和浏览网页的人）必须从添加它们中获得什么？

Answer 1

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

Answer 2

已阅读this article，因为它指出了各种优势，例如：

使用有几个好处这些元素。用于与标题元素结合（h1到h6），所有这些都提供了一种方法使用标记嵌套部分标题水平，超过六个级别可以使用以前的版本 HTML。

和

通过确定部分的目的在页面中使用特定的切片元素，辅助技术可以帮助用户更轻松地导航这页纸。例如，他们很容易跳过导航部分或迅速从一篇文章跳到了接下来不需要作者提供跳过链接。作者也因为取代了许多人的利益文档中的div与其中一个几个不同的元素可以帮助使源代码更清晰更容易作者。

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。 IMO，这使得语义不那么强大。但是，让我们看看会发生什么。

Answer 4

一切都与语义有关！

但我同意你的观点，对于某些人来说，这些新的标签似乎毫无意义。一个常见问题是为什么选择这些特定标签而不是其他标签，特别是因为某些标签非常特定于博客（文章，部分等），但不包括其他常用名称，例如产品或内容。正如您在下面的评论中所看到的，这是一个备受争议的话题！

因此，对于使用这些新标签，它实际上取决于您如何编写标记，并且没有正确或错误的方法来实现它。以列表为例，您可以将它们用于导航，不希望它们设置样式，也可以在主要内容中使用它们，并且需要对它们进行样式设置。您可以添加额外的类来指定要设置样式的列表，也可以单独使用标记和目标样式：

<nav>
 <ul>
  <li><a href="">Nav item 1</a></li>
  <li><a href="">Nav item 2</a></li>
 </ul>
</nav>
<div>
 <ul>
  <li><a href="">List item 1</a><li>
  <li><a href="">List item 1</a></li>
 <ul>
</div>

并在你的CSS中：


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

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样式，对我来说，这是非常短视的。

Answer 6

我认为HTML语义划分的巨大失败是，在现实世界中使这些工作的代码涉及多个语句，以应对真实人使用的实际浏览器。上面给出的例子并不是真正的，无论如何，要阅读html5代码，你必须回想一下，页脚是一种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>

Answer 7

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

简单地说：在HTML5中，标记文档大纲（这对屏幕阅读器很有用）要容易得多，而不必担心是使用<h2>还是<h3>还是其他任何东西（真正得到的）当您在不同页面的不同位置包含组件时会很复杂。）

他们不能用<div>来做到这一点，因为有数十亿的网页已经使用过<div>和标题，而不一定打算使用标题范围。

不可否认，<section>和<hgroup>已经足够用于此目的。

Answer 8

使用新的HTML5标记标记的视觉好处可能会对用户隐藏，但用户可能会无意中受益，因为这些标记可能为他们提供了更好的搜索结果。我认为一旦HTML5成为标准，这些标记标记的使用将对您的网站SEO变得极为重要。

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

8 个答案: