mdn web docs 的 html 元素索引页（https://developer.mozilla.org/zh-cn/docs/web/html/element）是最权威、更新最及时的参考源，按功能分类列出所有标准标签，明确标注语义化、废弃及实验性状态，并附规范状态、兼容性与无障碍注意事项。
查 MDN Web Docs 的 HTML 元素索引页最直接
MDN 的 HTML elements 页面是当前最权威、更新最及时的参考源，它按功能分类列出所有标准标签，并明确标注哪些是语义化标签、哪些已废弃、哪些是实验性特性。别依赖搜索引擎跳转的二手整理页，容易过时或遗漏关键约束（比如 <main></main> 不得嵌套在 <article></article> 里）。
实操建议：
- 直接访问
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element（中文版）或英文主站对应路径 - 左侧导航栏点开 “Semantic” 分类，能看到
<header></header>、<nav></nav>、<main></main>、<article></article>、<section></section>、<aside></aside>、<footer></footer>等核心标签 - 每个标签页底部都有「规范状态」「浏览器兼容性」和「无障碍注意事项」，比如
<time></time>必须带datetime属性才被屏幕阅读器识别为时间
用浏览器开发者工具反查真实页面的语义结构
很多所谓“语义化页面”其实只是把 <div class="header"> 换成 <code><header></header>，但没配 <nav></nav> 或漏了 <main></main>。直接看生产环境站点更可靠。
实操建议：
- 打开任意主流新闻站或博客（如 BBC、Medium），右键 →「检查」，切换到 Elements 面板
- 用
Ctrl+F（Win）或Cmd+F（Mac）搜<nav></nav>、<main></main>、<article></article>，观察它们是否真实存在且嵌套合理 - 特别注意
<main></main>是否被包裹在<header></header>或<nav></nav>里——这是常见错误，会导致辅助技术跳过主体内容
警惕文档大纲（outline）错乱导致的语义失效
语义化不只是标签名对，还依赖标题层级与区块嵌套逻辑。用 <section></section> 却不配 <h2></h2>–<h6></h6>，或把 <article></article> 当布局容器滥用，都会让文档大纲断裂。
实操建议：
- 安装浏览器插件「HeadingsMap」或「HTML5 Outliner」，实时查看当前页的大纲树形结构
-
<article></article>内必须有至少一个标题（<h1></h1>–<h6></h6>），否则它就不是一篇“可独立分发的内容” -
<section></section>和<article></article>不是互斥关系：<article></article>可以包含多个<section></section>（如“背景”“方法”“结论”），但<section></section>不能替代<article></article>表达独立性
别忽略 <time></time>、<figure></figure> 这些“小众但关键”的语义标签
很多人只记住 <header></header>、<nav></nav> 这几个大标签，却在时间、图片、代码块等细节上退回 <div> + class 的老路。这些标签虽小，但对 SEO 和无障碍影响具体且可测。
<p>实操建议：</p>
<ul>
<li>发布日期必须用 <code><time datetime="2026-08-25">2026年8月25日</time>，搜索引擎会提取 datetime 值用于排序，纯文本日期则无法识别
<figure><img><figcaption>描述</figcaption></figure>，而不是 <div>
<img><p>描述</p>
</div>；屏幕阅读器会把 <figcaption></figcaption> 和图片关联播报<strong></strong> 和 <em></em> 不是 <b></b>、<i></i> 的样式替代品：前者表达语义强调，后者仅表示视觉加粗/斜体真正难的不是记住标签名，而是判断某段内容“该不该独立成 <article></article>”或“这里用 <section></section> 还是 <div>”。每次写新标签前，先问一句：这段 HTML 单独保存成文件，脱离原页面还能被理解吗？能→选 <code><article></article>；不能→再看是否需要逻辑分组→选 <section></section>；否则老实用 <div>。</div>
