HTML5 語意標籤

寫了一陣子 HTML ,還是用 <div> 作為切分元素的單位?

我想,是時候瞭解 HTML5 的語意元素(Semantic Elements)了!

HTML5 語意標籤(Semantic Elements)

在 HTML5 以前,開發者常常用區塊元素 <div>行內元素 <span> 作為網頁元素的最小單位,搭配合適的 classid 刻出整個網頁,這也是許多初學者一開始認識 HTML 的過程。

你我可能都寫過這樣的網頁架構:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="header">
<h1>頁首標題</h1>
<ul class="nav">
<li>導覽項目 1</li>
<li>導覽項目 2</li>
<li>導覽項目 3</li>
</ul>
</div>
<div class="sidebar">側欄內容</div>
<div class="content">
<div class="section">
<div class="article">
<h3>文章標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid temporibus quae voluptatem dignissimos hic nulla laudantium at! Assumenda, ducimus amet?</p>
</div>
</div>
</div>
<div class="footer">頁尾</div>

這樣的寫法並沒有什麼不對,但是, <div><span> 不像 <a> 等元素,可以對瀏覽器表達該元素的內容屬性,好比 <a> 定義了連結, <img> 定義了圖片,而 <h1> 定義了大標題(通常一個網頁頁面只會有一個 <h1>)。

換句話說,就表示網頁架構的功能來看, <div><span> 並沒有任何意義,也不具備搜尋引擎最佳化(Search Engine Optimization,SEO)的優勢。對開發者來說,我們還要借助 classid 來為元素命名語意,實際上多此一舉。

因此,HTML5 新增許多語意標籤(Semantic Elements),只要掌握這些自帶意義的元素,我們不僅能快速建構一個完整的 HTML 頁面、檢閱程式碼,也有利於搜尋引擎辨識網頁的內容架構,提升 SEO 的效果。

我們可以將上面的範例程式碼轉化成語意標籤,大概會是這個樣子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<header>
<h1>頁首標題</h1>
<nav>
<ul>
<li>導覽項目 1</li>
<li>導覽項目 2</li>
<li>導覽項目 3</li>
</ul>
</nav>
</header>
<aside>側欄內容</aside>
<main>
<section>
<article>
<h3>文章標題</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid temporibus quae voluptatem dignissimos hic nulla laudantium at! Assumenda, ducimus amet?</p>
</article>
</section>
</main>
<footer class="footer">頁尾</footer>

是不是看起來簡潔多了?

下面這張圖比較 HTML4 與 HTML5 針對一個部落格頁面所建立的網頁元素結構:

HTML4與HTML5網頁元素結構比較

The <header> element specifies a header for a document or section.(W3C)

顧名思義, <header> 可以是整個網頁的頁首,也可以是一個 <section> 裡面的頭部區塊。

通常頭部區塊會包含網站標題、副標題、 LOGO 以及導覽列 <nav>

The <nav> element defines a set of navigation links.(W3C)

<nav> 指的是網站的主要導覽列,通常一個網頁只會有一個 <nav> ,若網頁中包含其他導覽列(如側欄導覽列),會以 class 另外命名。

main

<main> defines the page’s main content. It shouldn’t be enclosed in any of the sectioning tags…
There should only be one <main> tag on each page.(Viking Code School)

<main> 指的是網頁頁面的主要內容,和 <h1> 類似,通常一個網頁只會有一個 <main> 元素,自然不可能被包覆在 <section> 中。

aside

The <aside> element defines some content aside from the content it is placed in (like a sidebar).(W3C)

<aside> 指的是與主要內容 <main> 不太相關的區塊,通常是用來放其他內容(如簡介、廣告、次導覽列或相關連結等)的側邊欄位。

section

The <section> element defines a section in a document.(W3C)

<section> 指的是自訂的區塊,可以搭配 class 作更細緻的命名,譬如一個形象網頁的 Introduction 到最後的 Contact Information:

1
2
3
4
5
<section class="intro"></section>
<section class="product"></section>
<section class="service"></section>
<section class="user-sharing"></section>
<section class="contact"></section>

<section> 通常會包覆一個 <header> 說明該區塊的資訊。我認為 <section> 是有結構意義的 <div> ,一個網頁中可以有許多 <section> ,而 <section> 也可以包覆另外一個 <section>

article

The <article> element specifies independent, self-contained content.(W3C)

<article> 顧名思義是一篇文章,但事實上它也可以指自成一格、獨立的內容,譬如一段留言或一段主題討論。

<section> 相仿,<article> 通常會包覆一個 <header> 說明該區塊的資訊,一個網頁中也可以有許多個 <article>

由於我們無法根據 <section><article> 的定義去規範明確的巢狀規則,因此,在實務上,我們可能會看到 <section> 裡面有 <article> ,或 <article> 裡面有 <section> 的狀況。

The <footer> element specifies a footer for a document or section.(W3C)

同樣的, <footer> 可以是整個網頁的頁尾,也可以是一個 <section> 裡面的尾部區塊。

通常尾部會包含作者、版權、使用條款、聯絡方式等資訊。

HTML5語意元素建構的網頁輪廓

最後,引用這張圖片來總結:

HTML5語意標籤結構

參考資料

  1. Viking Code School:HTML5 Semantic
  2. W3C:HTML5 Semantic Elements
JavaScipt 陣列方法的 20 道陰影 Weird-JavaScript 40:所有東西都是物件(或純值)

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×