本文最初於 2018 09 21 發佈於 "知乎" ，後在 "《重學前端》" 專欄的學習中，重新複習整理，發佈於 "Github" 上，並計劃寫一系列前端學習相關的文章。歡迎 star 。 HTML 語義化 簡單來說，我們可以理解為：用正確的標簽做正確的事情。 例如： 段落用 p 標簽，標題用 h ...
本文最初於 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
（完）
