談談HTML5裡面已經可以使用而且好處多多的 語意化標籤。

HTML5 其實還是HTML，只是像軟體有更新一樣，HTML也更新到HTML5而且有更多的功能，具體的呈現就是出現許多新的 tag標籤。

HTML5裡主要的更新之一就是用語義化的tag取代不具意義的<div>，另一部分是針對新的裝置，像手機觸控、螢幕滑動控制等tag、增進客戶端及驗證表單、影音、多媒體還有最炫的Canvas繪圖區功能等等。

又因為HTML是一種讓瀏覧器看的語言，在舊版瀏覽器裡HTML5有可能沒有被支援，而有些新的HTML5功能又還在討論中，所以本篇就先來談談HTML5裡面已經可以使用而且好處多多的 語意化標籤。

關於支援度可參考此網站 when can I use

所謂的HTML語義化，就是幾個新的tag 這些tag是參考這些年來網頁設計師們在設計網頁時會使用的結構，比如<div class="header"> , <div ID="footer"> , <div class="aside"> , <div class="nav">....

這些都是一個設計在設計網站時常用的基本結構，但是因為ID, class可以任意取名，所以一個導引列可能被設計師取名為: nav, navication, menu, toolbar....

這種不一致讓瀏覽器無法辨視，而且有可能讓合作工作的交接、溝通變得困難。

因此 W3C就為這些常用的結構規範了新的HTML tag 包括 <header><footer><aside><nav><section><article> 等。

這些tag 現在已經能直接在製作網站時使用，即使是IE，也可以利用一小段js讓IE能正常套用。

W3C推行語意化的HTML結構除了讓設計師更容易掌握這些元素，更重要的是讓網頁的內容具有意義(對搜尋引擎及裝置來說)，當你的內容放在正確的 tag裡面時，不同的裝置就能為使用者增加一些UI介面上的輔助功能，像是按tab跳到下一個選項或是跳到主內文上，對使用者及網站親和力來說是很重要的改善。

接著來介紹這幾個主要的新 tag:

<header>
顧名思義就是頭部，主要是用來放置網站的刊頭，固定會重覆出現的導覽、LOGO、站名等內容。

<footer>
尾部，包括頁尾，像是法律資訊或是作者訊息等等，不過<header>及<footer>都不是唯一的，在網頁中的同一個區域可以重覆使用。

<nav>
導覽列，像是選單之類用來導引使用到網站各個地方的，可以用<nav> 包起來，在裝置上的操作是可以直接跳過、跳是跳到這個段落然後跳選下一個連結。

<aside>
側欄，網頁中非主要區域的地方，常見放廣告及導覽、全站檢索的地方。

<article>
文章，意指一篇完整而可獨立抽出來閱讀的文章。

<section>
章節，表示相關但是不同的段落，段落tag裡也可以包<article>, <article>裡也可以包<section>主要的差別是語意上的。

HTML5裡這幾個新的語義化tag其實大部分的行為及用法都和加了 ID, class的<div>沒什麼不同，但是有一個最大也是最重要的差異就是大網結構，<div>的意思只是一個單純的分開元素用的容器，是為了套用樣式或是做出區隔用的，並沒有任何語意上的差別，但是 <section>, <article>, <nav>...不同，這些tag 都會造成語意上的差別，而且他們都需要放上<h1>來當做語意的標題。

不同的tag會造成語意上不同的差別。這就是HTML5 和之前最大的不同之處，希望網頁的內容都是可以解讀的部分而不是單純的用<div>分開。

為了像行動裝置等不同介面的顯示及使用者為主的各種功能，網站設計越來越重視"有意義"的內容，所以在建立網頁時需要考慮到結構內容的層級。

想要檢視你網站的大綱可以參考這裡HTML5 outliner

=
chibc's blog | [新手前端] HTML5的新tag 語意化標籤