是页面唯一不可替代的核心锚点，必须为直接子元素、全页仅一个，且不得嵌套于内；它是辅助技术和搜索引擎识别主体内容的唯一可靠依据。
真正该用、能放心用的只有 <nav></nav>、<main></main>、<section></section>、<article></article>、<aside></aside> 这五个，其余语义标签在日常业务中基本可忽略。
为什么 <main></main> 是不可替代的核心锚点
它是辅助技术（如屏幕阅读器）定位“页面真正内容”的唯一可靠依据，搜索引擎也依赖它判断主体信息权重。一旦嵌套在 <header></header>、<footer></footer> 或 <nav></nav> 内部，就会被忽略或报错。
-
<main></main>必须是的直接子元素，且全页只能出现一次 - 不能包裹
<header></header>或<footer></footer>—— 那些应与<main></main>并列 - 若页面有多个独立内容单元（如新闻列表），每个条目用
<article></article>，整个列表外层用<section></section>+<h2></h2>
<nav></nav> 不是“所有导航”，而是“主导航”专用标签
它只适用于用户首次进入页面后最需要的那组跳转链接，比如顶部横栏菜单或左侧主菜单。其他导航类型都算误用。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 面包屑（
首页 > 分类 > 文章）应使用<ol></ol>或带aria-label="breadcrumbs"的普通<nav></nav>—— 但主流读屏器并不识别其导航语义 - 页脚链接、分页控件、侧边“相关文章”链接都不属于
<nav></nav>范畴 - 一个页面可以有多个
<nav></nav>，但必须用aria-label区分用途，例如<nav aria-label="主导航"></nav>和<nav aria-label="快捷工具导航"></nav>
<section></section> 和 <article></article> 的边界在哪
关键看是否具备「可独立分发」和「自带标题」两个硬条件。没标题的区块，哪怕视觉上像一节，也该用 <div>。
<ul>
<li>
<code><section></section> 表示文档中的逻辑章节，必须配 <h2></h2>–<h6></h6>，例如“产品特性”“用户评价”“技术参数”
<article></article> 是更严格的独立单元，自带完整上下文（如发布时间、作者、评论区），适合博客、新闻、微博等可被 RSS 抓取的内容<section></section> 套整页内容，或把广告位、表单区域塞进 <article></article>，会破坏大纲层级和 SEO 权重分配
<aside></aside> 不等于“侧边栏”，而是“补充性旁注”
它描述的是内容关系，不是布局位置。即使渲染在页面顶部或底部，只要语义上是附属、对照、延伸说明，就该用 <aside></aside>。
- 典型场景：术语解释框、引用来源、作者简介、相关链接推荐（非主导航）、广告（需加
role="complementary"明确意图） - 如果侧边栏里放的是主内容的筛选控件或操作按钮，它就不是
<aside></aside>，而应是<div role="region"> 或 <code><form></form> - 不能嵌套
<main></main>或另一个<aside></aside>，规范明确禁止
最容易被忽略的一点：语义标签不提供样式，也不自动适配旧浏览器。IE9+ 虽能识别 <header></header> 等为块级元素，但 <main></main> 在 IE11 及更早版本中仍需 CSS 补丁（display: block），而所有语义标签的无障碍支持，最终取决于你是否补全了 aria- 属性和标题层级。
