談談html 語義化

什麼是語義元素？

語義元素能夠清楚地向瀏覽器和開發者描述其意義。即元素自己傳達了關於標籤所包含內容類型的一些信息。例如，當瀏覽器解析到標籤時，它將該標籤解釋爲包含這一塊內容的最重要的標題。

非語義元素：<div> 和 <span> - 沒法提供關於其內容的信息。

語義元素：<form>、<table> 以及 <img> - 清晰地定義其內容。

爲何要語義化？

1. 頁面結構: 使頁面沒有css的狀況下，也可以呈現出很好的內容結構
2. 有利於SEO: 爬蟲依賴標籤來肯定關鍵字的權重，所以能夠幫助爬蟲抓取更多的有效信息
3. 提高用戶體驗： 例如title、alt能夠用於解釋名稱或者解釋圖片信息，以及label標籤的靈活運用。
4. 便於團隊開發和維護: 語義化使得代碼更具備可讀性，讓其餘開發人員更加理解你的html結構，減小差別化。
5. 方便其餘設備解析: 如屏幕閱讀器、盲人閱讀器、移動設備等，以有意義的方式來渲染網頁。

大約有100多個HTML語義元素可供選擇。

經常使用的語義元素以下：

結構體	文本	一致
h1 h2 h3	p ul ol li blockquote	a strong em q abbr small

### HTML5 中新的語義元素

許多網站包含了指示導航、頁眉以及頁腳的 HTML 代碼，例如這些：<div id="nav"> <div class="header"> <div id="footer">。

若是使用 HTML4 的話，開發者會使用他們喜好的屬性名來設置頁面元素的樣式：

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...

如此，瀏覽器便沒法識別正確的網頁內容。

HTML5 提供了定義頁面不一樣部分的新語義元素：

標籤	描述
<article>	定義文章。
<aside>	定義頁面內容之外的內容。
<details>	定義用戶可以查看或隱藏的額外細節。
<figcaption>	定義 <figure> 元素的標題。
<figure>	規定自包含內容，好比圖示、圖表、照片、代碼清單等。
<footer>	定義文檔或節的頁腳。
<header>	規定文檔或節的頁眉。
<main>	規定文檔的主內容。
<mark>	定義重要的或強調的文本。
<nav>	定義導航連接。
<section>	定義文檔中的節。
<summary>	定義 <details> 元素的可見標題。
<time>	定義日期/時間。

<article> 元素

<article> 元素定義頁面獨立的內容，它能夠有本身的header、footer、sections等，專一於單個主題的博客文章，報紙文章或網頁文章。article能夠嵌套article，只要裏面的article與外面的是部分與總體的關係。

實例

<article>
   <h1>What Does WWF Do?</h1>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article> 
複製代碼

<section> 元素

<section> 元素定義文檔中的節。

根據 W3C 的 HTML 文獻：「節（section）是有主題的內容組，一般具備標題」。

能夠將網站首頁劃分爲簡介、內容、聯繫信息等節。

實例

<section>
   <h1>WWF</h1>
   <p>The World Wide Fund for Nature (WWF) is....</p>
</section> 
複製代碼

<header> 元素

<header> 元素爲文檔或節規定頁眉。

<header> 元素應該被用做介紹性內容的容器。用於定義頁面的介紹展現區域，一般包括網站logo、主導航、全站連接以及搜索框。也適合對頁面內部一組介紹性或導航性內容進行標記。

一個文檔中能夠有多個 <header> 元素。

下例爲一篇文章定義了頁眉：

實例

<article>
   <header>
     <h1>What Does WWF Do?</h1>
     <p>WWF's mission:</p>
   </header>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article> 
複製代碼

<footer> 元素

<footer> 元素爲文檔或節規定頁腳。

<footer> 元素應該提供有關其包含元素的信息。

頁腳一般包含文檔的做者、版權信息、使用條款連接、聯繫信息等等。

您能夠在一個文檔中使用多個 <footer> 元素。

實例

<footer>
   <p>Posted by: Hege Refsnes</p>
   <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer> 
複製代碼

<nav> 元素

<nav> 元素定義導航連接集合。

<nav> 元素旨在定義大型的導航連接塊。不過，並不是文檔中全部連接都應該位於 <nav> 元素中！

實例

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav> 
複製代碼

<aside> 元素

<aside> 元素頁面主內容以外的某些內容（好比側欄）。

aside 內容應該與周圍內容相關。

實例

<p>My family and I visited The Epcot center this summer.</p>

<aside>
   <h4>Epcot Center</h4>
   <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside> 
複製代碼

<figure> 和 <figcaption> 元素

在書籍和報紙中，與圖片搭配的標題很常見。

標題（caption）的做用是爲圖片添加可見的解釋。

經過 HTML5，圖片和標題可以被組合在 <figure> 元素中：

實例

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure> 
複製代碼

Fig1. - html語義化.

其餘語義化元素：

**<blockquote>**元素

定義塊引用，瀏覽器會在 blockquote 元素先後添加換行，並增長外邊距。cite屬性可用來規定引用的來源

<blockquote cite="https://en.wikiquote.org/wiki/Marie_Curie">
    Here is a long quotation here is a long quotation here is a long quotation
    here is a long quotation here is a long quotation here is a long quotation
    here is a long quotation here is a long quotation here is a long quotation.
</blockquote>
複製代碼

<abbr>元素

解釋縮寫詞。使用title屬性可提供全稱，只在第一次出現時使用便可。

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
複製代碼

求一鍵三連～

相關係列： 從零開始的前端築基之旅(超級精細，持續更新～)

參考文檔：

html語義元素：www.w3school.com.cn/html/html5_…

html語義化標籤： blog.csdn.net/qq_38128179…