在HTML中， <article> 元素表示网站中的独立结构，其意在成为可独立分配的或可复用的结构，例如文章、组件、评论区等等，也就是说：每一个 <article> 元素都是完整且独立的。

例如：

<article class="forecast">
    <h1>Weather forecast for Seattle</h1>
    <article class="day-forecast">
        <h2>03 March 2018</h2>
        <p>Rain.</p>
    </article>
    <article class="day-forecast">
        <h2>04 March 2018</h2>
        <p>Periods of rain.</p>
    </article>
    <article class="day-forecast">
        <h2>05 March 2018</h2>
        <p>Heavy rain.</p>
    </article>
</article>

这是一个表示天气的组件，组件本身是独立的，组件中每条天气信息也是相对独立的，展现效果如下：

如果内容较多， <article> 元素也可以划分结构，通常有它自己的标题（一般放在一个 <header> 元素里面），有时还有自己的脚注。

<article class="user_review">
    <header>
        <h2>Jurassic Park</h2>
    </header>
    <section class="main_review">
        <p>Dinos were great!</p>
    </section>
    <footer>
        <p>Posted on<time datetime="2015-05-16 19:00">May 16</time>by Lisa.</p>
    </footer>
</article>

再来看一下 <section> 元素：

<section> 是一个分节元素，表示父元素中的一部分，比如文章的某个主题、文档的某个区块。

在上面的例子中， <section> 元素用来表示 <article> 元素的一部分；在下面的例子中，使用 <section> 元素来划分文章中每一个主题部分：

<article>
    <h1>Choosing an Apple</h1>
    <section>
        <h2>Introduction</h2>
        <p>This document provides a guide to help with the important task of choosing the correct Apple.</p>
    </section>
    <section>
        <h2>Criteria</h2>
        <p>There are many different criteria to be considered when choosing an Apple — size, color, firmness, sweetness, tartness...</p>
    </section>
</article>

总结：表示和父元素完全独立的块用 <article> ，表示属于父元素一部分的块用 <section> 。