什么是語義化

網(wǎng)絡(luò)上關(guān)于語義化的定義和說明很長很雜，看過了很多答案后，我嘗試一句話說清什么是語義化...

語義化，指對文本內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合乎語義的標(biāo)簽（代碼語義化），便于開發(fā)者閱讀，維護(hù)和寫出更優(yōu)雅的代碼的同時，讓瀏覽器的爬蟲和輔助技術(shù)更好的解析。

為什么要關(guān)注語義化

通過使用恰當(dāng)語義的HTML標(biāo)簽，讓頁面具有良好的結(jié)構(gòu)與含義，可以有效提高：

1. 可訪問性：幫助輔助技術(shù)更好的閱讀和轉(zhuǎn)譯你的網(wǎng)頁，利于無障礙閱讀；
2. 可檢索性：有了良好的結(jié)構(gòu)和語義，可以提高搜索引擎的有效爬取，提高網(wǎng)站流量；
3. 國際化：全球只有13%的人口是英語母語使用者，因此通用的語義化標(biāo)簽可以讓各國開發(fā)者更容易弄懂你網(wǎng)頁的結(jié)構(gòu)；
4. 互用性：減少網(wǎng)頁間的差異性，幫助其他開發(fā)者了解你網(wǎng)頁的結(jié)構(gòu)，方便后期開發(fā)和維護(hù)；

被濫用的語義化標(biāo)簽

以下是一些廣泛被濫用的語義化標(biāo)簽：

1. blockquote：一些人通過使用<blockquote>標(biāo)簽使文本達(dá)到縮進(jìn)的目的，因為引用默認(rèn)會進(jìn)行文本縮進(jìn)。如果你僅僅是想使文本達(dá)到縮進(jìn)目的，而文本自身并非引用，那么就用CSS margin來代替；
2. p：一些開發(fā)者用<p>&nbsp;</p>來為標(biāo)簽自檢增加額外的空白段落，這里應(yīng)該使用CSS的margin/padding來實現(xiàn)；
3. ul：一些開發(fā)者往<ul>中添加文本來達(dá)到文本縮進(jìn)的目的，這種做法即不符合語義化要求，同樣也是非法的HTML實踐。<ul>標(biāo)簽中只能有<li>標(biāo)簽。
4. <h1>~<h6>：該標(biāo)簽可以使文本字體變大，變粗，但如果文本并非是標(biāo)題，應(yīng)該使用CSS font-weight font-size；
   總結(jié)：其實上面四個例子都是為了說明一點，用正確的標(biāo)簽做正確的事。

語義化標(biāo)簽介紹

在HTML5出來之前，我們習(xí)慣于用div來表示頁面的章節(jié)或者不同模塊，但是div`本身是沒有語義的。但是現(xiàn)在，HTML5中加入了一些語義化標(biāo)簽，來更清晰的表達(dá)文檔結(jié)構(gòu)。

一個沒有用div標(biāo)簽布局的頁面

同樣，W3C制定了這些語義化標(biāo)簽，不可能完全符合我們的設(shè)計目標(biāo)。我們的目標(biāo)是為了能夠讓開發(fā)者或是爬蟲讀懂各個模塊的語義化內(nèi)容，因此，div作為一個沒有任何語義，僅僅是用來構(gòu)建結(jié)構(gòu)的元素，是最適合做容器的標(biāo)簽。

下面就讓我們把HTML5語義化標(biāo)簽過一遍：

<header>

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

<nav>

• 定義文章導(dǎo)航欄，鏈接等;
• nav一般和u、li配合做導(dǎo)航欄；

<main>

• 定義文章的主要內(nèi)容
• main標(biāo)簽在一份文檔中是唯一的，其后代元素常常包括<article>；

<article>

• 定義文檔中可以脫離其他部分，一份獨立的內(nèi)容，通常帶有標(biāo)題，當(dāng)article內(nèi)嵌article時，里外層的內(nèi)容應(yīng)該是相關(guān)的，比如一篇微博和它的評論；

<section>

• 與article的差別在于，它是整體的一部分，或者是文章的一節(jié)，一般來說section也會帶有標(biāo)題；

<aside>

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

• 頁腳，通常包含作者、版權(quán)信息或者相關(guān)鏈接等；

極易混淆的語義化標(biāo)簽

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

<i>

• 表示一段普通文本中，因為某種原因和正常文本不同，例如專業(yè)術(shù)語、外語短語或排版用的文字，其通常表現(xiàn)為斜體，他的出現(xiàn)不會改變語義；
• 根據(jù)W3C對i標(biāo)簽的定義：

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

一段文本中如果有插入語言不同的專業(yè)術(shù)語，需要在<i>標(biāo)簽中加上<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（習(xí)語，表達(dá)妙不可言的意思）的注解，表示包含的術(shù)語語種為法語；

<em>

• 表達(dá)對文本內(nèi)容的強調(diào)；
• 其強調(diào)位置的不同往往帶來語義的變化（可以理解為英語口語中針對一句話中不同位置的重度，影響聽話人的理解）；
• 在視覺效果上也是斜體的效果；
  注意：

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

• <em>不適用于需要傳達(dá)重要性的內(nèi)容，傳達(dá)重要性的語義應(yīng)該使用<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>標(biāo)簽本質(zhì)上并不是讓包含文本變?yōu)樾斌w字。有時，作者只是想讓部分文本在段落/句子中脫穎而出，或是在不同語氣或者語態(tài)上，這時要用<i>；

<b>

• b表示樣式上的粗體；
• 其包含文本，不具備強調(diào)重要性的作用，也不影響語態(tài)和語氣，僅僅是從樣式上讓包含文本特殊化;
• 常用語關(guān)鍵字，文本驅(qū)動軟件中的可執(zhí)行語句或者一篇文章的導(dǎo)語，說明書中的產(chǎn)品/功能名稱等；

<strong>

• strong表示強調(diào)帶有著重意味，意在傳達(dá)內(nèi)容的重要性（需要盡快被看到）、嚴(yán)重性或者緊急性，；

總結(jié)：

1. <em>適用于在一段文本中突出重點，強調(diào)位置的不同往往會影響語義，而如果僅僅在語態(tài)或者語氣上為了突出某個文本，應(yīng)該使用<i>；
2. 在使用 <i>時，W3C鼓勵開發(fā)者最好檢查下是否有更合適的標(biāo)簽可替代，例如，上述的<em>，來突出重點，或是<dfn>，用來定義一個術(shù)語；
3. 如果為了突出文本的重要性，緊急性，嚴(yán)重性應(yīng)該使用<strong>；
4. W3C明確說明，<b> 元素應(yīng)當(dāng)是在其他標(biāo)簽都不合適的情況下最后一個考慮使用的標(biāo)簽，言外之意，官方并不推薦使用b標(biāo)簽，

<figure>

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

<img>

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

<table>

table元素現(xiàn)在有一系列語義化結(jié)構(gòu)標(biāo)簽

<caption>: 表格的標(biāo)題，跳脫于表格之外;

<thead>：表格的表頭行，定義表格的表頭內(nèi)容;

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

<tfoot>：表格的腳注部分，tfoot要和thead，tbody結(jié)合起來使用;

<form>

• <label>標(biāo)簽的用法：label標(biāo)簽，為input元素定義標(biāo)注，改進(jìn)了表單控件的可用性，當(dāng)你點擊到label標(biāo)簽時，會自動聚焦到對應(yīng)控件上，label標(biāo)簽一般有兩種用法

1. label的for屬性與控件的id相對應(yīng)，比如：

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

2. label中內(nèi)嵌控件，比如:

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

此外，

1. placeholder屬性，其值會在輸入字段為空時顯示，并會在字段獲得焦點時消失；
2. 表單中的單選radio控件和復(fù)選checkbox控件以及下拉框select控件，可以為radio, checkbox添加checked屬性以及為option添加selected屬性讓其默認(rèn)選中

本文轉(zhuǎn)自知乎-小谷悠悠伴我行專欄-初探 · HTML5語義化