HTML <main> 标签

Begindev 编辑部 March 25, 2026

<main> 标签是语义化 HTML 中的关键元素，用作网页主要内容的容器。

通过清晰地为用户和搜索引擎定义页面的主要主题，它显著增强了无障碍性和 SEO 表现。理解并正确实现 <main> 标签有利于构建结构良好且易于维护的网站。

1. 理解 `<main>` 标签

<main> 标签指定了文档的主体内容。<main> 元素内部的内容对于该文档来说应该是唯一的，并且排除在多个文档中重复出现的内容，例如站点导航、页眉、页脚和侧边栏。

关键特征

唯一性：一个文档中应该只有一个 <main> 元素。虽然浏览器在技术上可能渲染多个 <main> 标签，但在语义上这是不正确的，也是糟糕的做法。
排除重复内容：<main> 标签不应包含网站多个页面上重复的内容。这包括导航菜单、页眉、页脚和侧边栏。
无障碍性：屏幕阅读器和其他辅助技术使用 <main> 标签来快速识别并跳转到页面的主要内容（“跳过导航”功能的基础）。
SEO 优势：搜索引擎使用 <main> 标签来理解页面的主要主题，这有助于提高搜索引擎排名。

2. 正确用法

<main> 标签应放置在 HTML 文档的 <body> 标签内。它应包裹页面的中心主题或目的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>包含 main 标签的示例</title>
</head>
<body>
    <header>
        <h1>我的网站</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>欢迎来到我的网站</h2>
            <p>这是我网站的核心内容。它包含关于我公司提供的服务信息。</p>
        </article>
    </main>
    
    <footer>
        <p>© 2024 我的网站</p>
    </footer>
</body>
</html>

在这个例子中，<main> 标签包裹了 <article> 元素，其中包含页面的主要内容。页眉、导航和页脚被排除在 <main> 标签之外，因为它们通常在多个页面中重复出现。

错误用法

多个 <main> 标签：在一个文档中使用超过一个 <main> 标签在语义上是不正确的。
包含重复内容：将页眉、页脚、导航菜单或侧边栏包含在 <main> 标签内。
嵌套在其他结构标签内：避免将 <main> 嵌套在 <header>、<footer>、<nav> 或 <aside> 内部。它应该是这些元素的兄弟元素，而不是子元素。

3. 实战示例与演示

让我们探索一些实际示例，说明在不同场景下 <main> 标签的正确用法。

3.1 示例 1：博客文章

考虑一个博客文章页面。主要内容是博客文章本身。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>博客文章</title>
</head>
<body>
    <header>
        <h1>我的博客</h1>
        <nav>...</nav>
    </header>
    
    <main>
        <article>
            <h2>语义化 HTML 的重要性</h2>
            <p>发布于：2024年8月16日</p>
            <p>语义化 HTML 对网络无障碍性至关重要...</p>
            <img src="semantic-html.jpg" alt="语义化 HTML 示例">
        </article>
    </main>
    
    <aside>
        <h3>相关文章</h3>
        <ul>...</ul>
    </aside>
    
    <footer>...</footer>
</body>
</html>

在此例中，<main> 包含代表博客文章的 <article> 元素。包含相关文章的 <aside> 元素位于 <main> 之外，因为它是补充内容。

3.2 示例 2：电商产品页面

在电商网站上，产品页面的主要内容是产品详情。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>产品页面</title>
</head>
<body>
    <header>...</header>
    
    <main>
        <article>
            <h2>超酷 T 恤</h2>
            <img src="t-shirt.jpg" alt="超酷 T 恤">
            <p>价格: $25.00</p>
            <p>描述: 这是一件由 100% 纯棉制成的 T 恤。</p>
            <button>加入购物车</button>
        </article>
    </main>
    
    <aside>
        <h3>客户评价</h3>
        <p>很棒的产品！ - 张三</p>
    </aside>
    
    <footer>...</footer>
</body>
</html>

这里，<main> 标签包裹了包含产品详情的 <article> 元素。客户评价被放置在 <main> 标签之外的 <aside> 元素中。

3.3 示例 3：着陆页 (Landing Page)

软件产品的着陆页可能会使用 <main> 标签来包裹关于产品的核心信息和号召性用语 (Call to Action)。

<body>
    <header>...</header>
    
    <main>
        <section>
            <h2>满足您需求的革命性软件</h2>
            <p>我们的软件帮助您简化工作流程...</p>
            <button>开始免费试用</button>
        </section>
    </main>
    
    <footer>...</footer>
</body>

在这种情况下，<main> 标签包含一个带有着陆页主要内容的 <section> 元素。

3.4 总结

<main> 标签是一个基本的语义化 HTML 元素，用于定义网页的主要内容。正确使用 <main> 标签可以改善无障碍性、SEO 以及 HTML 文档的整体结构。

请记住：每页只使用一个 <main> 标签，并排除任何在多个页面上重复的内容。

1. 理解 <main> 标签