iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 14
1
Modern Web

前端路上那些重要與不重要的小事系列 第 14

Day14:小事之 HTML 語意化標籤 上篇

在 HTML5 中 新增了語意標籤,用意是:

  • 取代掉不具意義的 <div> 等tag
  • 用語意化標籤來加強文件的結構化。

HTML 5 中新增的 tag 其實參考了以往網頁設計師在設計網頁時所使用的 ID 或 class,但是因為 ID 與 class 的命名很容易有分歧,例如導覽列,你可能看過的寫法就有 <div class=“menu”><div class=“nav”><div class=“navigation”>,但這樣其實不利於團隊的專案管理,而 HTML5 新增的標籤則有助於管理,另外也有助於瀏覽器、搜尋引擎讀取網頁,有助於網頁的 SEO。

HTML5 所有新增的標籤可以參考這裡

下面就比較常用的標籤來做說明。
要注意的是,不要把以前用 div 加 class 的觀念,帶來新的標籤上使用,因為他們有各自定義的使用目的。

<header>

標題元素:預設為區塊元素,為文章或區塊定義標題。

一個頁面中可以有多個header。<header>是一容器,但裡面裝的東西應該只有區塊的標題或者摘要。另外,w3.org 中有提到 <header> 不能放在 <footer><address>或另一個 <header>裡面。

<nav>

導覽列。裡面裝的東西應該只有主要的navigation links,用來連結到網站其他頁面,或者連結到網站外的網頁。不要把各種link都丟到裡面。

<nav> 不可以放到<address> 裡面。

<main>

網頁的主要內容,一頁 HTML 只能出現一次。

<section>

文件中的一個群組或區塊。一般來說,section 裡面的應該是有意義且附帶標題的一段內容,裡面都會包含 title 或 heading。
不要把 當作 div 來使用,他們的使用目的不同。

<section>不可以放到<address> 裡面。

<article>

article 是獨立的區塊包含完整的內容,也必須帶有heading。
article跟section的區分是,article有更高的獨立性及完整性。

article 是可以獨立存在、具有完整內容、可獨立於網站其他部分的區塊;而section雖然也具有獨立表達內容的能力,但是對外層有一定的相依性。

例如:雜誌、部落格的文章、報紙文章等。

<aside>

aside 元素定義了除了內容之外的其他內容。例如:側邊欄。
aside 的內容應該與周圍的內容有相關性。

<figure>

figure 是一個有完整內容的區塊,是主要內容的一部分,可以任意移動位置而不影響整體內容的表達。例如:圖片與標題可以組合在 figure 元素裡。

<footer>

footer 代表一個區塊的結尾訊息。footer內通常會包含作者、版權等資訊。

善用 HTML5 標籤,可以讓網頁更有語意化,瀏覽器、搜尋引擎也會更易解讀、搜尋。
明天再繼續介紹對於 HTML5 標籤的選用,各位看倌明天見囉~

參考資料:
[1] https://www.w3.org/TR/2012/WD-html-markup-20121025/elements.html
[2] https://www.w3schools.com/html/html5_new_elements.asp


上一篇
Day13:小事之 HTML viewport 與 meta tag
下一篇
Day15:小事之 HTML 語意化標籤 下篇
系列文
前端路上那些重要與不重要的小事30

尚未有邦友留言

立即登入留言