HTML5 語意標籤(SEMANTICS)與大綱(OUTLINE)

HTML5 從根本改變了整個網頁的設計模式,導入了大綱的概念,讓設計人員能夠以大綱組織網頁內容的配置,回到上述「康廷數位學院」的頁面配置,現在以大綱描述內容的配置將是以下的結果:


如你所見,有了大綱條目,我們就可以很容易組織並且配置網頁的內容架構,另外一項更重要的好處是,除了作者本身,其它設計師拿到這個網頁,不需要額外的說明文件,同樣可以直接辨識出這個大綱條目,並瞭解網頁的設計結構,因為其中使用了HTML5 的大綱輸出語意標籤如 <section>  等等,而這也意謂著,以 HTML5 標準實作的搜尋引擎或是相關程式將可以很容易剖析你的網頁內容,這意謂著你所建立的網頁將更容易被理解。

設計一個網頁時會先切割區塊,然後輸出內容大綱條目,而這個過程的實作,基本上就是配置合適的標籤,並且進行樣式的設計套用,在瀏覽器上將內容適當的呈現出來:


以下是進行相關實作需要的語意標籤列表簡述:

標籤
說明
<div>
一般性的區塊切割,套用樣式的相關用途。
大綱
<section>
一般性的區塊切割,必須輸出大綱條目。
<article>
定義文章內容或是特定文句區塊,必須輸出大綱條目。
<aside>
側邊欄區塊定義,必須輸出大綱條目。
<nav>
導覽連結內容配置區塊,必須輸出大綱條目。
<header>
區塊開始的區域,無論整個網頁或是某個區塊一開始的地方。
<footer>
區塊結束的區域,無論整個網頁或是某個區塊結束的地方。

表列的六組標籤,是切割區塊所需最基礎的元素,它們的用途很容易理解,而初學者比較容易混淆的是 <div> 與 <section> ,基本上以大綱輸出與樣式套用的目的來區隔兩者的用途即可。

大綱輸出還牽涉 <h1> ~ <h6> 這一組標籤的配置,在另外一篇裏面作說明。






沒有留言: