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