真正提升SEO和可访问性的语义标签极少，仅<nav>、<main>、<header>、<footer>、<article>、<time>等少数被搜索引擎和屏幕阅读器实质性识别；滥用如无标题的<section>或误用<article>反而破坏结构。
哪些标签真能提升SEO和可访问性
只有少数几个语义化标签会被搜索引擎和屏幕阅读器实质性识别，用错反而干扰解析。比如 <div role="navigation"> 不如直接用 <nav>，前者要额外写 ARIA 属性，后者浏览器原生支持。
常见误用：<section> 被当成“分块容器”滥用，其实它要求内部有标题（<h1>–<h6>），否则对辅助技术无意义；<article> 不是“每篇文章都得套”，而是指能独立分发、复用的内容单元（比如博客正文、新闻稿、评论）。
-
<header>和<footer>是作用于最近的章节根元素（<body>或<article>等），不是全局限定 -
<main>页面中只能出现一次，且不能嵌套在<article>、<aside>、<nav>、<header>、<footer>内 -
<time datetime="2024-03-15">3月15日</time>的datetime属性必须是机器可读格式，否则屏幕阅读器无法正确播报日期
IE11 和旧版 Safari 对语义标签的支持底线
IE8 及更早版本完全不识别语义标签，但 IE9+ 和 Safari 5.1+ 已支持基础渲染——问题不在“能不能显示”，而在“能不能被正确暴露给辅助技术”。比如 Safari 12 之前，<aside> 在 VoiceOver 中常被读作“section”，而非“complementary”。
不需要 polyfill 渲染样式（现代 CSS 重置已默认设 display: block），但若项目需兼容 IE9–11，务必确认：辅助技术是否依赖你用的语义标签传递结构意图。多数情况下，<nav>、<main>、<header>、<footer> 是安全的底线组合。
立即学习“前端免费学习笔记（深入）”；
- IE11 不支持
<dialog>，强行使用会降级为普通<div>，且无焦点管理 -
<figure>+<figcaption>在 Safari 6.1+ 才正确关联，旧版中图注可能脱离上下文 - 所有语义标签在无样式的纯 HTML 情况下，视觉上仍保持块级行为，无需额外
display: block
什么时候该放弃语义标签，退回 div
当语义标签强制引入隐含含义，而你的内容逻辑并不匹配时，硬套反而造成歧义。例如仪表盘里的“实时数据卡片”，既不是 <article>（不可独立分发），也不是 <section>（无标题、非逻辑章节），用 <div role="region" aria-labelledby="card1-title"> 更准确。
另一个典型场景：CSS Grid / Flex 布局容器。如果只是为了网格划分而套 <section>，又没配标题，等于给无障碍树塞垃圾节点。此时 <div class="grid-container"> 更干净。
- 动态生成的内容（如 React 组件返回值）若语义层级在运行时不确定，优先用
<div>+ ARIA 属性控制暴露方式 - 表单控件组合（如带搜索框的筛选区）不适合用
<form>包裹全部，除非所有控件确实提交同一组数据 -
<address>仅用于最近的<article>或<body>的联系信息，不是“所有地址都该用它”
检查语义结构是否生效的三步验证法
别只看浏览器渲染效果，重点验证它是否被真实技术栈消费。最有效的办法是关掉 CSS，打开系统级屏幕阅读器（如 macOS VoiceOver 或 Windows NVDA），按 Ctrl + Alt + Arrow 导航结构。
终端快速验证命令：npx axe-cli https://yoursite.com --reporter=line，它会标出 landmark-unique（如重复 <main>）、region 缺失标题等真实问题。Chrome DevTools 的 Accessibility 面板也能实时查看 ARIA 树映射关系。
- 运行
document.querySelectorAll("main, nav, article, section").length查数量是否合理，避免“每个卡片都套<section>”导致结构爆炸 - 检查
role属性是否与标签语义冲突，例如<nav role="banner">会让屏幕阅读器忽略其导航意图 - 用 Lighthouse 的 “Accessibility” 审计项跑一遍，重点关注 “Heading levels should only increase by one” —— 语义标签本身不保正标题层级正确，但错误嵌套会放大问题
语义化不是贴标签比赛，而是让结构意图和内容逻辑严丝合缝。多一个没意义的 <section>，比少一个 <main> 更难修复。
