您的位置:首页> 实例代码> HTML实例

<section>与<article> 区别

2019-7-31 11:46| 作者: admin| 查看: 2157| 评论: 0|来自: 蚂蚁部落

<section>与<article>都是为更为精确语义化布局而生,两者相同之处。

自然也有不同点,否则创建两个标签就多此一举了,下面详细做一下介绍。

一.两者关系阐述:

(1).article:翻译成汉语具有"文章"的意思。

(2).section:翻译成汉语局域"章"或者"节"的意思。

如果说<article>标签是一篇文章的话,那么<section>标签就是其中的一个段落或者一个小章节。

当然你不能因此说,<article>与<section>两者是从属关系,它们两个是可以相互嵌套的。

两个标签的异同点简单总结如下:

(1).<article>是一种特殊的<section>,用<article>都可以用<section>。

(2).<article>强调整体性与独立性,语义更加明确。

(3).<section>强调的是对整体内容进行划分区域,独立性和语义明确性比<article>差。

特别说明:两标签都是为页面布局语义化更强,在表现上并没有任何特殊之处,和一个普通div相同。

二.代码片段:

下面通过一段简单的代码片段对两者的区别进行一下分析。

[HTML] 纯文本查看 复制代码
<article>
  <header>
    <h1>HTML语义化布局</h1>
    <p>发布时间:<time datetime="2019-8-1">2019/08/01</time></p>
  </header>
  <p>文章内容</p>
  <section>
    <h2>评论</h2>
    <article>
      <header>
        <h3>评论者: 蚂蚁部落</h3>
        <p><time datetime="2019-8-1">一分钟前</time></p>
      </header>
      <p>评论内容</p>
     </article>
  </section>
</article>

上述代码有两个标签的应用,分析如下:

(1).总体上市一篇文章,很明显具有很好的独立性,所以最外层用<article>包裹比较恰当。

(2).文章的评论属于文章的一个一部分或者一个功能分区,所以使用<section>包裹。

(3).文章评论的单独一条可以看做一个独立的整体,所以使用<article>更为恰当。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部