若是你的 HTML 裏全是 div，那就要當心了

作前端開發的同窗都知道，一個網頁的基本組成部分是 HTML，JavaScript 和 CSS。開發人員一般更關注 JavaScript 和 CSS ，實踐着各類語言規範和設計模式。對於 HTML 的關注度則明顯偏少，只要能作出設計師畫的界面就萬事大吉了，不怎麼去關心 HTML 是否是規範合理。因而下面的狀況隨處可見：

• 按鈕用的是可點擊的 <div> 而不是 <button> 元素
• 標題用的是 <div> 而不是標題元素 (<h1>，<h2> 等等)
• <input> 相應的文本標籤用的是 <div> 而不是<label>
• 輸入框也用綁定了鍵盤事件的 <div> ，而不是<input>

看到沒？一招 <div> 走天下！這樣有沒有問題？好像也沒什麼大問題，畢竟頁面看起來符合設計，也能正常交互。可是你想過沒有，若是<div>能解決一切，爲何還須要其他幾十上百種標籤呢？這就要說到 HTML 的語義化了。

什麼是語義化

語義化就是說，HTML 元素具備相應的含義。它用於描述元素的內容或者跟其餘元素的關係。在 HTML 裏，除了<div>和<span>，基本上都是語義化的元素。

標籤名的表義程度也是不同的，好比<section> 比 <article>對內容的描述就更模糊。<section>也是語義化的，由於它代表內容應該從屬於一個組。而<article> 不只表示它的內容從屬於一個組，仍是一篇文章。

爲了進一步說明語義化的重要性，下面用標題和按鈕元素來舉例。

標題元素

<h1> 是頁面的標題，加上下方的 <h2> 就造成了頁面的層級結構。

<!-- h1, 一級標題 -->

<h1>當你的 HTML 裏全是 div，那你就要當心了</h1>

<!-- h2，二級標題 -->

<h2>什麼是語義化</h2>

<!-- h3，三級標題-->

<h3>標題元素</h3>

在不少富文本編輯器中，使用合適的標題結構，能夠自動生成內容目錄。好比本文的目錄結構就是這樣：

• <h1>: 當你的 HTML 裏全是 div，那你就要當心了
  • <h2>: 什麼是語義化
    • <h3>: 標題元素
    • <h3>: 按鈕
  • <h2>: 非語義化元素
  • <h2>: 總結

能夠看到，HTML 自己就傳達了整篇文章的結構信息。相反，若是所有都用<div>，就變成這樣了：

• <div>: 當你的 HTML 裏全是 div，那你就要當心了
• <div>: 什麼是語義化
• <div>: 標題元素
• <div>: 按鈕
• <div>: 非語義化元素
• <div>: 總結

因爲 <div>不附帶任何含義，所以它就是扁平的結構。只要使用正確的 HTML，DOM 就會變得清晰和結構化。

按鈕

按鈕的做用是提交表單或者改變某個元素的狀態。從定義上看，按鈕具有如下特徵：

• 可得到焦點
• 可經過敲擊空格鍵或者回車鍵激活
• 可經過鼠標點擊激活

當你用<div>綁定點擊事件來模擬按鈕時，你就沒辦法用上<button>自然自帶的那些語義化的交互特徵。你還須要手動實現這些功能：

• focus 狀態
• 鍵盤交互
• 鼠標交互

不止如此，當屏幕閱讀器碰到<button>提交</button>這個元素，它會識別出語義，告訴用戶這是個提交按鈕。若是隻是個 <div> ，閱讀器就不會認爲它是個按鈕。

當咱們使用語義化的 HTML 元素後，就給內容賦予了含義，內容也就有了生命。

非語義化元素

前面提到過，<div>和<span>是非語義化元素。<div>沒有給內容附加任何含義，它只是個<div>。固然，這麼說也不徹底準確，由於<div>和<span>之間仍是有一點點區別的：

• <div> 是塊級元素
• <span> 是行內元素，應該放在其餘元素裏面，好比 <p><span class="dropcap">I</span>nline elements</p>

若是實在找不到對應的 HTML 元素來表示內容，那就能夠用 <div> 或者 <span>。既然設計了 <div> 和 <span>，天然有它們的用武之地。畢竟，並非每個 HTML 元素都須要額外的語義。

整體原則是，儘可能優先使用對應的語義化元素表示內容。退而求其次，使用含義沒那麼明確的標籤。最後才考慮用<div> 和 <span>。

總結

雖然使用語義化的 HTML 元素並不會給你的項目帶來明顯的收益，但我仍是建議你這麼作。至少，語義化的 HTML 頁面能帶來更好的 SEO 排名、對屏幕閱讀器更友好、代碼可讀性更高。若是你是個有追求的 Coder，相信你會認同個人見解。

本文首發於1024譯站