HTML 語義化

時間 2019-12-06

標籤 html 語義欄目 HTML 简体版

原文原文鏈接

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

HTML 語義化

簡單來講，咱們能夠理解爲：用正確的標籤作正確的事情。html

例如：前端

段落用 p 標籤，標題用 h 系列標籤，邊欄用 aside 標籤，主要內容用 main 標籤。正確使用語義標籤能夠帶來不少好處。git

爲何要關注 HTML 語義化？（爲何要使用語義類標籤？）

對人：github

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

對機器：ide

有利於 SEO ，可讓搜索引擎爬蟲更好地獲取到更多有效信息，搜索引擎的爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重，有效提高網頁的搜索量。
支持讀屏軟件，方便其餘設備的解析（如屏幕閱讀器、盲人閱讀器等），利於無障礙閱讀，提升可訪問性。

一些語義類標籤介紹

<header>工具

用於展現介紹性內容，一般包含一組介紹性的或是輔助導航的實用元素。學習

<footer>ui

表示最近一個章節內容或者根節點元素的頁腳。一般出如今尾部，包含一些做者信息、相關連接、版權信息等。搜索引擎

<aside>code

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

側邊欄是 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

（完）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。