IT課程 HTML基礎 016_語義元素
語義元素
HTML5 引入了許多語義元素，這些元素的目的是提高文檔結構的語義性，使得文檔更具有可讀性、可維護性，並且對搜索引擎和開發者都更友好。
一個頁面結構通常包含：頁眉、頁腳、標題、導航、內容、側邊欄等等。
使用 <div> 元素 設計頁面布局：
[!小結]
- 不利於開發人員編寫代碼，當你面對滿屏幕的
<div>元素時，你很難快速分清楚他們所代表的含義。- 不利於搜索引擎優化（SEO），瀏覽器只知道你用了
<div>元素，而div元素本身不具有任何含義，它只是一個容器。
使用語義化元素 設計頁面布局：
使用 <header> <nav> <main> <aside> <footer> 來分別表示頁面中不同的區域，這些標籤讓頁面具有良好的語義和結構，從而方便開發人員和瀏覽器都能快速理解網頁內容。
| 元素 | 作用 |
|---|---|
<header> | 用於定義頁面的頭部區域，通常包括網站logo、主導航、全站鏈接以及搜索框。 |
<nav> | 用於定義頁面的導航鏈接部分區域。 |
<main> | 用於定義頁面的主體內容或主要功能部分，該內容在頁面中應該是獨一無二的。 |
<aside> | 用於定義頁面的側邊欄內容，該內容與主體內容相關，但可選。 |
<footer> | 用於定義頁面的頁腳區域，通常包括版權信息、聯繫信息以及其他相關信息。 |
<article> | 用於定義獨立的文章、文檔、頁面、應用或其他內容區域。 |
<section> | 用於定義網頁中一個通用獨立章節，一般會包含一個標題或段落、區塊。 |
<figure> | 用於定義獨立的圖像、圖表、照片等內容。 |
<figcaption> | 用於為 <figure> 元素提供標題或說明。 |
示例：
<!DOCTYPE html><html lang="en"><head> <title>我的網頁</title></head><body> <header> <h1>我的網頁</h1> </header>
<nav> <ul> <li><a href="#">主頁</a></li> <li><a href="#">關於我</a></li> <li><a href="#">聯繫我</a></li> </ul> </nav>
<main> <article> <h2>我的介紹</h2> <p>我的名字叫 XXX，這是一個語義化元素的示例。</p> </article> </main>
<aside> <h2>相關鏈接</h2> <ul> <li><a href="#">我的博客</a></li> <li><a href="#">我的 GitHub 主頁</a></li> </ul> </aside>
<footer> <p>版權所有 2023 XXX</p> </footer></body></html>效果：
此示例包含一個網頁，使用了 HTML5 的語義元素來描述網頁內容的含義。
<header>元素定義了頁面的頭部區域，包含網站logo 和主導航。<nav>元素定義了頁面的導航鏈接部分區域。<main>元素定義了頁面的主體內容，包含我的介紹文章。<aside>元素定義了頁面的側邊欄內容，包含相關鏈接。<footer>元素定義了頁面的頁腳區域，包含版權信息。
[!小結]
- 搜索引擎可以更好地理解網頁內容，提高網頁在搜索結果中的排名。
- 可以幫助殘障人士更輕鬆地理解網頁內容，提高網頁的可訪問性。
- 可以幫助開發人員更好地組織網頁結構，提高網頁的可維護性。