3.1 標籤 <main>
HTML5 引入了很多新的語意元素，這些元素幫助開發者創建更有結構和易於理解的網頁。其中特別重要的是 <main> 和 <aside> 標籤，分別用來創建主要內容和附加內容的容器。
標籤 <main> 表示文件的主要內容。它用於放置該頁面的獨特和關鍵內容。放在 <main> 標籤內的內容應當是每個頁面獨特的，不應包含在所有頁面都重複的元素，比如徽標、側邊欄、導航鏈接或頁腳。
語法：
HTML
<main>
<!-- 頁面的主要內容 -->
</main>
使用範例：
HTML
<body>
<header>
<h1>網站頭部</h1>
<nav>
<ul>
<li><a href="#home">主頁</a></li>
<li><a href="#about">關於我們</a></li>
<li><a href="#contact">聯繫我們</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章標題</h2>
<p>這是文章的主要內容。</p>
</article>
</main>
<footer>
<p>© 2024 範例網站</p>
</footer>
</body>
主要特點：
- 內容：標籤
<main>應包含此頁面獨特的主要內容 - 位置：頁面上應只有一個
<main>標籤 - 可訪問性：標籤
<main>改善頁面的可訪問性，幫助輔助技術（例如螢幕閱讀器）更快找到主要內容
應用：
- 頁面的主要內容
- 與當前頁面相關的獨特內容
優點：
- 語意標記：幫助搜尋引擎和輔助技術理解頁面的主要內容
- 改善頁面結構：清楚地將主要內容與頁面的其他部分分開，如標題、側邊欄和頁腳
特點：
- 應包含頁面的獨特內容
- 不應包含在其他頁面重複的元素（如導航欄、側邊欄、頁腳）
3.2 標籤 <aside>
標籤 <aside> 用於表示與主要內容相關的附加內容，但不屬於文件的主要流。通常用於包含廣告、相關文章鏈接、作者簡歷和其他輔助元素的側邊欄。
語法：
HTML
<aside>
<!-- 附加內容 -->
</aside>
使用範例：
HTML
<main>
<article>
<h2>文章標題</h2>
<p>這是文章的主要內容。</p>
</article>
<aside>
<h3>相關文章</h3>
<ul>
<li><a href="#related1">相關文章 1</a></li>
<li><a href="#related2">相關文章 2</a></li>
</ul>
<h3>關於作者</h3>
<p>作者的簡短介紹。</p>
</aside>
</main>
主要特點：
- 內容：標籤
<aside>包含與主要內容相關的附加信息，但不屬於文件的主要流。 - 位置：可放置在
<main>標籤內或外，取決於上下文。 - 應用：用於側邊欄、廣告塊、相關文章的鏈接和其他輔助信息。
應用：
- 包含附加信息的側邊欄
- 廣告塊
- 相關資源的鏈接
- 與主要內容相關的附加材料
優點：
- 語意標記：幫助搜索引擎和輔助技術理解這是相對於主要內容的輔助內容
- 改善頁面結構：清楚地將附加內容與主要內容分開，使頁面更具組織性和易於理解
特點：
- 包含與主要內容相關但不屬於其內容
- 可用於側邊欄、廣告塊、訂閱和其他附加材料
GO TO FULL VERSION