好程式設計師web前端分享常見html5語義化標籤，我們知道，建立結構清晰的頁面可以建立良好的語義化基礎，也降低了使用css的難度，下面總結了一些常用的語義化標籤，有空慢慢更新，歡迎大家補充

 

語義化HTML：用最恰當的HTML元素標記的內容。

 

優點：1 提升可訪問性；  2 SEO；   3 結構清晰，利於維護；

 

（HTML5舊的行內元素都被歸類為短語內容）

 

通用容器：div——塊級通用容器；span——短語內容無語義容器。

 

如果語義不合適，也不要霸王硬上弓，=。。 =老實的用div吧。

 

< title></title>：簡短、描述性、唯一（提升搜尋引擎排名）。

 

搜尋引擎會將title作為判斷頁面主要內容的指標，有效的title應該包含幾個與頁面內容密切相關的關鍵字，建議將title核心內容放在前60個字元中。

 

<hn></hn>：h1~h6分級標題，用於建立頁面資訊的層級關係。

 

對於搜尋引擎而言，如果標題與搜尋詞匹配，這些標題就會被賦予很高的權重，尤其是h1。

 

<header></header>：頁首通常包括網站標誌、主導航、全站連結以及搜尋框。

 

也適合對頁面內部一組介紹性或導航性內容進行標記。

 

<nav></nav>：標記導航，僅對文件中重要的連結群使用。

 

Html5規範不推薦對輔助性頁尾連結使用nav，除非頁尾再次顯示頂級全域性導航、或者包含招聘資訊等重要連結。

 

<main></main>：頁面主要內容，一個頁面只能使用一次。如果是web應用，則包圍其主要功能。

 

<article></article>：包含像報紙一樣的內容= =||是這麼理解的，表示文件、頁面、應用或一個獨立的容器。

 

article可以巢狀article，只要裡面的article與外面的是部分與整體的關係。

 

<section></section>：具有相似主題的一組內容，比如網站的主頁可以分成介紹、新聞條目、聯絡資訊等條塊。

 

如果只是為了新增樣式，請用div！

 

<aside></aside>：指定附註欄，包括引述、側欄、指向文章的一組連結、廣告、友情連結、相關產品列表等。

 

如果放在main內，應該與所在內容密切相關。

 

<footer></footer>：頁尾，只有當父級是body時，才是整個頁面的頁尾。

 

<small></small>：指定細則，輸入免責宣告、註解、署名、版權。

 

只適用於短語，不要用來標記“使用條款”、“隱私政策”等長的法律宣告。

 

<strong></strong>：表示內容重要性。

 

<em></em>：標記內容著重點（大量用於提升段落文字語義）。

 

<mark></mark>：突出顯示文字（yellow），提醒讀者。

 

在HTML5中em是表示強調的唯一元素，而strong則表示重要程度。

 

<b></b>：出於實用目的提醒讀者的一塊文字，不傳達任何額外的重要性

 

<i></i>：不同於其他文字的文字= =|||這個翻譯真的是······

 

<figure></figure>：建立圖（預設有40px左右margin）。

 

<figcaption></figcaption>：figure的標題，必須是figure內嵌的第一個或者最後一個元素。

 

<cite></cite>：指明引用或者參考，如圖書的標題，歌曲、電影、等的名稱，演唱會、音樂會、規範、報紙、或法律檔案等。

 

只用於參考源本身，而不是從中引述。

 

<blockquoto></blockquoto>：引述文字，預設新的一行顯示。

 

<q></q>：短的引述（跨瀏覽器問題，儘量避免使用）。

 

可以對blockquoto和q元素使用cite屬性（不是cite元素！），對搜尋引擎自動化工具有用。cite=“URL”引述來源地址。

 

<time></time>：標記時間。datetime屬性遵循特定格式，如果忽略此屬性，文字內容必須是合法的日期或者時間格式。     

 

不再相關的時間用s標籤。

 

<abbr></abbr>：解釋縮寫詞。使用title屬性可提供全稱，只在第一次出現時使用就ok。

 

abbr[title]{ border-bottom:1px dotted #000; }

 

<dfn></dfn>：定義術語元素，與定義必須緊挨著，可以在描述列表dl元素中使用。

 

<address></address>：作者、相關人士或組織的聯絡資訊（電子郵件地址、指向聯絡資訊頁的連結）。

 

如果提供整個頁面的作者聯絡資訊，一般放在頁面級footer裡。不能包含文件或者文件等其他內容。

 

<del></del>：移除的內容。

 

<ins></ins>：新增的內容。

 

少有的既可以包圍塊級，又可以包圍短語內容的元素。

 

<code></code>：標記程式碼。包含示例程式碼或者檔名 （< <  > >）

 

<pre></pre>：預格式化文字。保留文字固有的換行和空格。

 

<meter></meter>：表示分數的值或者已知範圍的測量結果。如投票結果。

 

例如：<meter value="0.2" title=”Miles“>20%completed</meter>

 

<progress></progress>：完成進度。可通過js動態更新value。

相關推薦