語義化-HTML5標籤的理解

一.爲什麼要用h5標籤

html5增長了新標籤，爲了跟上時代的腳步，最近嘗試在項目中用到，想到沒看官方文檔理解一下很難用的好，因而找到官方地址理解了一下。這裏主要看了一些結構性（Sections）元素（官方地址）：header,footer,nav,section,article,aside，這些用來替代千篇一概的div佈局，很是語義化。下面列舉簡單說一下，看成本身的備忘。

article標籤從字面來看就是一篇文章，是一個獨立的，不須要上下文，單獨拿出來就是完整的一部分。
（好比一篇博文，一封郵件，一條評論）。若是是article嵌套article（好比一篇博文，嵌套評論），說明內嵌的article跟父article是有關聯的。

section標籤相比起div更有意義，是一個主題，一個分類的聚合，一般有一個標題。好比一個網站的主頁能夠分爲介紹，最新內容和聯繫信息等section。好比一份報紙分爲多版，一本小說分爲多個章節。通常來講，文檔內容 明確列出了大綱再用section比較合適。若是隻是想加style或者script，更適合用div標籤。

nav標籤從字面就能知道是導航的意思，詳細一點就是網站地圖的導航或者文檔內部的快速跳轉。可是通常網站footer處友情連接等就不適合用這個標籤，用p標籤包一下而後把超連接列舉一下就能夠了。

aside標籤包含的內容更上下文是無關的，在排版上可能表現爲引用或者邊欄，廣告，nav標籤組等（但不必定是，要根據內容判斷），其內容與頁面的主題內容是無關的。

hgroup標籤是不一樣級標題的集合。好比文章的主標題用h1，副標題用h2。

header標籤表示一組引導性的內容，一般會包含h1-h6標籤，hgroup標籤，但不是必須。同時也能夠包含一個部份內容的目錄，搜索表單等。

footer標籤一般包含做者信息，相關文檔的連接，版權信息，長附錄，許可證協議等 署名和相似信息能夠放在footer或者header裏面。
能夠是整個網頁的footer，也能夠是某個section裏面的footer。

address標籤表示聯繫信息，但不能夠用來包裹任意的地址。

PS：看到一篇文章，對h5標籤的分析挺詳細的，學習了一下。

二.如何兼容ie

這個如今的解決辦法是經過在head處引用一個js文件來兼容ie，要點就是調用 document.createElement方法來生成HTML5標籤元素，在後面用到這些標籤的時候瀏覽器就會認得新標籤了。由於IE必須在元素解析前知道這個元素，因此這個js文件不能在頁面底部調用。

三.總結與思考

語義化的意思根據內容使用適合的標籤，而不是看設計效果來使用標籤。因此，咱們是要看這一塊的內容跟整個文檔的關係，若是這一塊內容長得像側邊欄，就輕率地使用aside標籤，而不考慮其實它是這個文檔的導航，只是它恰好長得有點像邊欄，咱們應該使用nav標籤才能正確表達它是導航的意思。

因此在看設計稿的時候，咱們須要用心去讀懂一個文檔，這個文檔哪一部分起到引導的做用，哪一部分是主題內容，主題內容又是怎樣劃分模塊的，有沒有做者版權聯繫信息等。咱們應該從文字去理解它是什麼含義，而不是它看起來像什麼。

咱們作的這些，對普通用戶可能沒有什麼意義，可是對於無障礙，以及爬蟲是很重要的。良好的結構能讓機器更好地理解咱們網頁想要表達的重點。作到人和機器都能容易地理解前端工程師的意圖，是咱們的終級追求。