歡迎來到語義網（Semantic Web）的世界！
在本章中，我們將探索資訊科技（Information Technology）中非常重要的一部分：語義網（Semantic Web）。別擔心這個術語聽起來很深奧！簡單來說，我們不再只是讓網站看起來「漂亮」，而是更專注於讓它們變得「聰明」。在看完這些筆記後，你將學會如何編寫讓電腦、搜尋引擎以及身心障礙人士都能完美理解的代碼。讓我們開始吧！
1. 什麼是語義化 HTML（Semantic HTML）？
在網路發展的早期，人們使用代碼僅是為了改變外觀（例如讓文字變大或變藍）。語義化 HTML 則不同，它是一種使用能夠描述內容含義（而非僅僅是外觀）的 HTML 標籤的做法。
為什麼這很重要？
當你使用正確的標籤時，你其實是在幫助多種不同的「使用者」：
1. 搜尋引擎： 像 Google 這類工具會利用語義化代碼來了解你的網頁內容。這就是所謂的搜尋引擎優化（SEO）。如果你使用 "header" 標籤來標記標題，Google 就會知道那是網頁中最核心的部分。
2. 輔助技術： 視障人士會使用螢幕閱讀器（Screen Readers）。這些設備會將代碼朗讀出來。語義化標籤能告訴螢幕閱讀器哪裡是導覽列，或者哪裡是文章的主體內容。
3. 更好的維護性： 對開發人員來說，閱讀和更新結構良好且具有語義的代碼要容易得多。
快速複習： 語義化代碼描述的是內容，而不是外觀。
2. 建構基石：結構元素
課程要求你必須熟悉定義網頁結構的特定標籤。你可以把它們想像成你數位房屋裡的「房間」。
關鍵結構標籤：
• <header> 和 <footer>： 這是頁面或特定區域的頂部與底部。標頭（header）通常包含標誌（logo），而頁尾（footer）則包含聯絡資訊或連結。
• <nav>： 代表導覽（navigation）。只在幫助使用者瀏覽網站的主要連結區塊使用此標籤。
• <main>： 標記該特定頁面的獨特內容。每個頁面通常只應有一個 <main> 標籤。
• <article>： 用於獨立的內容。如果你能將其複製並貼上到另一個網站上，且內容依然完整有意義（例如新聞報導或部落格文章），就應該使用 article 標籤。
• <section>： 用於將相關內容歸類在一起，就像書中的章節一樣。
• <aside>： 用於「側邊」的內容。它與主要內容相關，但不是重點，例如包含額外事實或廣告的側邊欄。
重點總結： 使用這些標籤能為電腦建立一份清晰的網頁地圖。
3. 通用容器：當「意義」缺失時
有時候，你只是為了設定樣式（例如在隨機的一堆物件周圍加上框線）而需要將元素組合在一起，但沒有適合的語義標籤。在這種情況下，我們使用非語義化容器：
• <div>： 一個區塊級（block-level）容器。它會從新的一行開始，並佔據可用的整個寬度。
• <span>： 一個行內（inline）容器。它保持在同一行，且只佔用文字內容所需要的空間。
別擔心這個部分： 只要記住 <div> 和 <span> 本身沒有任何含義。只有在沒有其他合適的語義標籤（如 <article> 或 <nav>）可用時，才使用它們。
4. 為文字賦予含義
語義化標記不僅適用於大型區塊，對單詞也同樣重要！以下是如何為文字添加語義：
• 重要性 (<strong>)： 用於非常重要的文字。瀏覽器通常會將其設為粗體。
• 強調 (<em>)： 當你想強調某個詞（就像你說話時改變語氣）時使用。瀏覽器通常會將其設為斜體。
• 引用： 使用 <blockquote> 進行長篇引用，使用 <q> 進行簡短的行內引用。
• 縮寫 (<abbr>)： 幫助解釋縮寫詞（例如 "NASA"）的全稱。
• 引註與定義： 使用 <cite> 引用作品標題（如書名），使用 <dfn> 定義新術語。
• 地址 (<address>)： 專門用於文件作者或所有者的聯絡資訊。
• 標記 (<mark>)： 用於高亮顯示文字，就像在紙上使用螢光筆一樣。
5. 圖表與標題
當你添加一張圖片、圖表或代碼片段，且它是「獨立存在」的（意味著即便脫離主文，其目的依然明確），就應該使用 <figure> 標籤。
若要為該 figure 添加標題或說明，請在 figure 標籤內使用 <figcaption> 標籤。
你知道嗎？ 使用 <figcaption> 比單純在圖片下方放置一個段落要好得多，因為它能為螢幕閱讀器在圖片與說明文字之間建立永久性的連結。
6. WAI-ARIA：無障礙設計的額外輔助
有時候 HTML 標籤不足以解釋複雜的網頁功能（如彈出式選單或載入條）。這就是 WAI-ARIA（網頁無障礙倡議 – 無障礙豐富網路應用程式）發揮作用的地方。它提供了額外的「屬性」來幫助輔助技術。
考試重點：
• 角色（Roles）： 告訴電腦該元素是什麼（例如 role="button" 或 role="search"）。
• 狀態與屬性（States and Properties）： 告訴電腦元素的當前狀態（例如核取方塊的 aria-checked="true"）。
• 即時區域（Live Regions）： 這非常酷！它們告訴螢幕閱讀器在變更發生時立即進行播報，而無需使用者重新整理頁面（例如「新訊息」提醒）。
• 增強鍵盤導航： ARIA 有助於確保無法使用滑鼠的使用者能僅透過「Tab」和「Enter」鍵進行完整瀏覽。
要避免的常見錯誤： 不要過度使用 ARIA！「ARIA 的第一原則」是：如果可以使用原生的 HTML 標籤（例如 <button>），就使用該標籤，而不是透過 ARIA 把其他元素硬改成按鈕。
期末快速複習箱
1. 語義化 HTML = 含義。
2. 結構標籤包括 <header>, <nav>, <main>, <article>, <section>, <aside> 和 <footer>。
3. 非語義化標籤（如 <div>）僅用於樣式設定。
4. SEO 與無障礙設計是我們使用語義網的兩大主因。
5. WAI-ARIA 為複雜功能添加額外標籤，以協助螢幕閱讀器。