HTML5 Section还是 Article?

在论坛、stackOverflow以及推特中，我经常看到的一个关于HTML5的问题：使用那个，article还是section?

事实上，经常得到的答案是“都不用，使用div“。但是这两个新的元素一开始并不容易让你弄清楚，因为它使得我们的注意力集中在我们在写什么，我们以何种方式呈现它；在布局一个HTML网页时，我们在考虑一个我们以前没有想使用的（元素）。然而这是一个新的东西，需要认真想一想。

 

很多HTML5的大师如HTML5Doctors Oli Studholme 和 Bruce Lawson 已经写过关于这方便的文章，此篇文章包含了我自己的声音和想法。

Div

第一个你需要自问的问题是如果你仅仅是想对这些信息使用CSS，请使用div.在HTML5中和HTML4.01中，div元素的意义并没有改变，它永远是你想要的那样。如果被包含的元素彼此之间在语义上并不相关且无通用标题，div就是你想要的。

Section

现在你已经决定所要包含的元素是相关的，然我看一下 SECTION元素。HTML5规范中是这样描述的：

section元素表示一个文档和应用的通用部分。一个section,在此上下文中，是一个专题的内容组，带典型的标题。

所以基本上section元素应该在一个通用标题下成组的相关性的信息。

Estelle Wey 做了一个很好的比喻，她谈论到一张报纸被分成几个部分：新闻、体育 、不动产（她是美国人）。每一个部分都有一个通用的标题和标题相关的内容。有时会包含articles，帮助我们更好的理解。。。。

Article

article元素是特定类型的section元素： 

它表示一个文档、页面、应用或者站点中自包含的组成部分，原则上，可独立发布或者重用，例如在多种媒体上。

(HTML5 specification ).

使用上面的比喻， 体育部分将包括关于体育的文章，每个单独的小块都有他们自己的标题和内容，他们都是自我包含的。

HTML5规范同时也指出： 

当注重显示元素内容的时候，鼓励作者使用article元素取代section元素。

在这种情况下，新闻文章比喻再次显得很合适，报纸网站的RSS经常包含每个自包含文章的链接。

嵌套

现在比较清晰了，但是还有一个令人困惑的地方，一些section里包含article和section。在HTML5里是符合规范的并且在一个较长的文章里，按照逻辑将其分成几个sections是一个很好的办法。

这使你可能会对很多互相嵌套的sections,articles感到困惑，然而，就像divits一样，通常如果你发现用错了，你需要返回重新考虑你的语义结构。

结论

我可以通过一些代码示例来填充这边文章，但是最终需要你自己思考这个问题，这是你的内容，你需要考虑如何合理的呈现它。没有关于article和section的真正的硬性规定，只有一个指导方针帮助你做出明智的决定，在此过程中你将和我还有一他人一样会犯错，并从中获得经验。

原文地址： http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article

翻译水平有限，感谢指正！