WEB前端

html section article 作用是什么有啥区别?

位置:首页 > WEB前端 > html教程,2019-08-08 22:39
与都是为更为精确语义化布局而生,两者相同之处。自然也有不同点,否则创建两个标签就多此一举了,下面详细
<section>与<article>都是为更为精确语义化布局而生,两者相同之处。
自然也有不同点,否则创建两个标签就多此一举了,下面详细做一下介绍。
一.两者关系阐述:
(1).article:翻译成汉语具有"文章"的意思。
(2).section:翻译成汉语局域"章"或者"节"的意思。
如果说<article>标签是一篇文章的话,那么<section>标签就是其中的一个段落或者一个小章节。
当然你不能因此说,<article>与<section>两者是从属关系,它们两个是可以相互嵌套的。
两个标签的异同点简单总结如下:
(1).<article>是一种特殊的<section>,用<article>都可以用<section>。
(2).<article>强调整体性与独立性,语义更加明确。
(3).<section>强调的是对整体内容进行划分区域,独立性和语义明确性比<article>差。
特别说明:两标签都是为页面布局语义化更强,在表现上并没有任何特殊之处,和一个普通div相同。
二.代码片段:
下面通过一段简单的代码片段对两者的区别进行一下分析。
<article>
  <header>
    <h1>HTML语义化布局</h1>
    <p>发布时间:<time datetime="2019-8-8">2019/08/08</time></p>
  </header>
  <p>文章内容</p>
  <section>
    <h2>评论</h2>
    <article>
      <header>
        <h3>评论者: ab蓝学网</h3>
        <p><time datetime="2019-8-8">一分钟前</time></p>
      </header>
      <p>评论内容</p>
     </article>
  </section>
</article>

上述代码有两个标签的应用,分析如下:
(1).总体上市一篇文章,很明显具有很好的独立性,所以最外层用<article>包裹比较恰当。
(2).文章的评论属于文章的一个一部分或者一个功能分区,所以使用<section>包裹。
(3).文章评论的单独一条可以看做一个独立的整体,所以使用<article>更为恰当。

TAGS:section article区别

猜你喜欢

NewHot