HTML 語義化

樂亦慄發表於2019-03-03
HTML

本文最初於 2018-09-21 釋出於 知乎 ，後在 《重學前端》 專欄的學習中，重新複習整理，釋出於 Github 上，並計劃寫一系列前端學習相關的文章。歡迎 star 。

HTML 語義化

簡單來說，我們可以理解為：用正確的標籤做正確的事情。

例如：

段落用 p 標籤，標題用 h 系列標籤，邊欄用 aside 標籤，主要內容用 main 標籤。正確使用語義標籤可以帶來很多好處。

為什麼要關注 HTML 語義化？（為什麼要使用語義類標籤？）

對人：

  • 增強可讀性，對開發者更友好，在沒有 CSS 的情況下也能較好地呈現網頁的內容結構與程式碼結構，便於團隊的開發和維護。

對機器：

  • 有利於 SEO ，可以讓搜尋引擎爬蟲更好地獲取到更多有效資訊，搜尋引擎的爬蟲依賴於標籤來確定上下文和各個關鍵字的權重，有效提升網頁的搜尋量。
  • 支援讀屏軟體，方便其他裝置的解析（如螢幕閱讀器、盲人閱讀器等），利於無障礙閱讀，提高可訪問性。

一些語義類標籤介紹

<header>

用於展示介紹性內容，通常包含一組介紹性的或是輔助導航的實用元素。

<footer>

表示最近一個章節內容或者根節點元素的頁尾。通常出現在尾部，包含一些作者資訊、相關連結、版權資訊等。

<aside>

表示跟文章主體不那麼相關的部分，可能包含導航、廣告等工具性質的內容。

側邊欄是 aside，aside 不一定是側邊欄。

aside 和 header 中都可能出現導航 <nav>，header 中的導航多數是到文章的目錄，而 aside 中的導航多是到關聯頁面或者整站地圖。

<address>

footer 中可以包含此元素。

容易誤用，並非表示單純的地址，而是表示「文章作者的聯絡方式」。

可以讓作者為它最近的 <article> 或者 <body> 祖先元素提供聯絡資訊。在後一種情況下，它應用於整個文件。

<hgroup>

表示標題組。

<em>

表示重音。同樣一句話裡如果重音不同，表達的意思也許大相徑庭。

<strong>

表示文字十分重要，一般用粗體顯示。

<abbr>

表示縮寫。

<hr>

橫向分割線，表示段落級元素之間的主題轉換（例如，一個故事中的場景的改變，或一個章節的主題的改變）。

<blockqoute>

表示段落級引述內容。

<q>

表示行內的引述內容。

<cite>

表示引述的作品名。

<time>

表示24小時制時間。

<figure> 和 <figcaption>

兩者常配合使用，表示一段獨立的內容，並且作為一個獨立的引用單元。

當它屬於主體(main flow)時，它的位置獨立於主體。這個標籤經常是在主文中引用的圖片，插圖，表格，程式碼段等等，當這部分轉移到附錄中或者其他頁面時不會影響到主體。 -- MDN

<figure>
  <img src="https://xx.com/xx.png" alt="An awesome picture">	
  <figcaption>這是一張圖片。</figcaption>
</figure>
複製程式碼

<dfn>

表示術語的一個定義。

<p>
    <dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.
</p>
複製程式碼

<nav> <ol> <ul>

導航欄、有序列表、無序列表

<pre> 中的內容會保持原有格式。

<samp> 元素用於標識計算機程式輸出。

<code> 表示一段計算機程式碼。

總結

對於語義類標籤的使用也許會帶來一些爭議，我們應該遵循的原則是：

儘量只用自己熟悉的語義標籤。

用對比不用好，不用比用錯好。

提示：

你可以在百度或者谷歌搜尋中輸入「標籤名稱」+「MDN」這兩個關鍵字來檢視更加專業和詳細的解釋。

另外安利一個 HTML 標籤的學習連結：

HTML Reference - A free guide to all HTML elements and attributes

（完）

相關文章