<section>與<article> 區別

2019-7-31 11:46| 作者: admin| 查看: 572| 評論: 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>更為恰當。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
大圣捕鱼2 秒速时时开奖走势 抢庄牌九网站 牌九至尊下载链接 麻将技巧 重庆时时彩 百人棋牌 时时彩代理招商平台 双人麻将 新时时彩下载 双色球电子投注单怎么用 北京pk赛车开结果 福彩绝杀六码走势图 加拿大28计划软件免费版 稳赚的项目 幸运快三计划是真的吗 ct娱乐老板wkb是谁