Semantic HTML是使用語義化標籤以描述HTML文件中內容的方式。這些標籤提供了更多的上下文，有助於搜索引擎和網頁閱讀器以及開發人員理解網頁內容的結構及意義。它們可以使網站更具可讀性、可維護性和可訪問性。
以下是一些常見的語義化標籤：
<header>：定義了網頁的標題
<nav>：定義了導航區域
<main>：定義了網頁的主要內容
<article>：定義了獨立的文章部分
<section>：定義了一個包含相關主題的區域
<aside>：定義了與頁面內容相關但不主要的部分
<footer>：定義了頁面底部的內容
舉例來說，在一個網頁中使用這些標籤：
<!DOCTYPE html>
<html>
<head>
<title>語義化HTML範例</title>
</head>
<body>
<header>
<h1>網頁標題</h1>
<nav>
<ul>
<li><a href="#">主頁</a></li>
<li><a href="#">關於我們</a></li>
<li><a href="#">聯絡我們</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>標題1</h2>
<p>這裡是一篇關於標題1的文章，詳細的描述了相關的內容。</p>
</article>
<section>
<h2>標題2</h2>
<p>這是一個包含相關主題的區域，將多個相關的文章放在一起。</p>
</section>
<aside>
<h3>廣告欄位</h3>
<p>這是一些與頁面內容相關的廣告。</p>
</aside>
</main>
<footer>
<p>版權聲明</p>
</footer>
</body>
</html>
這個例子中，使用了許多語義化的標籤來描述網頁的不同區域和結構，從而提高了網頁的可讀性和可維護性。
使用具有含義的標記 (例如，, , , 等) 來包裝網頁內容。
使用結構化元素標記 (例如，, , ) 來呈現有序或無序列表。
使用表格元素標記 (例如，, , ) 呈現表格形式的數據。
使用表單元素標記 (例如，, , ) 呈現表單，包括輸入框、下拉列表、單選框和複選框。
使用區塊元素標記 (例如，, ) 來分組網頁內容，並為語義化的標記提供支持。
使用語意化命名的樣式類別 (例如，.header, .sidebar, .footer) 增強樣式表，使其與HTML元素的語義化標記相對應。
在標題元素中使用適當的層級標題 (例如，, , )。
避免使用表格來呈現網頁佈局，可以使用CSS和其他元素來代替。
使用IMG元素的alt屬性為每個圖像提供描述性文本，以提高可訪問性和搜索引擎優化。
使用連接元素 (例如，) 給予適當的title和href屬性。
A)
B)
C)
D)
答案： D)
A)
B)
C)
D)
答案： A)
A)
B)
C)
D)
答案： A)
A)
B)
C)
D)
答案： C)
A)
B)
C)
D)
答案： A)