新的HTML5元素像<section>和<article>没有意义吗?

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

<section>, <nav>, <article>, <aside>等元素都显得毫无意义。 当然,他们让所有事情都有自己的一席之地(而且是seo)……但是可能过度组织事情。 在某些情况下,事物也不适合任何类别。 这也增加了花在编码这些东西上的时间。 我只是没有看到任何移动添加这些新元素的真正目的。

我们(开发人员和查看网页的人们)必须从添加它们中获得什么?

这些元素对于诸如盲人的屏幕阅读器和诸如Kindle的电子书阅读器的事情是重要的。 它可以帮助他们知道什么时候显示/阅读。

阅读了这篇文章 ,因为它指出了各种优势,如:

使用这些元素有几个优点。 当与标题元素(h1到h6)一起使用时,所有这些都提供了一种标记具有标题级别的嵌套部分的方法,超出了以前版本HTML所能达到的六个级别。

通过使用特定的切片元素来识别页面中各节的用途,辅助技术可以帮助用户更轻松地浏览页面。 例如,他们可以轻松跳过导航部分或从一篇文章快速跳到下一篇文章,而无需作者提供跳过链接。 作者也受益,因为用几个不同的元素之一replace文档中的许多div可以帮助使源代码更清晰和更容易编写。

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 

(不使用高级select器)

而且,当keyboardP通过报价暗示时,为非人类访问者导航页面更容易。 它增加了语义。 但是我也同意你的看法,有时候很难弄清楚哪一个元素使用sectionarticle或者好的老版本。 国际海事组织,这使得语义不太强。 但让我们看看会发生什么。

这完全是关于语义的!

但我同意你的看法,对一些人来说,这些新的标签似乎毫无意义。 一个经常被问到的问题是为什么select这些特定的标签,而不是其他的标签,特别是一些标签是非常博客特定的(文章,部分等),但没有包括其他常用的名称,如产品或内容。 正如你在下面的评论中看到的那样,这是一个激烈争论的话题!

因此,要使用这些新标签,这取决于您如何编写标记,而且如何去做也没有对错的方法。 以列表为例,您可以使用它们进行导航,而不是要求它们的样式,也可以将它们用在主要内容中,并且需要它们的样式。 您可以添加额外的类来指定哪些列表是样式化的,或者您可以单独使用标记和目标样式:

 <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="">列出项目1 </a> </ li>
  <UL>
 </ DIV>

并在你的CSS:


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

好吧,哪一个听起来更有效率和易于阅读:

  <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样式,对我而言,这是令人难以置信的短视。

我认为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> 

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

简而言之:在HTML5中,标记文档轮廓(对于屏幕阅读器很有用),而不必担心是否使用<h2><h3>或其他任何内容(当您将组件包含在不同的放置在不同的页面上)。

他们不能用<div>来完成这个工作,因为有数十亿个网页已经使用过<div>和标题,而不一定是想要标题范围。

无可否认, <section><hgroup>就足以达到这个目的。

使用新的HTML5标记标记的直观好处可能对用户隐藏,但用户可能无意中受益,因为这些标记可能为他们提供了更好的search结果。 我认为一旦HTML5成为标准,这些标记标签的使用将成为您的网站SEO非常重要。