目錄

• 概述
• 什么是語(yǔ)義化
• 標(biāo)題元素
• 按鈕
• 非語(yǔ)義化元素
• 總結(jié)

概述

做前端開(kāi)發(fā)的同學(xué)都知道，一個(gè)網(wǎng)頁(yè)的基本組成部分是 HTML，JavaScript 和 CSS。開(kāi)發(fā)人員通常更關(guān)注 JavaScript 和 CSS ，實(shí)踐著各種語(yǔ)言規(guī)范和設(shè)計(jì)模式。對(duì)于 HTML 的關(guān)注度則明顯偏少，只要能做出設(shè)計(jì)師畫(huà)的界面就萬(wàn)事大吉了，不怎么去關(guān)心 HTML 是不是規(guī)范合理。于是下面的情況隨處可見(jiàn)：

• 按鈕用的是可點(diǎn)擊的<div>而不是<button> 元素
• 標(biāo)題用的是 <div>而不是標(biāo)題元素 (<h1>，<h2> 等等)
• <input>相應(yīng)的文本標(biāo)簽用的是<div> 而不是<label>
• 輸入框也用綁定了鍵盤(pán)事件的<div>，而不是<input>

看到?jīng)]？一招<div> 走天下！這樣有沒(méi)有問(wèn)題？好像也沒(méi)什么大問(wèn)題，畢竟頁(yè)面看起來(lái)符合設(shè)計(jì)，也能正常交互。但是你想過(guò)沒(méi)有，如果<div>能解決一切，為什么還需要其余幾十上百種標(biāo)簽?zāi)兀窟@就要說(shuō)到 HTML 的語(yǔ)義化了。

什么是語(yǔ)義化

語(yǔ)義化就是說(shuō)，HTML 元素具有相應(yīng)的含義。它用于描述元素的內(nèi)容或者跟其他元素的關(guān)系。在 HTML 里，除了<div>和<span>，基本上都是語(yǔ)義化的元素。

標(biāo)簽名的表義程度也是不一樣的，比如<section>比<article>對(duì)內(nèi)容的描述就更模糊。<section>也是語(yǔ)義化的，因?yàn)樗砻鲀?nèi)容應(yīng)該從屬于一個(gè)組。而<article>不僅表示它的內(nèi)容從屬于一個(gè)組，還是一篇文章。

為了進(jìn)一步說(shuō)明語(yǔ)義化的重要性，下面用標(biāo)題和按鈕元素來(lái)舉例。

標(biāo)題元素

<h1>是頁(yè)面的標(biāo)題，加上下方的<h2> 就形成了頁(yè)面的層級(jí)結(jié)構(gòu)。

<!-- h1, 一級(jí)標(biāo)題 --><h1>當(dāng)你的 HTML 里全是 div，那你就要小心了</h1><!-- h2，二級(jí)標(biāo)題 --><h2>什么是語(yǔ)義化</h2><!-- h3，三級(jí)標(biāo)題--><h3>標(biāo)題元素</h3>

在很多富文本編輯器中，使用合適的標(biāo)題結(jié)構(gòu)，可以自動(dòng)生成內(nèi)容目錄。比如本文的目錄結(jié)構(gòu)就是這樣：

可以看到，HTML 本身就傳達(dá)了整篇文章的結(jié)構(gòu)信息。相反，如果全部都用<div>，就變成這樣了：

• <div>: 當(dāng)你的 HTML 里全是 div，那你就要小心了
• <div>: 什么是語(yǔ)義化
• <div>: 標(biāo)題元素
• <div>: 按鈕
• <div>: 非語(yǔ)義化元素
• <div>: 總結(jié)

由于<div>不附帶任何含義，因此它就是扁平的結(jié)構(gòu)。只要使用正確的 HTML，DOM 就會(huì)變得清晰和結(jié)構(gòu)化。

按鈕

按鈕的作用是提交表單或者改變某個(gè)元素的狀態(tài)。從定義上看，按鈕具備以下特征：

• 可獲得焦點(diǎn)
• 可通過(guò)敲擊空格鍵或者回車鍵激活
• 可通過(guò)鼠標(biāo)點(diǎn)擊激活

當(dāng)你用<div>綁定點(diǎn)擊事件來(lái)模擬按鈕時(shí)，你就沒(méi)辦法用上<button>天然自帶的那些語(yǔ)義化的交互特征。你還需要手動(dòng)實(shí)現(xiàn)這些功能：

• focus 狀態(tài)
• 鍵盤(pán)交互
• 鼠標(biāo)交互

不止如此，當(dāng)屏幕閱讀器碰到<button>提交</button>這個(gè)元素，它會(huì)識(shí)別出語(yǔ)義，告訴用戶這是個(gè)提交按鈕。如果只是個(gè)<div>，閱讀器就不會(huì)認(rèn)為它是個(gè)按鈕。

當(dāng)我們使用語(yǔ)義化的 HTML 元素后，就給內(nèi)容賦予了含義，內(nèi)容也就有了生命。

非語(yǔ)義化元素

前面提到過(guò)，<div>和<span>是非語(yǔ)義化元素。<div>沒(méi)有給內(nèi)容附加任何含義，它只是個(gè)<div>。當(dāng)然，這么說(shuō)也不完全準(zhǔn)確，因?yàn)?lt;div>和<span>之間還是有一點(diǎn)點(diǎn)區(qū)別的：

• <div>是塊級(jí)元素
• <span>是行內(nèi)元素，應(yīng)該放在其他元素里面，比如<p><span>I</span>nline elements</p>

如果實(shí)在找不到對(duì)應(yīng)的 HTML 元素來(lái)表示內(nèi)容，那就可以用<div>或者<span>。既然設(shè)計(jì)了<div>和<span>，自然有它們的用武之地。畢竟，并不是每一個(gè) HTML 元素都需要額外的語(yǔ)義。

總體原則是，盡量?jī)?yōu)先使用對(duì)應(yīng)的語(yǔ)義化元素表示內(nèi)容。退而求其次，使用含義沒(méi)那么明確的標(biāo)簽。最后才考慮用<div>和<span>。

總結(jié)

雖然使用語(yǔ)義化的 HTML 元素并不會(huì)給你的項(xiàng)目帶來(lái)明顯的收益，但我還是建議你這么做。至少，語(yǔ)義化的 HTML 頁(yè)面能帶來(lái)更好的 SEO 排名、對(duì)屏幕閱讀器更友好、代碼可讀性更高。如果你是個(gè)有追求的 Coder，相信你會(huì)認(rèn)同我的看法。

以上就是不要在HTML中濫用div的詳細(xì)內(nèi)容，更多關(guān)于不要在HTML中濫用div的資料請(qǐng)關(guān)注其它相關(guān)文章！