互聯網開(kāi)發&品牌全案設計(jì)

12年(nián) 實戰經驗,品質服務

前端工(gōng)程師(shī)如(rú)何有(yǒu)效避免常見(jiàn)6種HTML5錯(cuò)誤用(yòng)法

2018-03-08 關鍵詞: 2414

一(yī)、不(bù)要(yào)使用(yòng)section作(zuò)為(wèi)div的(de)替代品
人(rén)們在标簽使用(yòng)中最常見(jiàn)到(dào)的(de)錯(cuò)誤之一(yī)就(jiù)是(shì)随意将H×TML5的(de)人(rén)們在标簽使用(yòng)中最常見(jiàn)到(dào)的(de)錯(cuò)誤之一(yī)就(jiù)是(±shì)随意将HTML5的(de)“section”等價于“div”——具體(tǐ)地(dì)說(sh​uō),就(jiù)是(shì)直接用(yòng)作(zuò)替代品(用(yòng)于樣式)。下(xià)面蘇州網站(zhàn)建設≠給大(dà)家(jiā)列舉常見(jiàn)6種HTML5錯(cuò)誤用(yòng)法。
在XHTML或者HTML4中,我們常看(kàn)到(dào)這(zhè)樣的(de)代碼:
而現(xiàn)在在HTML5中,會(huì)是(shì)這(zhè)樣:
這(zhè)樣使用(yòng)并不(bù)正确:
并不(bù)是(shì)樣式容器(qì)。section元素表示的(de)是(shì)內(nèi)容中用(yòng)來(lái)幫助>構建文(wén)檔概要(yào)的(de)語義部分(fēn)。它應該包含一(yī)個(gè)頭部。如(rú)果你(nǐ)想找一(yī)個(gè)♠用(yòng)作(zuò)頁面容器(qì)的(de)元素(就(jiù)像HTML或者XHTML的(de)風(fēng)格),✘那(nà)麽考慮如(rú)Kroc Camen所說(shuō),直接把樣式寫到(dào)body元素上(shàng)吧(ba)。如(rú)果你(nǐ)仍然需要 (yào)額外(wài)的(de)樣式容器(qì),還(hái)是(shì)繼續使用(yòng)div吧(ba)。
基于上(shàng)述思想,下(xià)面才是(shì)正确的(de)使用(yòng)HTML5和(hé)一(yī)些(xiē)ARIA• roles特性的(de)例子(zǐ)(注意,根據你(nǐ)自(zì)己的(de)設計(jì),你(nǐ)也(yě)可(kě)能(n∑éng)需要(yào)加入div)
二、隻在需要(yào)的(de)時(shí)候使用(yòng)header和(hé)hgroup
寫不(bù)需要(yào)寫的(de)标簽當然是(shì)毫無意義的(de)。不(bù)幸的(de)是(shì),我經常看(kàn)到(dào)header和(hé)hgroup被無意義的(d$e)濫用(yòng)。下(xià)面蘇州網站(zhàn)建設簡單總結如(rú)下(xià):
header元素表示的(de)是(shì)一(yī)組介紹性或者導航性質的(de)輔助文(wén)字,€經常用(yòng)作(zuò)section的(de)頭部
當頭部有(yǒu)多(duō)層結構時(shí),比如(rú)有(yǒu)子(zǐ)頭部,副标題,各種标識文(wén)字等,使用(yòng)hgroup将h1-h6元素組合起來(lái)作(z uò)為(wèi)section的(de)頭部
header的(de)濫用(yòng)
由于header可(kě)以在一(yī)個(gè)文(wén)檔中使用(yòng)多(duō)次,可(kě)>能(néng)使得(de)這(zhè)樣代碼風(fēng)格受到(dào)歡迎:
如(rú)果你(nǐ)的(de)header元素隻包含一(yī)個(gè)頭部元素,那(nà)麽丢棄header元素吧(ba)。既然article 元素已經保證了(le)頭部會(huì)出現(xiàn)在文(wén)檔概要(yào)中,而header又(yòu)不π(bù)能(néng)包含多(duō)個(gè)元素(如(rú)上(shàng)文(wén)所定義的(de)),那(nà)麽為(wèi)什(s$hén)麽要(yào)寫多(duō)餘的(de)代碼。簡單點寫成這(zhè)樣就(jiù)行(xíng)了(le):
hgroup的(de)錯(cuò)誤使用(yòng)在headers這(zhè)個(gè)主題上(shàng),我也(yě✔)經常看(kàn)到(dào)hgroup的(de)錯(cuò)誤使用(yòng)。有(yǒu)時(shí)候不(bù)應該σ同時(shí)使用(yòng)hgroup和(hé)header:如(rú)果隻有(yǒu)一(yī)個(gè)子(zǐ)頭部,如(rú)果hgroup自(zì)己就(jσiù)能(néng)工(gōng)作(zuò)的(de)很(hěn)好(hǎo)第一(yī)個(gè)問(wèn)題一(yī)般是(shì)這(zh♦è)樣的(de):
此例中,直接拿(ná)掉hgroup,讓heading果奔吧(ba)。

三、不(bù)要(yào)把所有(yǒu)列表式的(de)鏈接放(fàng)在nav裡(lǐ)
我們在構造語義化(huà)和(hé)結構化(huà)的(de)标簽時(shí)的(de)選擇也(yě)變得(de)有(yǒu)些(xiē)不(bù)慎重。也(yě)就(jiù)≤是(shì)說(shuō),我們不(bù)應該濫用(yòng)超語義化(huà)的(de)元素。不(bù)幸的(de)是(shì),nav¶就(jiù)是(shì)這(zhè)樣一(yī)個(gè)被濫用(yòng)的(de)例子(zǐ)。nav元素的(de)規範描述如(rú)下(xià):
nav元素表示頁面中鏈接到(dào)其他(tā)頁面或者本頁面其他(tā)部分(fēn)的(de)區(qū)塊;包含導航連接的(≥de)區(qū)塊。
注意:不(bù)是(shì)所有(yǒu)頁面上(shàng)的(de)鏈接都(dōu)需要(yào)放(fàng)在nav元素中——這(zσhè)個(gè)元素本意是(shì)用(yòng)作(zuò)主要(yào)的(de)導航區(qū)塊。舉個(gè)具體(tǐ)的(de)例子(zǐ),在∞footer中經常會(huì)有(yǒu)衆多(duō)的(de)鏈接,比如(rú)服 務條款,主頁,版權聲明(míΩng)頁等等。footer元素自(zì)身(shēn)已經足以應付這(zhè)些(xiē)情況,雖然nav元素也(yě)可(kě)以用(yòng)在這ε(zhè)裡(lǐ),但(dàn)通(tōng)常我們認為(wèi)是(shì)不(bù)必要(yào )的(de)。
關鍵的(de)詞語是(shì)“主要(yào)的(de)”導航。當然我們可(kě)以互相(xiàng)噴上(shàng)一(yī)整天什(shén)麽叫做(zuò)“主要(yào)的(de )”。而蘇州網站(zhàn)制(zhì)作(zuò)小(xiǎo)編是(shì)這(zhè)樣定義的(de):主要(yào)的(de)導航、站(zhàn)內(nèi)搜索、二級導​航(略有(yǒu)争議(yì))、頁面內(nèi)導航(比如(rú)很(hěn)長(cháng)的(de)文(wén)章(zhāng)),既然并沒有(yǒu)絕對(duì)的(de)×對(duì)錯(cuò),所以根據一(yī)個(gè)非正式投票(piào)以及我自(zì)己的(de)解 釋,以下(xià)的(de)情況,不(bù)管你(nǐ)放(fàng)不(bù)放(fàng),我反正不(bù)放(fàng)在nva中:分(fēn)頁控制(z‍hì)、社交鏈接(雖然有(yǒu)些(xiē)社交鏈接也(yě)是(shì)主要(yào)導航,比如(rú)“關于”“收藏”)、博客文(wén) 章(zhāng)的(de)标簽、博客文(wén)章(zhāng)的(de)分(fēn)類、三級導航、過長(cháng)的(de)footer
欄目 案例 售後 電(diàn)話(huà)