學習前端開發已經兩年多了，在與團隊開發合作的時候，常常看見同仁會從頭到尾使用 <div> 來開發網頁，雖然同樣達到了效果，但作為推廣無障礙的一份子，加上
近期開始著手翻譯 MDN 的文件，所以決定在翻譯的過程中，也來寫一系列關於無障礙的文章，作為自己的學習筆記。
什麼是語義?
在台灣，我們把 semantic HTML 翻譯成「語意化 HTML」，不過若以中文的意思來看，「語義」似乎是比較貼近英文的，維基百科針對「語義」的解釋是「語言本身單位具有的意義」； 而「語意」是指「語言單位融入個人主觀思想後所表達的意思」，因此我更傾向把 semantic HTML 翻譯成「語義化 HTML」。
那什麼是「語義化 HTML」，在網頁開發中，每一個標籤可以視為一個區塊，最常使用的莫過於使用 <div>，我們可以透過它來做區塊，來包裹文章或者包裹清單等，大概可以呈現如下。
<!-- 作為文章區塊 -->
<div>
<h1>這是一個標題</h1>
<p>這是一段文字</p>
<p>這是一段文字</p>
<p>這是一段文字</p>
<p>這是一段文字</p>
</div>
<!-- 作為結構上的區塊 -->
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>上述使用 <div> 來規劃 HTML 依舊可以達到建立網頁的目的，但對於螢幕閱讀器使用者來說，當他們聽到閱讀器唸出來的卻無法正確解讀網頁結構；想像一張地圖，但看到的卻是同樣的標記，同樣的顏色，
無法正確判斷目前的方位。
這也是為什麼要使用語義化的 HTML 撰寫網頁結構，它能夠更直覺地開發，例如使用 <nav> 一看就知道這個標籤代表著 「Navigation」，意思不言而喻，而螢幕閱讀器唸出來的也會是如此，這樣視障人士就能夠知道目前所在位置是導覽列。
而無障礙的意義並不是說特別建立什麼來符合某種人士，更廣義來說是建立讓每一種人都可以輕易使用的產品，從 HTML 開始則是最基礎以及最容易被應用的。
基本的結構
一個網頁幾乎都會以下主要的標籤：
<nav>
這個標籤的主要目的就是將提供導航的，但不是說所有導航都一定要使用這個標籤，例如頁尾(footer)裡面的一些連結，就不需要。在實務上，通常一個頁面的主要導航使用這個標籤即可。
<header>
當我們訪問一個網頁，你可能會看到一個介紹性的區塊或是導航輔助的區塊，你可以用這個標籤包裹上述的導航列。若 <header> 在頂層，會被自動賦予 role=banner 的角色，但如果它被其他標籤包覆，就不自動賦予 banner 角色，
螢幕閱讀器遇到頂層的 <header> 時會將其識別為主要橫幅區域。
<!-- 這邊的 header 會自動賦予 role=banner -->
<body>
<header>Welcome</header>
<main>Main content</main>
</body>
<!-- 這邊的 header 不會自動被賦予 role=banner -->
<body>
<main>
<article>
<header>Welcome</header>
</article>
</main>
</body><main>
一個網頁最重要的部分，且應該是獨一無二的，它的行為就如 role=main 一樣，輔助工具可以快速識別並且導航使用者到分段中。
<aside>
如果一個段落中，如果有某些資訊是獨立的，與主要資訊無關，或者一個頁面中獨立出來的一個區塊，例如側邊欄，都可以使用這個標籤。
<footer>
之前我都誤以為只有一個頁面的最根部的內容可以使用這個標籤，不過經過更仔細閱讀之後發現，它也能用在一個內容區塊中。如果在一個頁面的頁尾，它會被自動賦予 role=containinfo，但如果是在一個內容區塊中，就不會被賦予該角色。
<!-- 這裡的 footer 的 role 是 containinfo -->
<body>
<header>
<nav>...</nav>
</header>
<main>
<h2>Title 2</h2>
</main>
<footer>© 2025 haha</footer>
</body>
<!-- 這裡的 footer 的 role 是 generic -->
<article>
<h2>Title 2</h2>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<footer>© 2025 haha</footer>
</article>其他如 <article>、<section>、<span> 就不再贅述，最重要的重點在於，能夠使用語義化的標籤，使網頁原始碼更具備可以辨識的語義，不僅在開發上會方便(語義化標籤帶有預設的無障礙功能)，
對螢幕閱讀器使用者來說，等於是提供了一幅可以被理解的地圖。
A11y 系列文 HTML 可能規劃如下
role是什麼？img與alt- 前端的好夥伴 -
form