HTML語義化

HTML語義化

HTML語義化，顧名思義，就是讓HTML標籤富有語義，讓HTML結構更加清晰易懂，便於開發者閱讀和書寫，讓瀏覽器的爬蟲和機器很好的解析。

HTML語義化優點，爲什麼要語義化

1. 增加頁面可讀性在去掉CSS樣式的情況下，HTML頁面仍然能呈現良好的內容結構與代碼結構
2. 提高用戶體驗，比如：title，alt用於解釋名詞和圖片信息、
3. 方便其他設備解析（屏幕閱讀器、盲人閱讀器、移動設備）
4. 利於SEO，語義化能和搜索引擎建立良好的聯繫，有利於爬蟲抓取更多的有效信息。爬蟲依賴於標籤來確定上下文和各個關鍵字的權重。
5. 便於團隊開發和維護，利於規範化。

語義化常用方法

• 少用沒有語義的<div>和<span>。

• 正確使用<h> 標籤。
  根據重要性逐級遞減，沒有斷層。並且一個頁面只能有一個<h1>標籤

• 不要使用純樣式標籤，如：<b>、<font>、<u>等，改用css設置。

• 加粗用<strong>不用<b>，斜體用<em>不用<i>。

• 正確使用表格標籤。
  標題用<caption>，表頭<thead>主體部分用<tbody>包圍，尾部用<tfoot>包圍。表頭和一般單元格要區分開，表頭標題用<th>，內容單元格用<td>。

  <table>
    <caption>這是表格標題</caption>
    <thead>
      <tr>
        <th>這是表頭1</th>
        <th>這是表頭2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>這是單元格1</td>
        <td>這是單元格2</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>這是頁腳1</td>
        <td>這是頁腳2</td>
      </tr>
    </tfoot>
  </table>

• 正確使用內容容器，如段落<p>，列表<ul>,<ol>, <li>, <dl>, <dt>, <dd>。

  <!-- 列表 -->
  <dl>
    <dt>襯衫</dt>
    <dd>短袖襯衫</dd>
    <dd>長袖襯衫</dd>
    <dd>無袖襯衫</dd>
    <dt>褲子</dt>
    <dd>休閒褲</dd>
    <dd>牛仔褲</dd>
    <dd>卡其褲</dd>
    <dd>運動褲</dd>
  </dl>
  
  <!-- 無序列表 -->
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
  
  <!-- 有序列表 -->
  <ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>

• 需要爲<form>表單分組時，每個分組領域用<fieldset>標籤包起來，並用<legend>標籤說明對分組內容說明。

  <form>
    <fieldset>
      <legend>健康信息</legend>
      身高：<input type="text" />
      體重：<input type="text" />
    </fieldset>
  </form>

• 需要對<input> 標籤進行說明時，使用<label> 標籤

  <!-- 帶label的input標籤 -->
  <label for="user-name">Female</label>
  <input type="text" name="user-name" id="user-name" />

• 提高關鍵詞密度，如圖片替換alt屬性，鏈接說明title屬性等。

  <!-- 超鏈接title屬性說明 -->
  <a href="https://www.csdn.net/" title="點擊跳轉至CDDN首頁" target="_blank">CSDN</a>
  
  <!-- img標籤alt屬性：如果無法顯示圖像，瀏覽器將顯示替代文本, title屬性對圖片說明  -->
  <img src="" alt="圖片替換" title="這是**圖片">

常見的HTML5語義化標籤

HTML5新增的語義化標記元素

元素名稱	說明
<header>	標記頭部區域的內容
<footer>	標記腳步區域的內容
<section>	Web頁面中的一塊區域
<article>	獨立的文章內容
<aside>	相關內容或者引文
<nav>	導航類輔助內容

<!-- HTML5語義化標籤的使用 -->
<header>
  網頁標題
</header>  
<nav>
  <h3>導航</h3>
  <a href="#">鏈接</a><a href="#">鏈接2</a><a href="#">鏈接3</a>
</nav>
<section>
  <article>
    <header>
        <h1>文章標題</h1>
    </header>
    <p>文章內容</p>
    <footer>
        <h2>文章註腳</h2>
    </footer>
  </article>
</section>
<aside>
  <h3>相關內容</h3>
  <p>相關輔助信息或者服務</p>
</aside>
<footer>
  頁腳底部說明
</footer>

---

參考資料：
Web語義化
W3Cschool HTML 參考手冊