HTML5之語義標(biāo)簽介紹

在HTML5標(biāo)準(zhǔn)中,新加了幾個用于增添頁面語義的標(biāo)簽,這些標(biāo)簽有:article、section、nav和aside等。與別的大多數(shù)標(biāo)簽不 同,瀏覽器在解釋渲染這些標(biāo)簽的時候僅僅把它作為普通的div塊級元素來處理,不會添加任何額外的展現(xiàn)邏輯;也即,這些標(biāo)簽僅用于增添語義。對于Web開 發(fā)人員而言,使用這些標(biāo)簽的實(shí)際意義主要有2點(diǎn):搜索引擎優(yōu)化,以及增加頁面的可用性(accessibility)。
在元素分類上,article、section、nav和aside稱之為“Sectioning Content”
article
article元素可用于表示頁面上某塊具有一定獨(dú)立性的內(nèi)容,這個內(nèi)容可以是一篇文章、論壇上的一個帖子/評論、一篇博客、一個可交互的控件 等。article標(biāo)簽可以嵌套使用,當(dāng)這么做時,子article元素與父article元素在邏輯上必須有相應(yīng)的關(guān)聯(lián)。如Web開發(fā)者可以將一篇博客 的正文以及評論作為父級article元素,而將其中的各個評論作為子article元素。
article元素內(nèi)部不能出現(xiàn)main元素 — main元素意指頁面的主要內(nèi)容,當(dāng)有main元素時,article元素作為main元素的子元素而存在。
section
section元素意指頁面或Web應(yīng)用中的一部分,不同的section互相之間其“主題”或者說“基調(diào)”應(yīng)當(dāng)有所不同,一般會通過在section元素內(nèi)放置heading元素(h1-h6)來定義這個“主題”/“基調(diào)”。
把section當(dāng)成div使用是一種錯誤 — 除了頁面可展現(xiàn)的內(nèi)容,section的子元素不應(yīng)該承擔(dān)任何其它角色(樣式、行為、輔助標(biāo)簽等)。
nav
nav元素主要用于包含頁面上的導(dǎo)航鏈接,因此在nav元素中直接包含ul元素或者ol元素是一種非常常見的做法。盡管如此,nav中也可以不包含ul或者ol元素,比如在nav元素中可以包含一個文章段落(p標(biāo)簽),而在該文章段落中包含一些鏈接(a標(biāo)簽)。
與article元素一樣,nav元素內(nèi)部不能出現(xiàn)main元素。
aside
aside元素一般用于表示頁面上的側(cè)邊欄,不過該元素僅僅只在語義上表示“側(cè)邊欄”,瀏覽器在解析渲染該標(biāo)簽時只會將其作為普通的div塊級元素來處理。如果要真正得到側(cè)邊欄的效果,則Web開發(fā)人員需要自己編寫CSS來實(shí)現(xiàn)。
以上這篇HTML5之語義標(biāo)簽介紹就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
原文地址:http://www.cnblogs.com/krolong/archive/2016/07/07/5648710.html
相關(guān)文章
- 下面小編就為大家?guī)硪黄獪\談html5標(biāo)簽css3的常用樣式。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-20
html5中的一些標(biāo)簽學(xué)習(xí)(心得)
下面小編就為大家?guī)硪黄猦tml5中的一些標(biāo)簽學(xué)習(xí)(心得)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-18- HTML5現(xiàn)在已經(jīng)不是SGML的子集,主要是增加了關(guān)于圖像,位置,存儲,多任務(wù)等功能。接下來通過本文對這些功能簡要概述下,感興趣的朋友參考下吧2016-09-05
淺談Html5中視頻 音頻標(biāo)簽 進(jìn)度條的問題
下面小編就為大家?guī)硪黄獪\談Html5中視頻 音頻標(biāo)簽 進(jìn)度條的問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-26HTML5進(jìn)階段內(nèi)聯(lián)標(biāo)簽匯總(小篇)
這篇文章主要介紹了HTML5進(jìn)階段內(nèi)聯(lián)標(biāo)簽匯總(小篇)的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-13關(guān)于HTML5語義標(biāo)簽的實(shí)踐(blog頁面)
下面小編就為大家?guī)硪黄P(guān)于HTML5語義標(biāo)簽的實(shí)踐(blog頁面)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-12html5基于canvas實(shí)現(xiàn)的文字標(biāo)簽云3D旋轉(zhuǎn)動畫特效源碼
這是一款html5基于canvas實(shí)現(xiàn)的文字標(biāo)簽云3D旋轉(zhuǎn)動畫特效源碼。鼠標(biāo)滑過文字呈現(xiàn)框選效果,拖動文字可呈現(xiàn)出標(biāo)簽云的3D動畫旋轉(zhuǎn)效果。2016-07-07- 下面小編就為大家?guī)硪黄狧TML5不支持標(biāo)簽和新增標(biāo)簽詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-27
- header標(biāo)簽不同于我們最熟悉的head標(biāo)簽,header往往更常被用于定義文章的頭部,下面我們就來淺析HTML5中header標(biāo)簽的用法:2016-06-24
- 這篇文章主要介紹了常用的HTML5列表標(biāo)簽的相關(guān)資料,需要的朋友可以參考下2017-06-20