必须且只能出现一次，且为直接子元素，否则辅助技术报错、seo降权；嵌套或重复使用会破坏语义结构，导致lighthouse扣分、屏幕阅读器误读。

<main></main> 必须且只能出现一次，否则辅助技术会报错、SEO 权重可能被稀释——这不是建议，是 HTML5 规范的硬性要求。

为什么 <main></main> 不能嵌套、也不能多用

浏览器和屏幕阅读器（如 NVDA）把 <main></main> 当作页面“唯一核心内容区”的信号。一旦出现两个，或它被包在 <article></article>、<section></section>、<div> 里，就会触发 “multiple main landmarks” 警告，Lighthouse 检测直接扣分。 <ul> <li>错误写法：<code><div class="wrapper"><main>...</main></div> 或 <article><main>...</main></article>

正确位置：必须是 的直接子元素（或至少不被其他 sectioning content 包裹）

常见误用场景：Vue/React 组件中为方便样式控制而套一层 <div> 包住 <code><main></main> —— 这会破坏语义层级

<section></section> 和 <article></article> 到底该选哪个

区别不在视觉样式，而在内容是否“可独立存在”。搜索引擎、RSS 抓取器、屏幕阅读器都依赖这个判断。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• <article></article>：内容能单独发布、被转发、被订阅。比如一篇博客正文、一条新闻、一个微博卡片
• <section></section>：只是逻辑分组，脱离当前上下文就失去意义。例如“产品参数”“用户评价”“售后服务”，且必须带 <h2></h2>–<h6></h6>
• 反例：<section class="grid-container"></section> 没标题 → 本质就是 <div>，应换掉 <li>再反例：<code><h3>用户评论</h3> <section>...</section> → 评论不是自包含单元，该用 <section></section> 或 <aside></aside>，而非 <article></article>

<header></header> 和 <footer></footer> 可以多次使用，但别套在 <div> 里 <p>很多人写 <code><div class="header"><header>...</header></div>，以为加了 class 就“语义化”了——其实浏览器和爬虫完全无视 class，只认标签名。

• <header></header> 天然具备 sectioning root 行为（影响大纲生成），默认有隐式 ARIA role
• 一个页面可以有多个： 下一个，<article></article> 里还能再套一个，用于该文章自己的标题+发布时间
• <footer></footer> 同理，不只在页面最底下；<article></article> 结尾的作者信息、许可说明，也该用 <footer></footer>
• 禁止嵌套：<main></main> 里再包一层 <div> 然后放 <code><header></header> —— 辅助技术会误判层级关系

  什么时候还非得用 <div> <p><code><div> 不是语义缺陷，而是语义“空缺”时的合理选择。关键看删掉它，内容角色是否依然清晰。 <ul><li>Flex/Grid 布局中纯粹为了对齐或间距加的包裹层，比如 <code><div class="card__body"> <li>Vue/React 组件根节点强制单元素，但用 <code><section></section> 会引入不必要的 ARIA role 或默认 margin

• 需要 display: contents 或重置样式，而语义标签自带隐式行为（如 <nav></nav> 默认有 landmark role）反而干扰布局

真正容易被忽略的，不是“该不该用语义标签”，而是“用了之后是否真满足其规范约束”——比如没标题的 <section></section>、嵌套的 <main></main>、套在 <div> 里的 <code><header></header>，它们比不用更糟。