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]