<main>只能出现一次且必须为<body>直接子元素，因其是W3C强制定义的唯一语义锚点，用于屏幕阅读器“M键跳转”和搜索引擎主题提取；嵌套或重复会破坏可访问性、触发Lighthouse报错并干扰SEO。
语义化标签不是“加了就完事”，关键在层级逻辑和浏览器默认行为是否被意外破坏。
用 <header> 和 <footer> 时别嵌套错上下文
常见错误是把 <header> 当成“页面顶部装饰区”乱放——它必须是某个 <section>、<article> 或整个 <body> 的直接子元素。比如在 <nav> 内部再套一个 <header>，语义就失效了；浏览器不会报错，但屏幕阅读器可能跳过或误读。
-
<header>应该包裹标题（<h1>–<h6>）、logo、主导航入口，但不包含搜索框主体（搜索框建议用<form>包裹） -
<footer>不等于页脚版权栏——它可以出现在<article>内部（比如作者信息），此时它只属于那篇文章，不影响页面级 footer - 多个
<header>是合法的，但每个都必须有明确归属，不能孤立存在
<main> 只能出现一次且不能是 <article> 或 <aside> 的子元素
这是最常被忽略的硬性限制：<main> 必须是 <body> 的直接子元素，且全页面唯一。把它塞进 <div class="wrapper"> 里看似无害，实则破坏 ARIA 角色映射，部分辅助技术会完全忽略内容。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 如果用了 CSS Grid/Flex 布局需要居中容器，用
<div>包裹<main>外层，而不是把<main>当容器用 -
<main>内部可以有多个<article>、<section>，但禁止嵌套<aside>（侧边栏应与<main>并列） - 若页面是单页应用（SPA），路由切换时需动态更新
<main>的aria-live属性，否则屏幕阅读器不会播报新内容
<nav> 的判定标准不是“有没有链接”，而是“是否提供主要导航路径”
很多开发者看到一排链接就套 <nav>，结果页面出现 4 个 <nav>，反而稀释了主导航权重。浏览器和读屏软件只对首个 <nav> 做特殊处理（如快捷键跳转）。
立即学习“前端免费学习笔记（深入）”；
- 主导航（如顶部菜单、侧边栏全局菜单）必须用
<nav>；面包屑、页内锚点链接、页脚链接组建议用<div role="navigation">显式声明，避免语义过载 -
<nav>内部必须有至少一个可聚焦元素（如<a>或带tabindex="0"的<button>），空<nav>会被某些读屏器跳过 - 响应式折叠菜单的
<nav>，需配合aria-expanded和aria-controls控制状态，否则键盘用户无法感知展开/收起
真正难的不是记住哪些标签可用，而是每次写 <section> 前得问自己：这个区块是否有独立主题？能否被 RSS 抓取？去掉它是否影响其他区块理解？这些判断没有自动工具能替代。
