做前端開發(fā)的同學(xué)都知道篮绰，一個網(wǎng)頁的基本組成部分是 HTML后雷，JavaScript 和 CSS。開發(fā)人員通常更關(guān)注 JavaScript 和 CSS 吠各，實踐著各種語言規(guī)范和設(shè)計模式臀突。對于 HTML 的關(guān)注度則明顯偏少，只要能做出設(shè)計師畫的界面就萬事大吉了走孽，不怎么去關(guān)心 HTML 是不是規(guī)范合理惧辈。于是下面的情況隨處可見：
- 按鈕用的是可點擊的
<div>而不是<button>元素 - 標(biāo)題用的是
<div>而不是標(biāo)題元素 (<h1>，<h2>等等) -
<input>相應(yīng)的文本標(biāo)簽用的是<div>而不是<label> - 輸入框也用綁定了鍵盤事件的
<div>磕瓷，而不是<input>
看到?jīng)]盒齿？一招 <div> 走天下！這樣有沒有問題困食？好像也沒什么大問題边翁，畢竟頁面看起來符合設(shè)計，也能正常交互硕盹。但是你想過沒有符匾，如果<div>能解決一切，為什么還需要其余幾十上百種標(biāo)簽?zāi)卮窭窟@就要說到 HTML 的語義化了啊胶。
什么是語義化
語義化就是說甸各，HTML 元素具有相應(yīng)的含義。它用于描述元素的內(nèi)容或者跟其他元素的關(guān)系焰坪。在 HTML 里趣倾，除了<div>和<span>，基本上都是語義化的元素某饰。
標(biāo)簽名的表義程度也是不一樣的儒恋，比如<section> 比 <article>對內(nèi)容的描述就更模糊。<section>也是語義化的黔漂，因為它表明內(nèi)容應(yīng)該從屬于一個組诫尽。而<article> 不僅表示它的內(nèi)容從屬于一個組，還是一篇文章炬守。
為了進一步說明語義化的重要性牧嫉，下面用標(biāo)題和按鈕元素來舉例。
標(biāo)題元素
<h1> 是頁面的標(biāo)題劳较，加上下方的 <h2> 就形成了頁面的層級結(jié)構(gòu)驹止。
<!-- h1, 一級標(biāo)題 -->
<h1>當(dāng)你的 HTML 里全是 div，那你就要小心了</h1>
<!-- h2观蜗，二級標(biāo)題 -->
<h2>什么是語義化</h2>
<!-- h3，三級標(biāo)題-->
<h3>標(biāo)題元素</h3>
在很多富文本編輯器中衣洁，使用合適的標(biāo)題結(jié)構(gòu)墓捻，可以自動生成內(nèi)容目錄。比如本文的目錄結(jié)構(gòu)就是這樣：
-
<h1>: 當(dāng)你的 HTML 里全是 div坊夫，那你就要小心了-
<h2>: 什么是語義化-
<h3>: 標(biāo)題元素 -
<h3>: 按鈕
-
-
<h2>: 非語義化元素 -
<h2>: 總結(jié)
-
可以看到砖第，HTML 本身就傳達了整篇文章的結(jié)構(gòu)信息。相反环凿，如果全部都用<div>梧兼，就變成這樣了：
-
<div>: 當(dāng)你的 HTML 里全是 div，那你就要小心了 -
<div>: 什么是語義化 -
<div>: 標(biāo)題元素 -
<div>: 按鈕 -
<div>: 非語義化元素 -
<div>: 總結(jié)
由于 <div>不附帶任何含義智听，因此它就是扁平的結(jié)構(gòu)羽杰。只要使用正確的 HTML，DOM 就會變得清晰和結(jié)構(gòu)化到推。
按鈕
按鈕的作用是提交表單或者改變某個元素的狀態(tài)考赛。從定義上看，按鈕具備以下特征：
- 可獲得焦點
- 可通過敲擊空格鍵或者回車鍵激活
- 可通過鼠標(biāo)點擊激活
當(dāng)你用<div>綁定點擊事件來模擬按鈕時莉测，你就沒辦法用上<button>天然自帶的那些語義化的交互特征颜骤。你還需要手動實現(xiàn)這些功能：
- focus 狀態(tài)
- 鍵盤交互
- 鼠標(biāo)交互
不止如此，當(dāng)屏幕閱讀器碰到<button>提交</button>這個元素捣卤，它會識別出語義忍抽，告訴用戶這是個提交按鈕八孝。如果只是個 <div> ，閱讀器就不會認(rèn)為它是個按鈕鸠项。
當(dāng)我們使用語義化的 HTML 元素后干跛，就給內(nèi)容賦予了含義，內(nèi)容也就有了生命锈锤。
非語義化元素
前面提到過驯鳖，<div>和<span>是非語義化元素。<div>沒有給內(nèi)容附加任何含義久免，它只是個<div>浅辙。當(dāng)然，這么說也不完全準(zhǔn)確阎姥，因為<div>和<span>之間還是有一點點區(qū)別的：
-
<div>是塊級元素 -
<span>是行內(nèi)元素记舆，應(yīng)該放在其他元素里面，比如<p><span class="dropcap">I</span>nline elements</p>
如果實在找不到對應(yīng)的 HTML 元素來表示內(nèi)容呼巴，那就可以用 <div> 或者 <span>泽腮。既然設(shè)計了 <div> 和 <span>，自然有它們的用武之地衣赶。畢竟诊赊，并不是每一個 HTML 元素都需要額外的語義。
總體原則是府瞄，盡量優(yōu)先使用對應(yīng)的語義化元素表示內(nèi)容碧磅。退而求其次，使用含義沒那么明確的標(biāo)簽遵馆。最后才考慮用<div> 和 <span>鲸郊。
總結(jié)
雖然使用語義化的 HTML 元素并不會給你的項目帶來明顯的收益，但我還是建議你這么做货邓。至少秆撮，語義化的 HTML 頁面能帶來更好的 SEO 排名、對屏幕閱讀器更友好换况、代碼可讀性更高职辨。如果你是個有追求的 Coder，相信你會認(rèn)同我的看法复隆。
本文首發(fā)于1024譯站
