爲什麼會有h5 語義化標籤
在HTML5出現之前，我們一般採用DIV+CSS佈局頁面。但是這樣的佈局方式不僅使我們的文檔結構不夠清晰，而且不利於搜索引擎爬蟲對我們頁面的爬取。爲了解決上述缺點，HTML5新增了很多新的語義化標籤。
語義標籤的概念
維基百科
語義化是前端開發裏面的一個專用術語，其優點在於標籤語義化有助於構架良好的html結構，有利於搜索引擎的建立索引、抓取；另外，亦有利於頁面在不同的設備上顯示儘可能相同；此外，亦有利於構建清晰的機構，有利於團隊的開發、維護。
通俗來說：語義化的意思是從名稱一眼就能看出其內容和作用是什麼，語義化標籤就是通過使用淺顯易懂的元素名和屬性名來實現語義化的
語義標籤有什麼用？
- 可以提高頁面的可訪問性，即在css丟失的情況下，頁面結構仍然可以比較清晰的展現；
- 提高用戶體驗，用戶不夠清楚地方可以得到良好的解釋；
- 有利於頁面seo，讓搜索引擎更容易明白頁面結構和內容的主次順序；
- 有利於頁面維護者理解代碼結構，降低維護成本；
- 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以語義的方式來渲染網頁
常用語義標籤有哪些？
h1到h6標籤 表示不同等級的標題
- 可以用來表現文本內容的層級結構
<article> 元素表示文檔、頁面、應用或網站中的獨立結構，其意在成爲可獨立分配的或可複用的結構
-
<article>可以嵌套使用，但是他們必須是部分與整體的關係 -
<article>元素的作者信息可通過<address>元素提供，但是不適用於嵌套的<article>元素 -
<article>元素的發佈日期和時間可通過<time>元素的pubdate屬性表示
<aside>定義側欄標籤
- 如果使用多個
<aside>，標籤應該在主要內容的後面，這樣有利於SEO的搜索與提升可訪問性 - 如果是與文章的主要內容有關係的圖像需要用
<figure>標籤代替
<section> 元素表示文檔中的一個區域（或節），比如，內容中的一個專題組，一般來說會有包含一個標題（heading）
- 如果元素內容可以分爲幾個部分的話，應該使用
<article>而不是<section> - 不要把
<section>元素作爲一個普通的容器來使用。 一般來說，一個<section>應該出現在文檔大綱中
<header> 元素用來表示一些前言性質或導航類的內容。它可以包含一些標題性質元素，也可以放置一些比如logo，搜索框，或其它的 <header> 元素等
-
<header>元素並不是一個可以形成段落內容的元素，所以，不需要在內容目錄裏體現出來
<footer> 元素表示最近一個章節內容或者根節點（sectioning root）元素的頁腳。一個頁腳通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息
-
<footer>元素內的作者信息應包含在<address>元素中 -
<footer>元素不是章節內容，因此在outline中不能包含新的章節
<nav> 描繪一個含有多個超鏈接的區域，這個區域包含轉到其他頁面，或者頁面內部其他部分的鏈接列表
- 並不是所有的鏈接都必須使用
<nav>元素,它只用來將一些熱門的鏈接放入導航欄 - 一個網頁也可能含有多個
<nav>元素,例如一個是網站內的導航列表,另一個是本頁面內的導航列表 - 對於屏幕閱讀障礙的人,可以使用這個元素來確定是否忽略初始內容
<dl>,<dt>,<dd> (自定義列表)
- dl: 英文意思爲definition list，作用是定義列表
- dt: 英文意思爲defines terms，作用是定義列表中的項目
- dd: 英文意思爲defines description，作用是定義列表中項目的註釋
<b>/<strong> 元素默認均展示爲加粗
-
<b>表示“文體突出”文字，通俗講就是突出不安分的文字。像概要中的關鍵字，產品名。或者代表強調的排版方式 -
<strong>表示重程度的強調
<i>/<em> 元素默認均展示爲斜體
-
<i>表現爲在文章中突出不同意見或語氣或的一段文本,例如外語，科技術語、或者是排版用的斜體文字 -
<em>表示強調
<mark>用來突出顯示文本，他的效果就像是用熒光筆給重點的語句做標一樣
<address> 元素可以讓作者爲它最近的 <article> 或者 <body> 祖先元素提供聯繫信息。在後一種情況下，它應用於整個文檔
- 當表示一個和聯繫信息無關的任意的地址時，應使用
<p>元素 - 這個元素不能包含除了聯繫信息之外的任何信息，比如出版日期
- 通常，
<address>元素可以放在當前section的<footer>元素中，如果存在的話
<figure> 這個元素是用來引入圖表、圖形、照片等，對應的場景就是像是雜誌中的圖片一樣
-
<figure>元素可以包含多個內容塊，但是只能有一個<figcaption>（可以理解成給圖表加標題）標籤 - 可以用
<h1> ~ <h6>來給<figure>增加標題； -
<figcaption>不能單獨出現，需要有配套的內容一起出現
<time> 可以通過這個標籤標記一個具體的時間或日期，應用場景通常就是一篇文章的發表時間
- datetime中的時間最好與
<time>標籤中的文本元素日期一樣，寫法可以不一樣 - 如果這個時間是代表整個文章或是頁面的時間需要添加pubdate屬性
- 不要在
<time>標籤中使用不確切的時間如：“今天中午”、“上週末” - 如果 使用pubdate屬性需要注意的是要在同一個父標籤下面不要出現張冠李戴的問題
-
<time>標籤不能在嵌套另一個<time>標籤 - datatime中的時間格式需要是標準的機器可能的時間 如:YYYY-MM-DDThh:mm:ss
注意
- 儘可能少的使用無語義的標籤div和span
- 在語義不明顯時，既可以使用div或者p時，儘量用p，因爲p在默認情況下有上下間距，對兼容特殊終端有利
- 使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td
- 表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途
- 每個input標籤對應的說明文本都需要使用label標籤，並且通過爲input設置id屬性，在lable標籤中設置for=someld來讓說明文本和相對應的input關聯起來