HTML5 的語意標記,不是告訴搜索引擎現在網頁的內容,HTML5 語意標記是屬於區塊性質的元素(Sectioning Elements),用來告訴搜索引擎這段區塊的意義。

我們就從比較一下語意標記的元素與語意標記的元素開始說起

  • div<span> 這些都是算是沒有語意的元素
  • <form><table><article> 這些都是算是有語意的元素

而 HTML5 常用的語意標記如下

標記 說明
<article> article 的內容,應該是獨立的與網頁的其他內容無關。 常用的範例如: 論壇文章、部落格文章、新聞、評論等等..
<aside> 網頁內容的附加資訊
<details> 關於文件的描述,通常該內容也可以被隱藏
<summary> 定義 <details> 的內容摘要
<figure> 用來組織具有標題的獨立內容, 通常與 <image>, <figcaption> 一起使用
<figcaption> <figure> 裡面的標題標記
<footer> 頁尾
<header> 頁頭
<main> 用於標記網頁內的主要內容,一個頁面最多只能有一個<main>,而且不能放在 <article>, <aside>, <footer>, <header>, <nav> 裡面
<mark> 標註重點文字
<nav> 導覽區域的標記
<section> 區塊標記,像是章節區塊、標頭區塊等等..
<time> 時間標記

語意標記詳細列表 HTML Element Reference

舉個 <article> 的例子,如下方程式碼,對搜索引擎與開發者來說,都能夠很清楚的了解,這是一段文章的區塊。

article sample
  • html
1
2
3
4
5
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>

小結

HTML5 語意標記雖然不是讓搜索引擎擷取內容的資料,但是卻可以讓搜尋引擎了解網頁配置的邏輯。

延伸閱讀

[HTML5 Semantic Elements]
[A free guide to HTML5 head elements]