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