常見html5語義化標籤
語義化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。
語義化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。