Day6 HTML中的語意化標籤及其在網頁結構的應用

2024 iThome 鐵人賽

DAY 6

自我挑戰組

從零開始的ＨＴＭＬ系列第 6 篇

16th鐵人賽

s_c_o_t_t

團隊iT 貓貓教

2024-08-17 23:05:14

150 瀏覽

分享至

HTML中的語意化標籤是用來賦予網頁內容更多語義的標籤，這些標籤不僅能幫助開發者和設計師更好地理解網頁結構，還能讓瀏覽器和搜索引擎更有效地解析網頁內容。這些標籤的命名直觀，能夠反映它們的用途和功能。以下是幾個常見的語意化標籤及其在網頁結構中的應用：

<header>：表示頁面的標頭部分，通常包含網站標誌、導航欄或其他介紹性內容。每個主要段落或章節也可以有自己的<header>。
<footer>：表示頁面的底部，通常用來放置版權信息、聯絡方式、網站地圖等。
<nav>：表示導航欄，用於包含網站內部或外部連結的部分，如主菜單或頁面內部的跳轉連結。
<section>：表示頁面中的一個章節或區塊，通常用來將頁面內容分為不同的主題部分。
<article>：表示一個獨立的文章或內容塊，通常是具備自我完結性的內容，如新聞文章、部落格文章或論壇帖子。

範例：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>語意化標籤範例</title>
</head>
<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>

    <section>
        <article>
            <h2>新聞標題</h2>
            <p>這是一則新聞文章的內容，介紹當前的新聞事件。</p>
        </article>

        <article>
            <h2>部落格文章標題</h2>
            <p>這是一篇部落格文章，介紹個人的經歷或想法。</p>
        </article>
    </section>

    <footer>
        <p>版權所有 © 2024 我的網站</p>
    </footer>

</body>
</html>

應用：

在這個範例中，<header>包含了網站的標題和導航欄；<section>用來組織頁面的主要內容，包含兩篇獨立的<article>，每篇文章都有自己的標題和內容；<footer>則放置了版權信息。使用這些語意化標籤有助於提升網頁的可讀性和結構清晰度，並且有利於SEO和無障礙瀏覽器的解析。