HTML5 标签 <main> 的介绍与实例

什么是 <main> 标签？
<main> 是 HTML5 中的语义化标签，用来表示文档或应用程序的主要内容（main content）。
主要内容区域指页面中独有的、区别于侧边栏、导航栏、版权信息、网站 Logo 等重复模块的核心部分。

一个 HTML 文档中只能有一个隐式或显式的 <main> 元素，并且它不能是以下元素的子元素：
<article>、<aside>、<footer>、<header> 或 <nav>。

为什么使用 <main>？

可访问性（Accessibility）：屏幕阅读器和辅助技术可以通过 <main> 快速定位到页面的核心内容，提供“跳转到主要内容”的快捷键。
语义化（Semantic）：使代码结构清晰，对开发者友好，便于维护和 SEO（搜索引擎优化）。
唯一性：明确文档的核心主体，区分页眉、页脚和导航等重复区域。

基本使用实例

下面是一个最简单的页面结构示例，展示了 <main> 如何包裹文章主体：

<body>
    <header>网站标题 & 导航</header>

    <main>
        <h2>今天的新闻</h2>
        <p>这里是文章的主要内容……</p>
    </main>

    <footer>版权信息 & 联系方式</footer>
</body>

结合其他 HTML5 标签的实例

在一个典型的博客文章或新闻页面中，<main> 经常包裹 <article>，而侧边栏使用 <aside> 表示。注意 <main> 不可嵌套在 <aside> 等元素内。

<body>
    <header>
        <h1>我的技术博客</h1>
        <nav>...</nav>
    </header>

    <main>
        <article>
            <h2>理解 HTML5 语义化</h2>
            <p>发表于 <time datetime="2025-02-26">2025-02-26</time></p>
            <p>语义化标签让网页结构更有意义……</p>
        </article>

        <section>
            <h3>相关文章推荐</h3>
            <ul>
                <li><a href="#">HTML5 新特性一览</a></li>
                <li><a href="#">使用 main 标签提升可访问性</a></li>
            </ul>
        </section>
    </main>

    <aside>
        <h3>关于作者</h3>
        <p>前端开发者，热爱 Web 标准。</p>
    </aside>

    <footer>...</footer>
</body>

适用表格的实例：<main> 与页面区域对比

下面的表格总结了 <main> 与其他常见结构标签的区别和使用场景（数据对比）：

标签	代表内容	出现次数	是否可以包含 <main>	典型使用位置
<main>	文档唯一核心内容	每页一次	— (自身)	直接作为 body 子元素，包裹文章、列表等主体
<header>	页眉，介绍性内容或导航	多次 (每个区块可有自己的头部)	否	页面顶部，或 article、section 的头部
<footer>	页脚，作者信息、版权等	多次	否	页面底部，或 article、section 的尾部
<nav>	导航链接区域	多次	否	主导航栏、目录菜单
<aside>	侧边栏，与主要内容间接相关	多次	否	侧边栏、广告、相关链接
<article>	独立自包含的内容 (如帖子、新闻)	多次	否 (但 main 可包含 article)	论坛帖子、博客正文、评论
<section>	通用的主题分区	多次	否	对内容分组，如章节、选项卡

注意：<main> 不能是 <article>、<aside>、<footer>、<header> 或 <nav> 的后代。

关于 <main> 的注意事项

唯一性：不要在一个文档中出现多个 <main>（除非使用 hidden 属性隐藏多余的，但通常不推荐）。
兼容性：所有现代浏览器均支持 <main>。IE 11 以下不支持，但可通过 CSS 设置 display: block 修复（但此处不涉及 CSS）。
省略 <main> 的影响：页面依然可以工作，但失去了语义化和可访问性的便利。
最佳实践：为 <main> 设置一个跳转锚点（例如添加 id="main-content"），配合“跳过导航”链接使用，但本示例仅展示纯 HTML，故未加样式/交互。

总结

<main> 是 HTML5 中简单但极其有用的语义标签。它帮助开发者清晰地划分文档结构，
同时为残障用户提供了便捷的导航方式。结合 <article>、<section> 等标签，
可以构建出既标准又易于理解的网页。在使用时牢记唯一性及嵌套规则，即可充分发挥其作用。

❤️收藏 👍点赞