HTML5:div、section、article 的區別

標簽 <div>

The <div> element has no special meaning at all.

要點:無語義,最后考慮。

  • 除非沒有合適的標簽可以使用,否則使用 div 會缺乏可讀性。
  • 配合 class、lang、title 等屬性使用(賦予可讀性),標記一塊區域的內容。
    例如進行樣式、視覺的處理。常用的比如使用 div 包含并使用 CSS 對網頁在瀏覽器窗口的位置進行居中,或者給整個網頁設置背景(圖片)。

我更偏向于把 <div> 元素理解為 division

標簽 <section>

The <section> element represents a generic section of a document or application.

要點:有主題性地分組。

  • 內容主題 分組:文章的章回、論文中編號的節、標簽對話框的多個標簽頁等。
    在文章、論文中,對內容進行主題性的分組(通常會包含標題),例如劃分章節。一個簡單的評判標準:這個元素的內容體現在文章大綱 (outline) 中時,用 <section> 是合適的。
    標簽 <section> 也適合在一個標簽式對話框中對各種標簽頁面進行分組。
    當一個標簽只是為了樣式化或者方便腳本使用時,應該使用 <div>

  • 網站頁面中可以用 <section> 把它劃分為網站介紹、主題內容、新聞、聯系信息等部分。
    其實也是對網站的頁面內容按主題分組。

標簽 <article>

可以說,<article> 是一個特殊的 <section>

The <article> element represents an independent item section of content.

要點:可以單獨發布、重用的。

  • 論壇帖子
  • 新聞、雜志的文章
  • 博客文章 例子A
  • 用戶提交的評論 例子B

<article> 還是 <section> ?

閱讀這里的舉例,就能有一個大致的判斷。

參考

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,841評論 25 708
  • 上一篇說道如何通過Dropbox實現移動化寫作,然而我的工作還包括處理Office文檔,作為經常和各廠公關市場打交...
    趙賽坡閱讀 724評論 0 7
  • 最不是天上有,人間自問不可留。 一晌春光醉夢好,一展愁眉不見侯。 再不尋刀光劍氣哪里去,且看我尤住風塵享自由!
    清風嶼上仙閱讀 197評論 0 0
  • 感恩 感謝軟實力家人忠少從南昌來看我們,快要畢業的他給我們分享了很多大學經驗,解決了我們很多困惑,超級超級開心 感...
    劍膽琴心007閱讀 486評論 0 5