必须优先掌握、、、、、这6个语义化标签，它们覆盖90%页面结构需求，ie11+全支持，语义清晰且可访问性友好；须为直接子元素，需有标题，内容须独立可重用，强调相关性与可分离性。

必须优先掌握这6个：

、

、

、

、

、

。它们覆盖90%页面结构需求，IE11+ 全支持，且语义清晰、可访问性友好——用错比不用代价更大。

为什么

不能嵌套在

或

里

<main></main> 表示整个页面唯一的主要内容区域，浏览器和屏幕阅读器会据此跳过装饰性区块直达核心。一旦嵌套在 <header></header> 或 <section></section> 中，语义就坍缩成“某个区块里的主要内容”，与规范冲突。

• 实际错误现象：<main></main> 被读屏软件忽略，或 SEO 工具报“multiple main landmarks”警告
• 正确写法：<main></main> 必须是 的直接子元素（或仅被 <div> 等无语义容器包裹） <li>兼容性注意：IE 不识别 <code><main></main> 的语义，但不会报错；可用 role="main" 降级兜底

和

的关键区别在有没有标题

<section></section> 不是“带样式的 div”，它必须有主题，且该主题需由 <h1></h1>～<h6></h6> 显式表达。没标题的轮播图、卡片列表、分隔线区块，都不该用 <section></section>。

• 常见错误：<section><div class="carousel">...</div></section> —— 这里 <section></section> 没标题，纯属冗余
• 替代方案：用 <div role="region" aria-label="首页推荐商品">，既保持无障碍，又不滥用语义 <li>性能影响：过度使用 <code><section></section> 会让 DOM 层级变深，对 SSR 渲染无实质影响，但会增加可访问性树复杂度

的独立性判断标准很具体

<article></article> 内容必须能脱离当前页面单独存在、被重用或 syndicated（比如 RSS 订阅）。博客正文、新闻稿、用户评论，都符合；但导航菜单、页脚版权栏、侧边广告位，不符合。


html-ppt-to-pdf
将使用 `
` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。
下载
• 典型误用：把每个产品卡片都包一层 <article></article> —— 若卡片本身无完整标题/作者/发布时间，就不算独立内容
• 正确搭配：<article></article> 内应包含 <header></header>（含 <h2></h2>）、<footer></footer>（含时间/分类），否则语义不完整
• SEO 影响：搜索引擎会把 <article></article> 内容权重提高，但若滥用（如包住按钮或图标），反而稀释主内容信号

不等于“侧边栏”，而是“可分离的相关内容”

<aside></aside> 的核心是相关性 + 可分离性。它可以出现在页面任意位置（不限于右侧），甚至嵌套在 <article></article> 内作为术语解释、引用来源或补充图表。

• 错误认知：“侧边栏必须用 <aside></aside>” → 实际上，纯导航或广告侧栏更该用 <nav></nav> 或无语义 <div> <li>真实场景：<code><article><p>…</p> <aside><p>【注】此处数据引自 2025 年行业白皮书</p></aside></article>
• 可访问性提示：屏幕阅读器会把 <aside></aside> 当作次要流处理，跳过不影响主线理解 —— 所以别在里面放关键操作按钮

真正难的不是记住标签名，而是每次写 HTML 时下意识问一句：“这个区块如果抽出来发到 Twitter，它自己能讲清楚发生了什么吗？”——<article></article> 和 <aside></aside> 尤其如此。很多语义问题，根源不在标签不会用，而在内容边界没想清。