好程式設計師web前端分享常見html5語義化標籤

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

 

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

 

優點： 1 提升可訪問性；   2 S-EO ；    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 。