看完这篇，你能把 HTML 里那些"存在感极低但真能用"的语义化标签认全，并且知道在什么场景下把无意义的 <div> 换成它们。下面按使用场景拆成六步，跟着走一遍就够了。
第一步：先把骨架标签摆对
最常用的是这七个：<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>。
判断标准很简单：
<main>：每页只能有一个，装正文主体<article>：能独立成篇的内容（一篇帖子、一条评论、一张卡片）<section>：需要分组并且有标题的内容块<aside>：与正文相关但可剥离的补充（侧栏、相关推荐）<nav>：主要导航链接组，不必是整站导航
注意：<section> 不是"高级 div"。里面没有标题就别用，老老实实写 <div> 更准确，语义标签用错比不用更糟。
第二步：文本级语义标签，用得最多也最容易被忽略
<p>截止 <time datetime="2025-06-01T10:00">6月1日</time>，
搜索关键词 <mark>语义化</mark> 命中此段。</p>
<p><abbr title="Cascading Style Sheets">CSS</abbr> 层叠样式表</p>
<p>按 <kbd>Ctrl</kbd> + <kbd>S</kbd> 保存，程序输出 <samp>OK</samp>，
变量名写作 <var>count</var>。</p>
<p>原价 <del>99</del> 元，现价 <ins>59</ins> 元。</p>
<figure>
<img src="chart.png" alt="季度增长曲线">
<figcaption>图 1：2025 年各季度增长</figcaption>
</figure>
还有几个偏冷门的：<dfn> 标记术语首次定义，<blockquote cite="URL"> 引文并注明出处，<bdi> 处理阿拉伯语与中文混排的方向隔离，<wbr> 给长 URL 一个断行机会，<small> 表示旁注与版权声明。
注意：<i> 和 <b> 现在不是"斜体""加粗"的意思，而是"不同语气""引起注意"。用图标字体时拿它做容器没问题，但别用 <b> 去顶替标题的粗体。
第三步：表单里的几个"没见过的"
<fieldset> + <legend>：把一组相关输入框框起来并给个组名<datalist>：输入框的候选建议，<input list="city"> 关联<meter>：静态刻度（评分、磁盘占用）；<progress>：进度条<optgroup>：<select> 里给选项分组<output>：放计算结果<search>：较新的标签，包住站点搜索区
注意：<datalist> 的联动靠 list 属性指向 id，不是 name，写错了没任何提示只是不生效。另外它的下拉样式各浏览器差异很大，别指望完全可控。
第四步：图片与媒体
<picture>
<source media="(min-width:900px)" srcset="big.avif" type="image/avif">
<source media="(max-width:899px)" srcset="small.webp" type="image/webp">
<img src="fallback.jpg" alt="描述文字">
</picture>
<video controls poster="cover.jpg"> 里面可以放多个 <source> 让浏览器挑格式，配 <track kind="captions" src="zh.vtt" srclang="zh"> 加字幕。
注意：<picture> 里最后那个 <img> 必须有，它既是最老浏览器的兜底，也是 alt 和渲染尺寸的来源。省了它整块都不显示。
第五步：两个不用写 JS 就能跑的标签
<details open>
<summary>点击展开常见问题</summary>
<p>这里是答案正文。</p>
</details>
<dialog> 配合 showModal() 可以做出带遮罩的原生弹窗，ESC 自动关闭。
注意：<dialog> 直接写 open 属性只是"显示"，没有遮罩也没有 ESC 关闭，必须是 JS 调 showModal()。<details> 的默认三角标在 Safari 里要 summary::-webkit-details-marker{display:none} 才能去掉。
第六步：验证有没有用对
改完打开 DevTools 的 Elements 面板看结构树，再跑一次 Lighthouse 的无障碍项；想更严格就用 axe 插件或 W3C Validator。最后把 CSS 全部禁用，如果页面读下来还是一篇条理清楚的文章，说明语义层是合格的。
小结
- 骨架标签重在"判断标准"，
<section> 没标题就别用
- 文本级标签优先记住
<time>、<mark>、<figure>/<figcaption> 这三个，性价比最高
- 表单里
<fieldset> + <legend> 是无障碍的硬要求，<datalist> 注意是 list→id
<picture> 里的 <img> 不能省，<video> 用 <source> 做多格式兜底<details> 和 <dialog> 能省掉一批手写 JS- 关掉 CSS 读一遍，是最省事的验收方式
正式会员
认证极客
