從 HTML 4 到 HTML5
如果你在約20年前手寫 HTML,當時的主流是
HTML 4.01 或 XHTML 1.0。
那個年代通常使用 <div> 搭配
id 或 class,自行標示頁首、選單、
主要內容及頁尾。
這些名稱只有設計者自己知道其用途。瀏覽器及輔助工具看到的,
仍然只是四個沒有特定語意的 <div>。
HTML5 語意標籤的發展年代
-
1997~1999:
HTML 4.0/4.01 時代,頁面結構主要以
<div>、id與class自行定義。 - 2004: WHATWG 開始發展後來稱為 HTML5 的新一代 HTML, 希望讓 HTML 更適合現代網站與網頁應用程式。
-
2008:
W3C 發布 HTML5 第一份公開草案。
<header>、<footer>、<nav>、<article>、<section>、<aside>等語意標籤, 開始成為新標準的一部分。 -
2012~2013:
<main>比其他語意標籤稍晚出現。 它在2012年12月先成為獨立的 HTML5 擴充草案, 2013年再整合進 HTML 規格。 -
2014年10月28日:
HTML5 正式成為 W3C Recommendation。
包括
<main>在內的語意標籤, 正式納入完成版 HTML5。 - 2019年至今: HTML 主要改採 WHATWG 的 HTML Living Standard, 不再以 HTML5、HTML5.1、HTML5.2 這類大型版本為主, 而是持續更新同一份現行標準。
<main> 是較晚加入的標籤
<main> 不像
<header>、
<nav>、
<article> 那麼早出現在 HTML5 的發展過程。
它直到2012年底才以獨立擴充規格提出。
2013年5月,W3C 表示 <main>
已經整合進 HTML 規格,不再獨立發展;2013年8月的
HTML5 候選標準已經收錄它,2014年的 HTML5 正式標準則完整定義:
<main> 代表文件
<body> 裡最主要的內容。
現代 HTML 如何改寫頁面結構?
這些標籤通常不會自行改變視覺效果。它們主要讓瀏覽器、 搜尋引擎、螢幕閱讀器及閱讀原始碼的人,能直接理解各區塊的用途。
為什麼需要語意標籤?
改善無障礙: 螢幕閱讀器可以辨識主要內容、導覽列及頁面區段, 讓使用者略過重複的選單,直接前往正文。
讓結構更容易閱讀:
<main> 比
<div id="main"> 更直接;
<nav> 也比
<div class="menu"> 更容易理解。
協助機器理解內容: 搜尋引擎及其他工具可以分辨主要內容、導覽資訊、 獨立文章及補充內容,但使用語意標籤本身並不保證提高搜尋排名。
相關正式規格
W3C HTML5 正式標準: https://www.w3.org/TR/2014/REC-html5-20141028/
W3C 的 <main> 歷史規格:
https://www.w3.org/TR/html-main-element/
現行 WHATWG HTML Living Standard: https://html.spec.whatwg.org/
簡單說:你20年前使用
<div id="main"> 完全符合當時的主流;
<header>、<nav>、
<article> 等標籤約在2008年前後進入
HTML5 公開標準發展,而 <main>
則在2012年底提出、2013年整合、2014年正式定案。