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