你真的理解HTML5標簽語義化嗎?
作者:陳大魚頭
github:KRISACHAN
標簽分類
在一個?html?文檔中,標簽大致可以分為以下兩個大類:
1.?
:聲明文檔類型;2.?
:限定文檔區(qū)域;
內(nèi)又有以下幾類:
1. head
標簽用于定義文檔的頭部,它是所有頭部元素的容器。描述了文檔的各種屬性和信息,包括文檔的標題、在 Web 中的位置以及和其他文檔的關(guān)系等。head內(nèi)可存放標簽有:
:為頁面上的所有鏈接規(guī)定默認地址或默認目標。:主要用于style文件引入:樣式表區(qū)域:可定義文檔的標題。??標簽是??標簽中唯一要求包含的東西。:提供了有關(guān)當前HTML元素的元信息 (meta-information)
2. body
標簽內(nèi)存放文檔的內(nèi)容。內(nèi)標簽分類有以下11類:
內(nèi)容分區(qū)
文本內(nèi)容
內(nèi)聯(lián)文本語義
圖片和多媒體
內(nèi)嵌內(nèi)容
腳本
編輯標識
表格內(nèi)容
表單
交互元素
Web組件
HTML?標簽語義化
語義化到底重不重要?
我們知道,在HTML中,每個標題是通過標題標簽來定義的,標題標簽一共有6個,分別是:h1~6。例子如下:
我是一級標題
我是二級標題
我是三級標題
我是四級標題
我是五級標題
我是六級標題
如果是連續(xù)的標題,則可以用 來連接:
我是一級標題
我是二級標題
我是三級標題
我是四級標題
我是五級標題
我是六級標題
如果是段落內(nèi)容,則用 :
我是段落內(nèi)容
如果我們要列一個列表則可以用 或 。如果只是要標記項目,我們可以用 ,例子如下:
蘋果
香蕉
奧特曼
橙子
若是標記順序,則用 ,例子如下:
向前走300米
右轉(zhuǎn)
向前走300米
右轉(zhuǎn)
向前走300米
當然我們也可以按需嵌套。
先用蛋白一個、鹽半茶匙及淀粉兩大匙攪拌均勻,調(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)化 — 比起使用非語義化的
標簽,搜索引擎更加重視在“標題、鏈接等”里面的關(guān)鍵字,使用語義化可使網(wǎng)頁更容易被用戶搜索到。
無障礙設(shè)計
在Web開發(fā)無障礙性意味著使盡可能多的人能夠使用Web站點,即使這些人的能力是有限的。這里我們提供關(guān)于開發(fā)易訪問的內(nèi)容的信息。
“無障礙性是最常用于描述設(shè)施或設(shè)施,幫助殘疾人,如“輪椅”。這可以擴展到盲文標識、輪椅坡道,音頻信號在人行橫道,輪廓人行道,網(wǎng)站設(shè)計,等等。"
WAI-ARIA
WAI-ARIA 是一項技術(shù),它可以通過瀏覽器和一些輔助技術(shù)來幫助我們進一步地識別以及實現(xiàn)語義化,這樣一來能幫助我們解決問題,也讓用戶可以了解發(fā)生了什么。
WAI-ARIA 是W3C編寫的規(guī)范,定義了一組可用于其他元素的HTML 特性,用于提供額外的語義化以及改善缺乏的可訪問性。以下是規(guī)范中三個主要的特性:
1.角色(role):這定義了元素是干什么的;
2.屬性:通過定義一些屬性給元素,讓他們具備更多的語義;
3.狀態(tài):用于表達元素當前的條件的特殊屬性。
后記
HTML語義化非常地重要,雖然在組件化開發(fā)的今天,利益沒那么明顯,但是對于后期維護,用戶訪問以及用戶友好度來說都是非常重要的,在某些國家,語義化跟無障礙標準化甚至是衡量一個線上產(chǎn)品能否上線的標準。
