HTML 语义化标签完整指南：div 满天飞的替代方案
星耀SVIP
管理员
黑卡会员
发布于 2026-09-19 22:40
·2 浏览
·0 回复
学完这篇，你能把一屏"div 套 div"的页面改成结构清晰、对屏幕阅读器和搜索引擎都友好的语义化 HTML，并且知道每个标签该在什么时候用、什么时候不该用。
第一步：先弄明白语义化解决的是什么问题
div 和 span 本身没有任何含义，它们只是"盒子"。浏览器渲染没问题，但三类读者看不懂：屏幕阅读器（视障用户靠它跳转区域）、搜索引擎（判断哪块是正文）、以及三个月后回来看代码的你自己。
语义化标签不改变默认显示效果（样式差异可以用 CSS 抹平），它改变的是"这块内容是什么"。
注意：语义化不是堆标签。一个页面塞十几个 section 却全都没有标题，比老老实实用 div 还糟。
第二步：页面骨架先换掉这几个位置
<body>
<header>站点头部：logo + 搜索</header>
<nav>主导航，一组主要链接</nav>
<main>
<article>
<h1>文章标题</h1>
<section><h2>小节标题</h2><p>正文</p></section>
</article>
<aside>侧边栏：相关推荐、广告</aside>
</main>
<footer>版权、备案、友链</footer>
</body>
判断规则：
- `main` 每页只能有一个，且不能嵌套进 header/nav/footer/aside 里。
- `article` 是"单独拿出去发布仍然成立"的完整内容：帖子、新闻、评论。
- `section` 是"有主题的一段"，而且必须有标题（h2-h6）。没有标题就用 div。
- `aside` 是与主内容弱相关的补充信息。
注意：header/footer 不只能出现在页面顶层。article 内部也可以有自己的一对，比如帖子的标题区（header）和作者信息区（footer）。
第三步：文本内容别再用 div 加 class 硬凑
- 段落用 `p`，不要用 div。
- 标题按层级用 `h1`-`h6`，不要跳级；一页只保留一个 h1。
- 并列列表用 `ul`，有顺序的步骤用 `ol`；"名称—描述"这种对应关系用 `dl`/`dt`/`dd`（术语表、参数表正合适）。
- 引用别人内容用 `blockquote`，出处说明放在 blockquote 外面，不要写进去。
- 图片配文字说明用 `figure` + `figcaption`。
- 时间用 `time datetime="2025-01-01"`，联系方式用 `address`。
<figure>
<img src="chart.png" alt="2024 年月活趋势折线图">
<figcaption>图 1：2024 年月活趋势</figcaption>
</figure>
注意：ol 的先后顺序是语义的一部分。别为了去掉序号而改用 ul，要改外观用 `list-style` 或 CSS counter。
第四步：表单是语义化收益最大的地方
每个输入框都要有 label，并用 for 关联到 id：
<label for="email">邮箱</label>
<input id="email" type="email" name="email" required>
- 一组相关控件（比如收货地址）用 `fieldset` + `legend` 包起来。
- 触发动作的用 `button`，跳转的用 `a`。别用 div 绑 click 当按钮，键盘用户按不动。
- 善用输入类型：`email`、`tel`、`number`、`date`、`search`，手机端会自动切换键盘。
注意：placeholder 不能替代 label。用户一开始输入提示就消失了，回头就忘了这一栏要填什么。
第五步：这几个标签能直接省掉一段 JS
- 折叠面板：`details` + `summary`，原生展开收起。
- 弹窗：`dialog` + `showModal()`。
- 进度条：`progress`；已知范围的度量（磁盘占用、评分）用 `meter`。
- 高亮搜索关键词：`mark`。
- 缩写首次出现：`<abbr title="...">`。
- 代码：行内用 `code`，多行用 `pre` + `code`；用户输入用 `kbd`，程序输出用 `samp`。
第六步：改完对照自查清单
- 关掉 CSS，页面还能读懂顺序吗？
- 有没有 section / article 没有标题？
- 标题层级是否连续，h1 是否只有一个？
- 图片是否都有 alt，输入框是否都有 label？
- 用 Tab 键能不能走完所有可点元素？
- 还有没有"纯盒子"的 div？——这没问题，div 依然合法，只是它不该承担结构含义。
注意：不要为了"语义化"把 div 全删掉。纯布局容器、需要 flex/grid 包裹的包装层，用 div 完全正确。
小结
- 语义化只回答"这是什么"，不负责"长什么样"。
- 骨架四件套加三件套：header、nav、main、article、section、aside、footer，剩下的交给 div。
- section 必须有标题，没有标题就该用 div。
- 表单收益最大：label、fieldset/legend、button、正确的 input type。
- details、dialog、progress、meter、mark 可以直接替掉一批 JS。
- 判断标准不是"还剩几个 div"，而是"关掉 CSS 后结构是否依然清晰"。
本文转载自 Clara轻量论坛系统，原文地址：https://www.leleweb.cn/thread-527.html
转载请注明出处，版权归原作者所有。
转载请注明出处，版权归原作者所有。
全部回复 0
还没有回复，来抢沙发～
