1.1 標籤 <header>
HTML5 語意標籤幫助開發者創建更具結構性且易於閱讀的文件，同時改善可訪性和 SEO（搜尋引擎優化）。這些標籤提供了一個更清晰的方式來描述網頁的結構及其內容。以下我們將詳細介紹主要的語意標籤。
標籤 <header> 用於表示內容或部分的標題。這個元素通常包含介紹資訊、導航鏈接、徽標、標題和其他與內容頂部相關的元素。
使用範例：
HTML
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
主要特點：
- 位置: 標籤
<header>可以用於整個文件，也可以用於單個部分，如<article>或<section>。 - 內容: 通常包含標題、徽標、導航元素和其他介紹性元素。
1.2 標籤 <footer>
標籤 <footer> 用於表示內容或部分的底部。這個元素通常包含作者資訊、相關文件鏈接、隱私政策、聯繫資訊和其他與內容底部相關的元素。
使用範例：
HTML
<footer>
<p>© 2024 My Website</p>
<nav>
<ul>
<li><a href="#privacy">Privacy Policy</a></li>
<li><a href="#terms">Terms of Service</a></li>
</ul>
</nav>
</footer>
主要特點：
- 位置: 標籤
<footer>可以用於整個文件，也可以用於單個部分，如<article>或<section>。 - 內容: 通常包含作者資訊、法律資訊、導航鏈接和其他結尾元素。
1.3 標籤 <article>
標籤 <article> 用於表示獨立、自給自足的內容模塊，這些模塊可以被分發和重複使用。這可以是部落格文章、新聞文章、評論、用戶帖子等。
使用範例：
HTML
<article>
<header>
<h2>Blog Post Title</h2>
<p>Published on July 6, 2024</p>
</header>
<p>This is the content of the blog post. It can include text, images, and other media.</p>
<footer>
<p>Author: John Doe</p>
</footer>
</article>
主要特點：
- 獨立性: 標籤
<article>用於可以獨立使用和分發的內容。 - 結構: 通常包含標題（
<header>）、主要內容和結尾部分（<footer>）。
應用：
- 文章
- 部落格帖子
- 新聞
- 評論
優點：
- 標識獨立的內容片段
- 幫助搜尋引擎和其他服務識別和重複使用內容
1.4 標籤 <section>
標籤 <section> 用於定義內容的主題相關組。這可以是章節、部分或其他內容的大部分。與 <div> 不同，它僅用於樣式設定和分組而無語意意義，<section> 則有明確的語意意義。
使用範例：
HTML
<section>
<header>
<h2>About Us</h2>
</header>
<p>This section provides information about our company and its history.</p>
</section>
主要特點：
- 主題分組: 標籤
<section>用於將內容劃分為主題組。 - 結構: 通常包含標題（
<header>）和主要內容。
應用：
- 文章內部部分
- 主題相關內容組
- 頁面上可以邏輯分開的部分
優點：
- 改善文件的結構和可讀性
- 幫助搜尋引擎更好地理解和索引內容
GO TO FULL VERSION