语义化标签需按内容本质选用，仅、、、、、被主流辅助技术与搜索引擎实质识别；用错或比不用更危险。
直接说结论：语义化标签不是“加了就 SEO 变好、无障碍变强”，而是要按内容本质选对标签，否则反而干扰屏幕阅读器和搜索引擎解析。
哪些标签必须用，哪些可以不用
真正被主流辅助技术和搜索引擎实质性识别的，只有 <nav></nav>、<main></main>、<header></header>、<footer></footer>、<article></article>、<time></time> 这几个。其他如 <section></section> 或 <aside></aside>，用错比不用更危险。
-
<main></main>必须且只能出现一次，不能嵌套在<article></article>、<nav></nav>、<header></header>里，否则 VoiceOver 和 NVDA 会跳过它 -
<section></section>不是“分块容器”，它要求内部有<h1></h1>–<h6></h6>标题，否则对辅助技术无意义 -
<aside></aside>不等于“侧边栏 CSS 位置”，而是指与当前上下文相关但可独立存在的内容（比如博客页里的“作者简介”），广告位用<div role="complementary"> 更准确 <h3>标题层级和 <code><article></article>的绑定关系一个
<article></article>应该自带完整标题结构，且它的第一个子标题通常是<h2></h2>或更低（取决于外层上下文），而不是硬塞<h1></h1>。- 页面级
<h1></h1>只能有一个，属于整个文档，一般放在<header></header>里 - 每个
<article></article>内部推荐从<h2></h2>开始，形成独立语义闭环；若单独分发（如 RSS 推送），<h1></h1>才应出现在<article></article>内部 - 把无标题的列表或卡片强行包进
<article></article>，会让屏幕阅读器误判为“可独立分发内容”，实际却无法脱离上下文理解
IE11 / Safari 旧版兼容时的真实底线
渲染样式基本没问题（现代 reset.css 已设
display: block），但辅助技术支持是另一回事。IE11 完全不支持<dialog></dialog>，Safari 12 之前<nav></nav>在 VoiceOver 中常被读作 “section”。- 安全组合就是
<header></header>+<nav></nav>+<main></main>+<footer></footer>，这四个在 IE9+ 和 Safari 5.1+ 都有稳定辅助技术暴露 -
<figure></figure>+<figcaption></figcaption>在 Safari 6.1+ 才正确关联，旧版中图注可能完全脱离上下文，别依赖其语义连接 - 如果项目需支持 IE11，
<time datetime="2024-03-15"></time>的datetime属性必须是机器可读格式（ISO 8601），否则屏幕阅读器无法播报日期
什么时候该退回
<div> <p>当语义标签强制引入你并不需要的隐含含义时，硬套就是在制造噪音。仪表盘里的“实时数据卡片”既不是 <code><article></article>（不可独立分发），也不是<section></section>（无标题、非逻辑章节），这时<div role="region" aria-labelledby="card1-title"> 才是更精确的选择。 <p>真正难的不是记住标签名，而是每次写 HTML 前问一句：这个区块脱离当前页面后，还能被正确理解吗？如果答案是否定的，那就别急着套语义标签。</p> </div> - 页面级
