语义标签是网页可访问性的底线要求，必须用等替代无意义的，并正确使用scope、aria-live等属性。

直接用 <div> 堆页面，搜索引擎和屏幕阅读器根本分不清哪是标题、哪是正文、哪是侧边导航——语义标签不是“锦上添花”，而是让结构可被机器准确理解的底线要求。 <h3>哪些标签该替掉 <code><div> 和 <code><span></span>

只要内容有明确角色，就该换。比如：

• <header></header>：页面顶部区域（含 logo、主导航），不是所有 <div class="header"> 都配叫 header；真正只出现一次且承载全局入口的才用 <li> <code><main></main>：整个页面唯一主内容区，必须且只能有一个；嵌套在 <article></article> 或 <section></section> 里是错的
• <aside></aside>：仅用于与当前内容相关但非核心的补充信息（如作者简介、同类推荐），不是所有“右边栏”都算 aside——广告位、全局客服入口得用 <footer></footer> 或独立 <nav></nav>
• <figure></figure> + <figcaption></figcaption>：图片/图表+说明文字必须成对出现；单独 <img> 加 alt 不足以表达“这是数据可视化结果”这类语义

<table> 用对了没：纯展示表格 ≠ 数据表格 <p>如果表格用于排版（比如三列布局）、或只是视觉对齐的“假表格”，坚决不用 <code><table>——它会误导辅助技术把无关内容当数据关系处理。 <p>真数据表格必须满足：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a> <p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p> </div> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul><li>第一行或第一列含 <code><th>，且 <code>scope 属性明确（scope="col" 或 scope="row"）

跨行/跨列用 rowspan/colspan，别靠 CSS 模拟合并

复杂表需加 <caption></caption> 描述用途（如“2024年Q1各地区销售额对比”），不能只靠标题文字

避免嵌套 <table>：多维数据改用 <code><dl></dl> + <dt></dt>/<dd></dd> 或 JSON-LD 注入

ARIA 属性不是补救措施，而是语义缺口的临时胶带

加 role="region" 或 aria-label 前先问：是不是本可用原生标签替代？

• role="navigation" → 直接用 <nav></nav>
• aria-labelledby="xxx" → 能用 <h2 id="xxx"></h2> + <section aria-labelledby="xxx"></section> 就别绕路
• 动态加载内容后，若 DOM 结构变化（如 tab 切换），必须手动更新 aria-hidden 和 tabindex，否则屏幕阅读器仍读旧节点
• aria-live="polite" 只适用于弱提示（如“已保存”），实时数据刷新（如股票价格）得用 "assertive" 并控制频率，否则会打断用户操作

最常被忽略的是 <main></main> 缺失和 <table> 的 <code>scope 遗漏——这两处一错，整个页面的语义骨架就塌了一半，后续加多少 ARIA 都难挽回。