中可并列放置article、section、aside、form等直接子元素，但必须均为当前页面专属核心内容，不可跨页复用，且禁止嵌套或包裹无关容器。
main 中适合并列的区块类型
这些内容应随 URL 变化，不可跨页复用：
- 一个
<article></article>：比如博客正文、产品详情、新闻稿 - 一个
<section></section>：如“规格参数”“用户评价”“常见问题”，每块都有自己的<h2></h2>标题 - 一个
<aside></aside>：仅限与当前页面强相关的内容，例如文章右侧的“作者简介”或“延伸阅读”（不是全站广告） - 一个
<form></form>：如联系表单、搜索过滤器（若该表单是本页核心操作）
注意：所有区块必须是 <main></main> 的直接子元素。中间不能套一层无意义的 <div>，否则 Flex/Grid 布局会失效，语义层级也变模糊。<h3>如何让它们视觉上合理排布</h3>
<main> 本身不带布局能力，需靠 CSS 显式控制：
- 用 `display: flex` 适合主次分明的双栏（如主文 + 侧边栏）
```css
main { display: flex; gap: 1.5rem; }
article { flex: 1; }
aside { flex: 0 0 260px; }
```
- 用 `display: grid` 更适合固定结构或多栏对齐
```css
main { display: grid; grid-template-columns: 1fr 260px; gap: 1.5rem; }
article { grid-column: 1; }
aside { grid-column: 2; }
```
- 别用 `column-count`：它会把 `<article>` 和 `<aside>` 一起切开，破坏区块完整性。
<h3>需要避开的典型错误</h3>
<ul>
<li>把导航菜单、面包屑、页脚版权放进 <code><main></main>：它们是全局复用内容，应放在 <main></main> 外部
<section></section> 或 <article></article> 内部再嵌 <main></main>：HTML5 明确禁止 <main></main> 嵌套 <main></main>：服务端模板中误写 <main><div class="card">...</div></main> × 10 → 直接产生 10 个 <main></main>，语义崩坏 <div role="main"> 和 <code><main></main> 并存：辅助技术可能混淆，优先只用原生 <main></main> 
