彭彭學院

HTML5 語意標籤

彭彭網頁設計、排版2017-09-26

HTML5 的最新規格中,提供了一系列語意標籤(Semantic Elements),包括 <header>、<nav>、<main>、<footer>、<mark>、<time> 等等。若您已經具備網頁設計基礎,這些新標籤是非常容易上手的,請參考以下說明:

什麼是語意標籤?

假設您已經知道如何使用 <div> 和 <span> 進行網頁排版的工作(請參考 JavaScript 前端工程入門課程),那麼語意標籤和 <div>、<span> 在排版上具有完全一樣的特性,意即以下幾對 HTML 標籤在版面顯示上是完全相同的:

<div>Hello</div>
<header>Hello</header>
<main>Hello</main>
<footer>Hello</footer>

既然語意標籤和 <div> 有相同的排版特性,那為什麼要使用語意標籤呢?最大的目的,是讓搜尋引擎或是其他軟體工具,可以更清楚的了解網頁中每個區塊的設計目的,提升網頁生態圈的資訊交流,更便於分享、查詢,因此,也有增強網頁 SEO 的效果

語意標籤的使用時機 / 意義

  • <header>:網頁的標頭,通常放置網站標題。
  • <nav>:網頁的選單、導覽。
  • <main>:網頁的主要內容。
  • <aside>:網頁的側欄、附加內容。
  • <article>:一篇文章內容。
  • <section>:自訂的區塊,例如數篇摘要組成的空間。
  • <footer>:網頁的頁尾,通常放置聯絡方式、著作權宣告等等。
  • <mark>:強調一小塊內容。
  • <time>:顯示日期時間。

簡單的使用比較和範例

首先是使用 <div> 可能的網頁結構,除了基本元素之外,主內容展示一篇文章和側欄,頁尾則顯示網頁最後更新的時間:

<div class="header"></div>
<div class="nav"></div>
<div class="main">
    <div class="article"></div>
    <div class="aside"></div>
</div>
<div class="footer">
    Updated on <span class="time"></span>
</div>

接著改用語意標籤,語意標籤和 <div>、<span> 一樣,沒有預設樣式

<header></header>
<nav></nav>
<main>
    <article></article>
    <aside></aside>
</main>
<footer>
    Updated on <time></time>
</footer>

來點結語

無論技術如何演進,打好紮實的基礎永遠是最重要的工作。以語意標籤為例:對於已經掌握網頁排版技巧的人來說,是小菜一碟、錦上添花;反之,對不懂基礎排版的人,用處就很小。小小想法,與大家共勉 :)


返回前頁

回到上方

相關課程推薦