語義化HTML的重要性

時間 2020-02-27

標籤語義 html 重要性欄目 HTML 简体版

原文原文鏈接

牛客的專向題刷完了，系統的總結一下考點，爭取搞清楚各類知識點的前因後果。前端精進之路，新的一年，衝鴨！另，這是HTML&CSS重點知識點合集第一篇。其他文章見文末。html

1、HTML

不論是不是作前端的，相信你們都據說過HTML而且本身隨隨便便就能看着幾個現成的網站樣式寫出幾行代碼。可是，你有考慮過你真的把HTML用好了嘛？相信你也知道HTML控制的是整個網頁的結構，而且它是語義化的。那你在寫代碼的時候真的把結構語義化考慮進去了嘛？如今寫前端代碼都流行一個div走遍天下，實現一個導航欄是一個div走到底，實現一個表單也是一個div走到底，你也是這樣的嘛？前端

2、HTML語義化真的有說的那麼重要嘛？

首先須要說明的是，其實HTML自己是沒有表現的。咱們看到的，好比 <h1> 是粗體，字體大小爲2em；<strong> 加粗，這實際上是HTML默認的CSS樣式在起做用。因此咱們首先要知道，HTML和頁面的表現是沒有關係的，這些是CSS的事情。HTML在頁面中的做用就是結構和含義。瀏覽器

如今咱們來討論一下，語義化的HTML結構到底有什麼好處：網絡

在樣式丟失時也能讓頁面呈現清晰的結構；
更好的支持各類終端，屏幕閱讀器會徹底根據你的標記來「讀取」網頁的內容。例如無障礙閱讀和有聲小說等；
利於搜索引擎的抓取。搜索引擎的爬蟲也依賴於標記來肯定上下文和各個關鍵字的權重。
便於團隊開發和維護。

對於以上這四點，在平常用到的軟件或網站中許多都有體現。當你進入谷歌郵箱時，假設這時你的網絡很差，你能夠直接加載進入「基本HTML」的簡略版本。再好比，咱們平常開發中，不少人都喜歡用div去實現一個button，認爲這樣不只添加樣式方便還能夠不用管瀏覽器的兼容性問題。可是咱們很容易忽視的一點是，像div、span這樣的標籤在默認狀況下是沒有辦法自動得到焦點的（當咱們按tab鍵時會自動跳過），這對特殊人羣無疑是沒有任何幫助的。ide

咱們再來看一個例子，假如咱們寫了一個表單，提交表單時沒有用到 input type="submit"，取而代之的是使用 a 標籤的 click 事件作提交。通常狀況下是能夠正常工做的，可是若是這時候Javascript被禁用了怎麼辦？回過頭來，若是咱們是用的以下文檔結構，即使在Javascript被禁用的狀況下，表單仍然能夠提交。佈局

<form>
  <input type="text"> <input type="submit"> </form> 複製代碼

代碼實現優雅降級也須要正確的體現HTML標籤的語義，這樣符合瀏覽器的預期。讓咱們網頁在各類狀況下，如Javascript被禁用，CSS傳輸失敗等等，均可以運做良好。post

同時，語義化的HTML結構不只僅給咱們開發人員看的，更是給搜索引擎看的。字體

好比咱們一個頁面能夠這樣寫：網站

<div class="body">
  <div class="nav">
    <div class="nav-item">Home</div>
    <div class="nav-item">My Articles</div>
  </div>
  <div class="sidemenu">
    <div class="sidemenu-item">Like</div>
    <div class="sidemenu-item">Share</div>
    <div class="sidemenu-item">Add to favorite</div>
  </div>
  <div class="container">
    <div class="heading">This is the heading</div>
    <div class="content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, consequuntur!
    </div>
    <div class="button">Next Page</div>
  </div>
  <div class="footer">
    copyright@2020
  </div>
</div>
複製代碼

也能夠這樣寫：ui

<body>
  <nav>
    <ul>
      <li>Home</li>
      <li>My Articles</li>
    </ul>
  </nav>
  <aside>
    <ul>
      <li>Like</li>
      <li>Share</li>
      <li>Add to favorite</li>
    </ul>
  </aside>
  <section>
    <h3>This is the heading</h3>
    <article>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, assumenda?
    </article>
    <button>Next Page</button>
  </section>
  <footer>
    copyright@2018
  </footer>
</body>
複製代碼