article标签和section标签的区别

在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>