必须唯一且不能嵌套在、或内，因其代表整页唯一主体内容容器，与可复用的语义冲突；用于独立可分发内容，用于有标题的逻辑区块；和可重复用于区块级内容。

必须唯一，且不能嵌套在 <article></article>、<section></section> 或 <nav></nav> 内部

——这是最容易被忽略的硬性约束，违反会导致无障碍访问逻辑断裂、SEO识别错位。

为什么 <main></main> 不能嵌套在 <article></article> 里？

因为 <main></main> 表示整页「唯一主体内容容器」，而 <article></article> 是可复用、可独立分发的内容单元（比如一篇博客、一条新闻）。两者语义冲突：<main></main> 是页面级锚点，<article></article> 是内容级单元。浏览器和读屏软件会把嵌套结构理解为“主体中的主体”，造成导航混乱。

常见错误现象：

• 用 <main><article>...</article></main> 包裹单篇文章 —— 正确做法是直接用 <main>...</main>，内部用 <article></article>；
• 在侧边栏 <aside></aside> 里误加 <main></main> —— <main></main> 出现两次即违规；
• 用 <main></main> 替代视觉上的“中间栏” —— 它不解决三栏布局问题，只解决语义归属问题。

<section></section> 和 <article></article> 到底怎么选？

关键看内容是否「独立可分发」：能单独被 RSS 抓取、被搜索引擎当独立结果展示、能脱离当前页面仍保持完整语义的，就用 <article></article>；否则用 <section></section>。

使用场景差异：

Baoyu Markdown To Html

将 Markdown 转换为微信兼容的样式化 HTML，支持代码高亮、数学公式、PlantUML、脚注、提示框、信息图以及可选机器人...

下载

• <article></article>：博客正文、新闻条目、用户评论、产品卡片（带标题+摘要+时间）；
• <section></section>：文章内的“背景介绍”“技术原理”“使用示例”等逻辑区块，必须有 <h2></h2>–<h6></h6> 标题才推荐使用；
• 一个 <article></article> 内部可以有多个 <section></section>，但反过来不行 —— <section></section> 不能包裹 <article></article> 作为子内容。

<header></header> 和 <footer></footer> 不只属于页面顶部/底部

它们是「内容区块级」标签，可重复使用于 <article></article>、<section></section> 内部，表示该区块自身的头尾信息。

参数与兼容性注意点：

• <header></header> 在 <article></article> 内部时，通常包含 <h2></h2>、<time></time>、作者信息，而非网站 logo；
• <footer></footer> 放在 <article></article> 底部时，适合放「编辑时间」「阅读数」「相关标签」，不是版权信息；
• 不要为了“看起来像页脚”而滥用 <footer></footer> —— 比如纯按钮组、分隔线下方区域，用 <div> 更合适。 <h3>三栏布局中，语义标签不决定视觉位置</h3> <p>语义化解决的是「内容角色」，不是「CSS排列方式」。所谓“左中右三栏”，应由内容本质决定标签，再靠 CSS（Flex/Grid）控制显示顺序。</p> <p>典型结构建议：</p> <ul> <li>左侧导航区 → <code><nav></nav>（如果是主站全局导航）或 <aside></aside>（如果是当前文章相关目录）；
• 中间主内容 → <main></main>（唯一），内部按需嵌套 <article></article> 或 <section></section>；
• 右侧辅助信息 → <aside></aside>（必须与主内容相关，如“本文相关推荐”“作者简介”）；
• 避免用 <aside></aside> 套广告横幅或无关外链 —— 那只是视觉侧边，无语义支撑，应退回 <div>。 <p>最常被跳过的细节是：没有标题的 <code><section></section> 语义极弱，搜索引擎和读屏器几乎忽略它；而 <article></article> 即使没标题，只要内容自成一体，语义依然成立。