剛開始看到標簽的就有些疑惑,覺得為什么有那么多相同用途的標簽,多方查詢資料細細比較之后才發現原來各有千秋,結合自己的想法總結如下:
div在HTML早期版本就支持了,section和article是HTML5提出的兩個語義化標簽。
div
定義:文檔中的分區或節。
使用場合:作為布局以及樣式化時使用(此時三者並無區別,但div更常用)
提示:<div> 是一個塊級元素,瀏覽器通常會在 div 元素前后放置一個換行符。
section
定義:文檔中的節,一般是具有標題性的。
使用場合:文章的章節、標簽對話框中的標簽頁、或者論文中有編號的部分。
提示:section不僅僅是一個普通的容器標簽,這區別與div標簽。一般來說,當元素內容明確地出現在文檔大綱中時,section 就是適用的。
article:
定義:獨立的自包含內容。一般來說,article會有標題部分( 包含在header內 ),有時也會包含footer。
使用場合:一段內容脫離了所在的語境,仍是完整的、獨立的,則應該用article標簽。
提示:雖然section也是帶有主題性的一塊內容,但是無論從結構上還是內容上來說,article本身就是獨立的、完整的。
總結:
(1)div section article ,語義是從無到有,逐漸增強的。
(2)div 無任何語義,僅僅用作樣式化或者腳本化;對於一段主題性的內容,則就適用 section;假如一段主題性內容脫離上下文后仍是完整且獨立存在的一段內容,則就適用 article。