html中的main标签

作者：Xn﹏仍嘫佷痌发布日期:2026-07-16 浏览:82

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML中的main标签示例</title>
</head>
<body>
    <!-- main标签用于定义文档的主要内容，每个页面只能有一个main标签，并且它不应该包含在article、aside、footer、header、nav或另一个main标签中 -->
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>文章标题</h2>
            <p>这是文章的内容。使用main标签可以明确标识出页面的主要内容区域。</p>
        </article>
        <section>
            <h2>相关资源</h2>
            <ul>
                <li><a href="#">资源链接1</a></li>
                <li><a href="#">资源链接2</a></li>
                <li><a href="#">资源链接3</a></li>
            </ul>
        </section>
    </main>

    <footer>
        <p>&copy; 2023 网站名称</p>
    </footer>
</body>
</html>

解释说明：

main 标签用于定义文档的主要内容区域。每个页面只能有一个 main 标签，并且它不应该包含在 article、aside、footer、header、nav 或另一个 main 标签中。
在上面的示例中，main 标签包含了两个子元素：一个 article 和一个 section，分别表示文章和相关资源。
使用 main 标签有助于提高网页的语义化，使内容结构更加清晰，对搜索引擎优化（SEO）和辅助技术（如屏幕阅读器）也有帮助。

上一篇：html5制作简单的网页

下一篇：html5源码