之前参加过几次webruilder年会，每次都有关于HTML5的共享内容，最近两次都谈到了H5的大纲算法，主要针对H5语义标签的应用。
HTML5带出一系列新元素，并将在未来得到广泛应用。然而，有些元素在使用时很容易混淆，包括以下两个新元素：<article>和<section>。
最常见的问题是：在什么情况下我们应该使用这些元素？以及我们应该如何正确地使用这些元素？
Section元素
这 它是最容易产生歧义的元素之一。它与<div>元素有什么区别？我们一直在使用它<div>把段落分开，所以除了 了<div>,我们什么时候使用这个元素？我们引用官方文件来解释它。根据WHATWG文档，对<section>做了以下元素 描述：
“<section>元素表示文档或应用程序中的一般段落 – WHATWG”
从描述中我们可以看到<section>元素的作用是分段，或多或少相似<div>。但它仍然有一个特例。在文档中添加了一份特别声明：
“当一个元素仅用于风格或脚本的方便时，我们鼓励作者使用它<div>。<section>当元素的内容需要明确列出时，元素适用于元素。- WHATWG”
基于此，我们可以总结以下两点：
首先，虽然section元素可以在技术上设计风格，但当有复杂的风格或脚本时，我们仍然建议使用div元素。
第二，类似<li>Section元素用于列出内容。
因此，在现实例子中使用<section>元素的原因是博客内容的结构化列出，代码如下：
<div class="blog"> <section class="post"> <h2 class="post-title">Blog Post Title</h2> <p class="post-excerpt">Ice cream tart powder jelly-o. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p> </section> <section class="post"> <h2 class="post-title">Blog Post Title</h2> <p class="post-excerpt">Ice cream tart powder jelly-o. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p> </section> <section class="post"> <h2 class="post-title">Blog Post Title</h2> <p class="post-excerpt">Ice cream tart powder jelly-o. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p> </section> </div>
这只是个例子，<section>元素也可用于其他用途。
Article元素
从名字上看，它已经很好地解释了自己，但我们仍然需要看看官方文件是如何描述它的：
“在文档、页面、应用程序或网站上的一个独立部分，一般来说，它可以独立分配或重复使用，例如在发布时。这可以是论坛帖子、杂志或新闻、博客项目、用户提交的评论、互动工具或小工具，或任何其他独立项目的内容。”
我们可以从上面的描述中总结出来<article>元素专门用于结构化文章，特别是我们想要发布的，如博客、页面内容或论坛帖子。
如何使用下面的例子<article>构建博客文章。
<article class="post"> <header> <h1>This is Blog Post Title</h1> <div class="post-meta"> <ul> <li class="author">Author Name</li> <li class="categories">Save in Categories</li> </ul> </div> </header> <div class="post-content"> Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps. Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oatnbon. Gummies halvah gummies danish biscuit applicak cake tootsie roll sesame snaps lollipop gingerbread boe gingerbread jelly-o pastry. </div> </article>
此外，<article>元素也可以与section元素结合，必要时可以使用<section>元素将文章分为几段，如下例所示。
<article class="post"> <header> <h1>This is Blog Post Title</h1> <div class="post-meta"> <ul> <li class="author">Author Name</li> <li class="categories">Save in Categories</li> </ul> </div> </header> <div class="post-content"> <section> <h2>This is the Sub-Heading</h2> Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps. Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah gummies danish biscuit applicake gingerbread jelly-o pastry. </section> <section> <h3>This is another Sub-Heading</h3> Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon. Cheesecake gummi bears dragée jujubes dragée dragée brownie jelly biscuit. Powder croissant jelly beans pastry. </section> </div> </article>
总结
HTML5创造的新元素是为了使网络结构更加语义化。如何在网络开发者和设计师之间正确应用这些元素，一切都是绝对的，这取决于你如何对待它。
