首頁 > web前端 > H5教程 > HTML5之語意標籤介紹

HTML5之語意標籤介紹

黄舟
發布: 2017-02-20 13:50:27
原創
1634 人瀏覽過

在HTML5標準中,新加了幾個用於增加頁面語義的標籤,這些標籤有:article、section、nav和aside等。與別的大多數標籤不 同,瀏覽器在解釋渲染這些標籤的時候僅僅把它作為普通的p塊級元素來處理,不會添加任何額外的展現邏輯;也即,這些標籤僅用於增添語義。對於Web開 發人員而言,使用這些標籤的實際意義主要有2點:搜尋引擎優化,以及增加頁面的可用性(accessibility)。

在元素分類上,article、section、nav和aside稱之為「Sectioning Content」

article

article元素可用來表示頁面上某塊具有一定獨立性的內容,這個內容可以是一篇文章、論壇上的一個貼文/評論、一篇部落格、一個可互動的控制項等。 article標籤可以嵌套使用,當這麼做時,子article元素與父article元素在邏輯上必須有對應的關聯。如Web開發者可以將一篇部落格 的正文以及評論作為父級article元素,而將其中的各個評論作為子article元素。

article元素內部不能出現main元素 — main元素意指頁面的主要內容,當有main元素時,article元素作為main元素的子元素而存在。

section*​​&*
section元素意指頁面或Web應用中的一部分,不同的section互相之間其「主題」或說「基調」應有所不同,一般會透過在section元素內放置heading元素(h1-h6)來定義這個「主題」/「基調」。

把section當成p使用是一種錯誤 — 除了頁面可展現的內容,section的子元素不應該承擔任何其它角色(樣式、行為、輔助標籤等)。


nav
nav元素主要用於包含頁面上的導航鏈接,因此在nav元素中直接包含ul元素或ol元素是一種非常常見的做法。儘管如此,nav中也可以不包含ul或ol元素,例如在nav元素中可以包含一個文章段落(p標籤),而在該文章段落中包含一些連結(a標籤)。

與article元素一樣,nav元素內部不能出現main元素。


aside
aside元素一般用於表示頁面上的側邊欄,不過該元素僅只在語義上表示“側邊欄”,瀏覽器在解析渲染該標籤時只會將其作為普通的p塊級元素來處理。如果要真正得到側邊欄的效果,則Web開發人員需要自己編寫CSS來實現。

以上這篇HTML5之語意標籤介紹就是小編分享給大家的全部內容了,更多相關內容請關注PHP中文網(www.php.cn)! 

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板