html5语义化标签有哪些

作者：我在坚强也需要有人疼发布日期:2025-03-03 浏览:161

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 语义化标签示例</title>
</head>
<body>
    <!-- 文章头部 -->
    <header>
        <h1>HTML5 语义化标签示例</h1>
        <p>这是一个使用 HTML5 语义化标签的简单页面。</p>
    </header>

    <!-- 导航栏 -->
    <nav>
        <ul>
            <li><a href="#section1">部分1</a></li>
            <li><a href="#section2">部分2</a></li>
            <li><a href="#section3">部分3</a></li>
        </ul>
    </nav>

    <!-- 主要内容 -->
    <main>
        <section id="section1">
            <h2>部分1</h2>
            <p>这是第一个部分的内容。</p>
        </section>

        <section id="section2">
            <h2>部分2</h2>
            <p>这是第二个部分的内容。</p>
        </section>

        <section id="section3">
            <h2>部分3</h2>
            <p>这是第三个部分的内容。</p>
        </section>
    </main>

    <!-- 侧边栏 -->
    <aside>
        <h3>相关链接</h3>
        <ul>
            <li><a href="#">链接1</a></li>
            <li><a href="#">链接2</a></li>
            <li><a href="#">链接3</a></li>
        </ul>
    </aside>

    <!-- 文章底部 -->
    <footer>
        <p>&copy; 2023 HTML5 语义化标签示例</p>
    </footer>
</body>
</html>

解释说明：

<header>：用于定义文档或节的页眉，通常包含标题和导航链接。
<nav>：用于定义导航链接的部分。
<main>：表示文档的主要内容区域，每个页面应该只有一个 <main> 标签。
<section>：用于定义文档中的节（section），通常包含一个标题和相关内容。
<aside>：用于定义页面的侧边栏内容，通常是与主要内容相关的补充信息。
<footer>：用于定义文档或节的页脚，通常包含版权信息、联系信息等。

这些标签使得 HTML 文档结构更加清晰，有助于搜索引擎优化（SEO）和无障碍访问（Accessibility）。

上一篇：html 右对齐

下一篇：html可视化