編寫語意標記
當您學習 HTML 與 Web 時，您可能會常常反覆遇到一個未被定義的特定詞彙。這個詞正是「語意 (semantic)」。
您可能會讀到像是「我們去尋找語意元素」或「我們嘗試盡可能語意化」之類的說明，但永遠無法清楚地了「語意」一詞的含義。
在本文中，我們將探索語意標記的世界，提出該術語的可行定義，並將概念應用於 HTML 標記的方式。
什麼是語意標記？
根據 Dictionary.com 的定義，「語意」是指某個詞語或句子的正確解釋或意義。
從語意上來使用詞語就是依照詞語的真正意義來使用它；當我們錯用詞語時，那麼我們就是在非語意地使用它。
許多 HTML 標籤具有語意意義。換句話說，這些元素本身就能告訴我們關於其中內容的一些資訊。
例如，當瀏覽器遇到一個h1標籤時，它能解釋此標籤表示h1元素的內容構成了包含該元素段落的主要標題。
h1 標籤的語意含義是用於識別特定網頁或段落中最重要的標題。
實現語意標記的兩種實踐方法
如果我們要撰寫語意標記，必須採用兩種不同的實踐方法：
- 語意標記需要依據 HTML 元素原本預期目的來使用。
- 語意標記需要將內容與呈現分開。
正確地使用 HTML 元素
在撰寫語意標記時，我們使用 HTML 標籤來向瀏覽器提供有關元素內容的資訊。在語意標記中，標籤不再僅僅是將內容以人類可讀的格式顯示在網頁上的方式。
這些標籤本身成為了一種向機器(無論是瀏覽器、電腦、智慧型手機或其他智慧型裝置)傳達內容意義的方式。
要撰寫語意標記，我們必須正確使用 HTML 標籤，以確保我們的標記既可供人類閱讀，又可供機器閱讀。
分離內容與呈現
過去，經常使用標記來定義樣式與網頁布局。
開發者可能會根據網頁在瀏覽器所呈現的視覺效果來選擇標題級別，而不是其真正的階層意義；表格可能被當作頁面布局的工具，而不是用來呈現資料；還有一些 HTML 標籤，如 frameset，其設計初衷就是用於網頁布局。
但當我們撰寫語意標記時，我們不能單純基於視覺呈現來選擇 HTML 元素，反而應該基於語意來選擇 HTML 元素，惟後使用 CSS 來定義內容的視覺呈現。
在撰寫語意標記時，網頁元素的呈現完全獨立於內容本身的標記之外。
定義語意標記
牢記這兩種做法，我們可以這樣定義語意標記：
語意標記是使用標記語言(如 HTML )，透過正確選擇標記元素來傳達文件中每個元素的意義，並保持文件中所包含元素的標記與視覺呈現間完全分離。
為什麼語意標記這麼重要？
對一般的網站瀏覽者，良好的 CSS 可以隱蔽不良的 HTML 標記。然而，無論多少樣式都不會使不良的標記對於電腦化訪客更有意義，如搜尋引擎的網頁爬蟲、瀏覽器翻譯工具或螢幕報讀軟體等輔助科技。
Bruce Lawson 指出，語意化地使用 HTML 元素可以「提高其無障礙性、可搜尋性、國際化及互通性 (interoperability) 」。換句話說，如果您希望您的網站可以對所有人開放、在搜索引擎中獲得較高的排名、服務全球的使用者，並且有效地與其他網站服務進行互動，那麼就必須使用語意標記。
語意標記是為了建立人類與電腦均可閱讀的網頁內容。當網頁能夠被人類與電腦同樣地良好地閱讀時，它就會變得更容易取用，因為電腦便可以更好地分析其內容、索引與交付，而開發者則可以更好地將不同資訊來源整合成新的網頁服務。
如何撰寫具有語意的標記？
我們透過正確選擇與使用 HTML 標籤，以及挑選能夠傳達標籤所標記內容的資訊標籤來書寫語意標記。
在 HTML 中有一些是具有語意的元素，而有一些則是非語意元素。非語意元素的例子含 div 與 span。這些標籤並不告訴電腦關於元素內容意義的任何資訊。
雖然非語意標籤在某些情況下很有用，但如果對於特定用途有適合的語意標籤，應優先使 用語意標籤，而不要倚賴非語意標籤。
許多語意標籤來自於由 Google 與 Opera 等公司對網頁標記的分析。他們觀察到許多網站使用 id 與 class 屬性來提示非語意元素內容含義。
例如，他們發現許多 div 元素看起來像這樣： <div id="nav">、<div id="header"> 與 <div id="footer"> 。這些發現可以幫助 W3C 識別並在 HTML5 中定義新的語意標籤，如 nav、header、footer、article 與 aside。我們可以將最常見與重要的語意元素分為四類：
- 文件結構標籤
- 文字意義標籤
- 媒體類型標籤
- 關聯性標籤
文件結構標籤
以往
div元素是網站中識別與分組各個網頁段落的主要方法。但隨著 HTML5 的問世，我們有幾個新的標籤可供使用，不僅可以用來分組屬性外，還提供了語意意義：
header：用於網頁標題的容器元素，通常用於網頁頂部，其中包含了網站標誌、標題元素，以及網站導覽。footer：用於網頁頁腳的容器元素，通常用於網頁底部，其中包含了作者資訊、聯絡方式、版權資訊，以及導覽連結與返回網頁頂部的連結。。main：高層級元素，用於包含單個網頁上唯一且不在多個網頁上重複出現的所有內容。nav：用來包含網站導覽連結區塊的元素。通常位於網頁的頂部與底部，也可能在側邊欄 (aside) 元素中使用。section：用來標示文件中的區段，例如章節或長文的主要段落。aside：用來識別與網頁主要內容相關但不是文件主要流程的內容。例如，aside元素可以包含部落格文章中某個術語的詞彙定義，或者與頁面內容相關的廣告。article：用來識別一個區塊的內容，適合在其他場合進行重複使用與共享，例如部落格文章或技術文章。
請參閱文件教學，以深入了解如何使用這些為網頁增加結構的語意標籤。
文字意義標籤
在網際網路初期，我們常看到這樣的標記如下：
<style> .italics { font-style: italic; } </style>
<p>Some paragraph content including one <span class="italics">italicized </span> word.</p>
現在，我們通常不會再使用上述的方式來編寫 HTML，因為
span元素並對瀏覽器或其他電腦訪客來說，無法提供巢狀於開始與結束標籤之間的文字意義或目的的任何資訊。與其使用非語意的span標籤，我們將在應該以斜體顯示的詞語周圍新增em標籤。透過使用em標籤，使用螢幕報讀軟體或存取內容的其他電腦訪客會理 解這些標籤是用來強調被標記的內容。em元素只是 HTML 標籤為文字內容增加語意意義的一個例子。其他例子含：
-
h1至h6：標題元素標籤用於識別應該顯示為標題的文字。h1為最高層級或最主要的標題，而h2到h6標題層級則按其重要性排序遞減。 -
strong：strong標籤所標記的文字被賦予額外的重要性，通常以粗體字體顯示。 -
mark：mark標籤用於強調特定上下文中具有重要性的文字，例如：它可以用於強調搜索結果頁面中所搜索的詞彙。 -
cite：cite元素用於識別某段內容的起源。 -
blockquote與q：blockquote與q(quote) 元素用於識別來自其他來源的直接引用文字。 -
time：time元素用於告知瀏覽器、網頁爬蟲與其他智慧裝置，特定內容以 24 小時制或特定的日期呈現。
媒體類型標籤
HTML5 也包含了三個標籤，用於識別標籤之間的媒體類型。這些標籤具有兩個目的：首先，它們會通知瀏覽器需要排隊處理使用特定的技術資源，如影片回放引擎；其次，他們為內容指派語意意義。
audio：用於在文件中增加一個或多個音訊內容來源，並允許瀏覽器根據訪客的設備與瀏覽器選擇最佳選項。video：類似於audio元素，但用於將影片內容增加到標記文件中。picture：用於允許網頁瀏覽器根據媒體查詢的結果，從可用選項中選擇最佳的影像。
你可以在 HTML5 Media 教學中了解更多有關嵌入音訊與影片元素的資訊。此外，我們有一篇關於在網頁上使用圖片的文章，也提供了更多關於何時使用
picture元素以及何時保持使用img元素的資訊。
關聯性標籤
在 HTML 中，有些元素用於顯示多個元素之間的關聯性。例如，使用有序列表 (
ol) 時，即告知瀏覽器該列表內的項目之間彼此有所關聯，應按特定的順序呈現。以下是一些常用於表示多個元素之間關聯性的元素：
-
ul：用於表示列表中的項目之間關係，並指示它們無須按特定順序。想要深入了解如何使用有序與無序列表，可以參考列表教學。 -
figure：允許將特定的內容(例詳見圖片、圖表或文本)與由 figcaption 標籤的標題分組在一起。透過在figure標籤之間巢狀標題與內容，識別了巢狀元素之間的關係。圖片頁面包含更多實作此標籤資訊。 -
address：用於將聯絡資訊與包含address元素的父元素關聯。例如，當新增到文章中時，address元素提供了文章作者的聯絡資訊。當新增到網頁頁尾時，address元素則識別了網頁擁有者的聯絡資訊。
結語
如果您剛開始接觸 HTML，建議您投入時間學習如何語意地使用這些不同 HTML 標籤。您不確定自己是否使用正確的標籤，不妨多花點時間進行研究。正如我們所觀察到的，使用正確的標籤使用是相當重要的。對於已經使用 HTML 一段時間的人，建議花時間去學習 HTML5 新加入的元素，以及如何正確地使用它們。過去幾年內，HTML 越來越複雜，誘使人們繼續使用帶有 class 與 id 屬性的 div 元素，但語意化的 HTML5 標籤提供了更好的無障礙性與可交互運作性方面的承諾，足以讓我們接受這些新的語意化元素。隨著網路與智慧型設備的普及，智慧型設備大量湧現，網路漸漸成為現代社會的一部分，讓我們越發認知到語意標記的重要性。網頁內容不再僅僅局限於桌上型電腦，只能使用少數的瀏覽器存取；如今，語意化網路正在我們周邊迅速成長。確保您所接觸的每一段標記都是語意化，您也為整個網路的持續成長發揮了作用。