你真的理解HTML5標(biāo)簽語義化嗎?
作者:陳大魚頭
github:KRISACHAN
標(biāo)簽分類
在一個?html?文檔中,標(biāo)簽大致可以分為以下兩個大類:
1.?
:聲明文檔類型;2.?
:限定文檔區(qū)域;
內(nèi)又有以下幾類:
1. head
標(biāo)簽用于定義文檔的頭部,它是所有頭部元素的容器。描述了文檔的各種屬性和信息,包括文檔的標(biāo)題、在 Web 中的位置以及和其他文檔的關(guān)系等。head內(nèi)可存放標(biāo)簽有:
:為頁面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)。:主要用于style文件引入:樣式表區(qū)域:可定義文檔的標(biāo)題。??標(biāo)簽是??標(biāo)簽中唯一要求包含的東西。:提供了有關(guān)當(dāng)前HTML元素的元信息 (meta-information)
2. body
標(biāo)簽內(nèi)存放文檔的內(nèi)容。內(nèi)標(biāo)簽分類有以下11類:
內(nèi)容分區(qū)
文本內(nèi)容
內(nèi)聯(lián)文本語義
圖片和多媒體
內(nèi)嵌內(nèi)容
腳本
編輯標(biāo)識
表格內(nèi)容
表單
交互元素
Web組件
HTML?標(biāo)簽語義化
語義化到底重不重要?
我們知道,在HTML中,每個標(biāo)題是通過標(biāo)題標(biāo)簽來定義的,標(biāo)題標(biāo)簽一共有6個,分別是:h1~6。例子如下:
我是一級標(biāo)題
我是二級標(biāo)題
我是三級標(biāo)題
我是四級標(biāo)題
我是五級標(biāo)題
我是六級標(biāo)題
如果是連續(xù)的標(biāo)題,則可以用 來連接:
我是一級標(biāo)題
我是二級標(biāo)題
我是三級標(biāo)題
我是四級標(biāo)題
我是五級標(biāo)題
我是六級標(biāo)題
如果是段落內(nèi)容,則用 :
我是段落內(nèi)容
如果我們要列一個列表則可以用 或 。如果只是要標(biāo)記項目,我們可以用 ,例子如下:
蘋果
香蕉
奧特曼
橙子
若是標(biāo)記順序,則用 ,例子如下:
向前走300米
右轉(zhuǎn)
向前走300米
右轉(zhuǎn)
向前走300米
當(dāng)然我們也可以按需嵌套。
先用蛋白一個、鹽半茶匙及淀粉兩大匙攪拌均勻,調(diào)成“腌料”,雞胸肉切成約一厘米見方的碎丁并用“腌料”攪拌均勻,腌漬半小時。
用醬油一大匙、淀粉水一大匙、糖半茶匙、鹽四分之一茶匙、白醋一茶匙、蒜末半茶匙調(diào)拌均勻,調(diào)成“綜合調(diào)味料”。
雞丁腌好以后,色拉油下鍋燒熱,先將雞丁倒入鍋內(nèi),用大火快炸半分鐘,炸到變色之后,撈出來瀝干油汁備用。
在鍋里留下約兩大匙油,燒熱后將切好的干辣椒下鍋,用小火炒香后,再放入花椒粒和蔥段一起爆香。隨后雞丁重新下鍋,用大火快炒片刻后,再倒入“綜合調(diào)味料”繼續(xù)快炒。
如果你采用正宗川菜做法,最后只需加入花生米,炒拌幾下就可以起鍋了。
如果你在北方,可加入黃瓜丁、胡蘿卜丁和花生米,翻炒后起鍋。
在我們平常說話的時候,為了突出重點,我們往往會強調(diào)某些詞,就如如下的例子:
我非常喜歡加班
如果是重音強調(diào),則:
魚頭,明天別遲到了
如果你在項目的一開始就使用HTML語義化,不僅不會花更多的時間,而且又有以下的可訪問性優(yōu)點:
1.更便于開發(fā) — 如上所述,你可以使HTML更易于理解,并且可以毫不費力的獲得一些功能。
2.更適配移動端 — 語義化的HTML文件比非語義化的HTML文件更加輕便,并且更易于響應(yīng)式開發(fā)。
3.更便于SEO優(yōu)化 — 比起使用非語義化的
標(biāo)簽,搜索引擎更加重視在“標(biāo)題、鏈接等”里面的關(guān)鍵字,使用語義化可使網(wǎng)頁更容易被用戶搜索到。
無障礙設(shè)計
在Web開發(fā)無障礙性意味著使盡可能多的人能夠使用Web站點,即使這些人的能力是有限的。這里我們提供關(guān)于開發(fā)易訪問的內(nèi)容的信息。
“無障礙性是最常用于描述設(shè)施或設(shè)施,幫助殘疾人,如“輪椅”。這可以擴(kuò)展到盲文標(biāo)識、輪椅坡道,音頻信號在人行橫道,輪廓人行道,網(wǎng)站設(shè)計,等等。"
WAI-ARIA
WAI-ARIA 是一項技術(shù),它可以通過瀏覽器和一些輔助技術(shù)來幫助我們進(jìn)一步地識別以及實現(xiàn)語義化,這樣一來能幫助我們解決問題,也讓用戶可以了解發(fā)生了什么。
WAI-ARIA 是W3C編寫的規(guī)范,定義了一組可用于其他元素的HTML 特性,用于提供額外的語義化以及改善缺乏的可訪問性。以下是規(guī)范中三個主要的特性:
1.角色(role):這定義了元素是干什么的;
2.屬性:通過定義一些屬性給元素,讓他們具備更多的語義;
3.狀態(tài):用于表達(dá)元素當(dāng)前的條件的特殊屬性。
后記
HTML語義化非常地重要,雖然在組件化開發(fā)的今天,利益沒那么明顯,但是對于后期維護(hù),用戶訪問以及用戶友好度來說都是非常重要的,在某些國家,語義化跟無障礙標(biāo)準(zhǔn)化甚至是衡量一個線上產(chǎn)品能否上線的標(biāo)準(zhǔn)。
