iT邦幫忙

DAY 22
2

新手前端日記系列 第 22

[新手前端] HTML5的新tag 語意化標籤

談談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 語意化標籤


上一篇
[新手前端]視覺及企劃也該知道的網頁設計概念
下一篇
[新手前端]拿到視覺出的mockup,開始要切版了
系列文
新手前端日記30

1 則留言

我要留言

立即登入留言