初探 · HTML5語義化

01-26

碎碎念

這兩天正好看到一個經典面試題『HTML語義化是什麼意思？』，心想正好在梳理HTML知識，為了不心虛，遂想寫一篇博客來嘗試說清楚語義化。

隨著資料越看越多，最後終於翻牆看到W3C對標籤的定義，越發覺得人類的語言是一門藝術，HTML5推動下的標籤語義化也是在適應越來越多的具體使用場景，換句話說，標籤語義化協助下的內容語義化表達，會推動自然語言處理，AI智能，進而提高機器處理分析WEB的能力。

上述純屬扯淡，以下的內容也均為學習過程中的個人理解，若有誤解，懇請指出，謝謝！

什麼是語義化

網路上關於語義化的定義和說明很長很雜，看過了很多答案後，我嘗試一句話說清什麼是語義化...

語義化，指對文本內容的結構化（內容語義化），選擇合乎語義的標籤（代碼語義化），便於開發者閱讀，維護和寫出更優雅的代碼的同時，讓瀏覽器的爬蟲和輔助技術更好的解析。

為什麼要關注語義化

通過使用恰當語義的HTML標籤，讓頁面具有良好的結構與含義，可以有效提高：

可訪問性：幫助輔助技術更好的閱讀和轉譯你的網頁，利於無障礙閱讀；
可檢索性：有了良好的結構和語義，可以提高搜索引擎的有效爬取，提高網站流量；
國際化：全球只有13%的人口是英語母語使用者，因此通用的語義化標籤可以讓各國開發者更容易弄懂你網頁的結構；
互用性：減少網頁間的差異性，幫助其他開發者了解你網頁的結構，方便後期開發和維護；

被濫用的語義化標籤

以下是一些廣泛被濫用的語義化標籤：

blockquote：一些人通過使用<blockquote>標籤使文本達到縮進的目的，因為引用默認會進行文本縮進。如果你僅僅是想使文本達到縮進目的，而文本自身並非引用，那麼就用CSS margin來代替；
p：一些開發者用<p> </p>來為標籤自檢增加額外的空白段落，這裡應該使用CSS margin/padding來實現；
ul：一些開發者往<ul>中添加文本來達到文本縮進的目的，這種做法即不符合語義化要求，同樣也是非法的HTML實踐。<ul>標籤中只能有<li>標籤。
<h1>~<h6>：該標籤可以使文本字體變大，變粗，但如果文本並非是標題，應該使用CSS font-weight font-size；

總結：其實上面四個例子都是為了說明一點，用正確的標籤做正確的事。

語義化標籤介紹

在HTML5出來之前，我們習慣於用`div來表示頁面的章節或者不同模塊，但是`div`本身是沒有語義的。但是現在，HTML5中加入了一些語義化標籤，來更清晰的表達文檔結構。

一個沒有用div標籤布局的頁面

如上圖，這個頁面結構中摒棄了所有div元素，取而代之的是HTML5語義化標籤（用哪些標籤取決於你的設計目的）。

同樣，W3C制定了這些語義化標籤，不可能完全符合我們的設計目標。我們的目標是為了能夠讓開發者或是爬蟲讀懂各個模塊的語義化內容，因此，div作為一個沒有任何語義，僅僅是用來構建結構的元素，是最適合做容器的標籤。

下面就讓我們把HTML5語義化標籤過一遍：

<header>

定義文章的介紹信息：標題，logo，slogan；包裹目錄部分，搜索框，一個nav或者任何相關的logo；
一個頁面中<header>的個數沒有限制，可以為每個內容塊添加一個header；

<nav>

定義文章導航欄，鏈接等;
nav一般和u、li配合做導航欄；

<main>

定義文章的主要內容
main標籤在一份文檔中是唯一的，其後代元素常常包括`<article>`；

<article>

定義文檔中可以脫離其他部分，一份獨立的內容，通常帶有標題，當article內嵌article時，里外層的內容應該是相關的，比如一篇微博和它的評論；

<section>

與article的差別在於，它是整體的一部分，或者是文章的一節，一般來說section也會帶有標題；

<aside>

側邊欄（與article並列存在）或者嵌入內容（在article內），通常認為是獨立拆分出來而不受整體影響的一部分，作為主要內容的附屬信息，如索引，詞條列表，或者頁面及站點的附屬信息，如廣告，作者資料介紹等；

<footer>

頁腳，通常包含作者、版權信息或者相關鏈接等；

極易混淆的語義化標籤

下面這兩組元素，雖然樣式上極其相似，但是其在語義上各有側重，弄明白他們的區別，可以幫你摸清HTML5語義化的思路...

`<i>`

表示一段普通文本中，因為某種原因和正常文本不同，例如專業術語、外語短語或排版用的文字，其通常表現為斜體，他的出現不會改變語義；
根據W3C對i標籤的定義：

Terms in languages different from the main text should be annotated with lang attributes (or, in XML, lang attributes in the XML namespace).

一段文本中如果有插入語言不同的專業術語，需要在<i>標籤中加上<lang>屬性作為註解，例子如下：

<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

<i lang="fr">是對je ne sais quoi（習語，表達妙不可言的意思）的註解，表示包含的術語語種為法語；

`<em>`

表達對文本內容的強調；
其強調位置的不同往往帶來語義的變化（可以理解為英語口語中針對一句話中不同位置的重度，影響聽話人的理解）；
在視覺效果上也是斜體的效果；

注意：

The em element also isn』t intended to convey importance; for that purpose, the strong element is more appropriate.

<em>不適用於需要傳達重要性的內容，傳達重要性的語義應該使用<strong>；

The em element isn』t a generic "italics" element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the i element is more appropriate.

<em>標籤本質上並不是讓包含文本變為斜體字。有時，作者只是想讓部分文本在段落/句子中脫穎而出，或是在不同語氣或者語態上，這時要用<i>；

`<b>`

b表示樣式上的粗體；
其包含文本，不具備強調重要性的作用，也不影響語態和語氣，僅僅是從樣式上讓包含文本特殊化;
常用語關鍵字，文本驅動軟體中的可執行語句或者一篇文章的導語，說明書中的產品/功能名稱等；

`<strong>`

strong表示強調帶有著重意味，意在傳達內容的重要性（需要儘快被看到）、嚴重性或者緊急性，；

總結：

<em>適用於在一段文本中突出重點，強調位置的不同往往會影響語義，而如果僅僅在語態或者語氣上為了突出某個文本，應該使用<i>；
在使用 <i>時，W3C鼓勵開發者最好檢查下是否有更合適的標籤可替代，例如，上述的<em>，來突出重點，或是<dfn>，用來定義一個術語；
如果為了突出文本的重要性，緊急性，嚴重性應該使用<strong>；
W3C明確說明，<b> 元素應當是在其他標籤都不合適的情況下最後一個考慮使用的標籤，言外之意，官方並不推薦使用b標籤，

<figure>

文檔中的一些嵌入式內容，比如引用的圖片，插圖，表格，代碼段等，可以作為獨立的單元，當這部分轉移到附錄中或者其他頁面時不會影響到主體，這樣的元素都可以放在`<figure>`元素內，而且可以搭配其子元素`<figcaption>`作很好的元素說明或者備註信息;

<img>

img元素最好附帶alt信息，即對圖片進行文本說明，當圖像無法查看時會顯示這段文本描述;

<table>

table元素現在有一系列語義化結構標籤

<caption>: 表格的標題，跳脫於表格之外;

<thead>：表格的表頭行，定義表格的表頭內容;

<tbody>：表格的主體部分，表格的主體部分;

<tfoot>：表格的腳註部分，tfoot要和thead，tbody結合起來使用;

<form>

<label>標籤的用法：label標籤，為input元素定義標註，改進了表單控制項的可用性，當你點擊到label標籤時，會自動聚焦到對應控制項上，label標籤一般有兩種用法

1. label的for屬性與控制項的id相對應，比如：

<label for="username">請輸入用戶名: </label> <input type="text" id="username" name="username">

2. label中內嵌控制項，比如:

<label>請輸入用戶名<input type="text" id="username" name="username"></label>

此外，

placeholder屬性，其值會在輸入欄位為空時顯示，並會在欄位獲得焦點時消失；
表單中的單選radio控制項和複選checkbox控制項以及下拉框select控制項，可以為radio, checkbox添加checked屬性以及為option添加selected屬性讓其默認選中