Section 和 Article，如何选择？有什么区别？

Question

html5 的出现，让前端人员眼前一亮，大喊方便的同时，也空前重视标签使用的语义化，人们恨不得一下就去改变由div+css所带来满眼的div。新增的结构性标签有很多，比如 header、nav、footer、aside、section、article 等。

区别

但有个问题令不少人犯难，前面的几个都还比较好理解，后面两个到底是什么意思呢，如果按照直译过来的意思。section：“部分”，article：“文章”。这显然无法很好的去区分，为什么呢，因为“部分”这个词儿，意思太模糊，“文章”里面也可以有“部分”，“部分”里面也可以有“文章”。权威指南里是这么进行说明的。

• article：代表文档、页面或应用程序中独立的、完整的、可以独自被外界引用的内容。
• section：用于对网站或应用程序中页面上的内容进行分块。

大家注意两个字眼就可以较好去区分它们的用法：“独立、完整”和“分块”。 在实际应用中，的确像上面所说它们俩可以互相包含，但这并不代表是可以替换，完全是两个概念。还是举例子看的更直观。

 <article>
  <header>
    <h1>苹果</h1>
  </header>
  <p>苹果是一种很好的水果。</p>
  <section>
    <h2>评论</h2>
    <article>
      <header>
        <h3>发表者：张三</h3>
      </header>
      <p>苹果好吃</p>
    </article>
    <article>
      <header>
        <h3>发表者：李四</h3>
      </header>
      <p>苹果对身体好</p>
    </article>
  </section>
</article>

这里是个简单的示例，首先，这里有一段话是描述苹果的，下面的评论也是关于这篇文章，整个是一体的，此所谓“独立，完整”，而section在这里负责的是评论区这一块儿，把评论这个区块儿给分了出来，跟上面的标题和正文做个区分。

那或许有人又要问了，上面说的是挺合理的，那下面的评论区，怎么还用到了 article 呢？就那么一小块儿，这里就要消除一个可能走进的误区了，标签不是按内容的多少和看起来占的块儿大小来分的，语义的意思是，它代表着什么，要表示的是什么，而评论区里用article，是因为，李四所发表的评论，跟张三毫无关联，互不影响，它们是独立的，完整的。

可以再来看一个例子

<article>
  <h1>苹果</h1>
  <section>
    <h2>红富士</h2>
    <p> 红富士是从普通的富士选育出的着色系富的统称 </p>
  </section>
  <section>
    <h2>国光</h2>
    <p> 又名小国光、万寿 </p>
  </section>
</article>

注意

在这个例子中，section 并没有用来区分文章主体和其他，而是用来对文章进行段落划分，大家可能也注意到，里面是包含了一个标题和一段文字。下面说注意事项。

说了这么多，大家可能还是觉得二者区别不大，其实，article 这个标签，可以看做是 section 的特殊种类，它同样是分出了一个部分，不同的是这部分的 独立性。

Section 使用的几点禁忌：

1. 不要将它作为设置样式的页面容器，那个是div要做的事。
2. 如果其他的元素，比如 article、aside、nav 等更合适，就不要用 section。
3. 不要为没有标题的内容区块使用section。（上面代码处有提过哦~）

好了，关于这兄弟俩的用法问题就先说到这儿了，希望对你有所帮助。欢迎交流。