语义标签是网页可访问性的底线要求，必须用<header><main><aside><figure><table>等替代无意义的<div><span>，并正确使用scope、aria-live等属性。
直接用 <div> 堆页面，搜索引擎和屏幕阅读器根本分不清哪是标题、哪是正文、哪是侧边导航——语义标签不是“锦上添花”，而是让结构可被机器准确理解的底线要求。
哪些标签该替掉 <div> 和 <span>
只要内容有明确角色，就该换。比如：
-
<header>：页面顶部区域（含 logo、主导航），不是所有<div class="header">都配叫 header；真正只出现一次且承载全局入口的才用 -
<main>：整个页面唯一主内容区，必须且只能有一个；嵌套在<article>或<section>里是错的 -
<aside>：仅用于与当前内容相关但非核心的补充信息（如作者简介、同类推荐），不是所有“右边栏”都算 aside——广告位、全局客服入口得用<footer>或独立<nav> -
<figure>+<figcaption>：图片/图表+说明文字必须成对出现；单独<img>加alt不足以表达“这是数据可视化结果”这类语义
<table> 用对了没：纯展示表格 ≠ 数据表格
如果表格用于排版（比如三列布局）、或只是视觉对齐的“假表格”，坚决不用 <table>——它会误导辅助技术把无关内容当数据关系处理。
真数据表格必须满足：
立即学习“前端免费学习笔记（深入）”；
- 第一行或第一列含
<th>，且scope属性明确（scope="col"或scope="row"） - 跨行/跨列用
rowspan/colspan，别靠 CSS 模拟合并 - 复杂表需加
<caption>描述用途（如“2024年Q1各地区销售额对比”），不能只靠标题文字 - 避免嵌套
<table>：多维数据改用<dl>+<dt>/<dd>或 JSON-LD 注入
ARIA 属性不是补救措施，而是语义缺口的临时胶带
加 role="region" 或 aria-label 前先问：是不是本可用原生标签替代？
-
role="navigation"→ 直接用<nav> -
aria-labelledby="xxx"→ 能用<h2 id="xxx">+<section aria-labelledby="xxx">就别绕路 - 动态加载内容后，若 DOM 结构变化（如 tab 切换），必须手动更新
aria-hidden和tabindex，否则屏幕阅读器仍读旧节点 -
aria-live="polite"只适用于弱提示（如“已保存”），实时数据刷新（如股票价格）得用"assertive"并控制频率，否则会打断用户操作
最常被忽略的是 <main> 缺失和 <table> 的 scope 遗漏——这两处一错，整个页面的语义骨架就塌了一半，后续加多少 ARIA 都难挽回。
