編寫語意標記
當您學習 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 標籤提供了更好的無障礙性與可交互運作性方面的承諾，足以讓我們接受這些新的 語意化元素。隨著網路與智慧型設備的普及，智慧型設備大量湧現，網路漸漸成為現代社會的一部分，讓我們越發認知到語意標記的重要性。網頁內容不再僅僅局限於桌上型電腦，只能使用少數的瀏覽器存取；如今，語意化網路正在我們周邊迅速成長。確保您所接觸的每一段標記都是語意化，您也為整個網路的持續成長發揮了作用。