“Web 语义化”是指使用正确的、具有明确语义的 HTML 标签来构建网页结构，让机器（搜索引擎、屏幕阅读器、爬虫）和人类都能更好地理解页面内容的含义。
简单来说：不要什么都用 div，而是用对标签。
一、为什么要做 Web 语义化？（好处非常实在）
| 好处 | 具体表现 |
|---|---|
| SEO 更友好 | 百度、Google 更懂你的页面结构，关键词排名更容易提升 |
| 无障碍访问（a11y） | 盲人通过屏幕阅读器能正确理解页面（残联、政府项目必须达标） |
| 代码更易维护 | 半年后你自己或别人接手代码，一眼就知道哪个是导航、哪个是文章 |
| 更好的可复用性和兼容性 | 未来换样式、做小程序、SSR 时几乎不用改结构 |
二、最常用的语义化标签（2025 年最新标准）
| 标签 | 语义（意思） | 典型用法举例 |
|---|---|---|
<header> | 页面或区块的头部 | 放 logo + 导航 + 搜索框 |
<nav> | 导航栏 | 主导航、面包屑、侧边栏导航 |
<main> | 页面主要内容（整个页面只能出现一次） | 核心内容区域 |
<article> | 独立完整的内容块 | 一篇博客、一条动态、一则新闻 |
<section> | 有主题的区块 | “热门文章”“相关推荐”“评论区” |
<aside> | 侧边栏、与主内容弱相关的部分 | 广告、相关文章、作者信息 |
<footer> | 页面或区块的尾部 | 版权、联系方式、友情链接 |
<h1> ~ <h6> | 标题层级（重要！） | h1 一般只出现一次，代表整页主题 |
<p> | 段落 | 普通文字段落 |
<ul><ol><dl> | 无序、有序、定义列表 | 菜单、步骤、术语解释 |
<figure><figcaption> | 带说明的图片/代码/视频等 | 博客里的插图 |
<mark> | 高亮文字 | 搜索关键词高亮 |
<time datetime=""> | 可读性强的时间 | <time datetime="2025-12-04">2025年12月4日</time> |
<address> | 联系信息 | 放在 footer 里的公司地址、邮箱 |
三、一个标准的语义化页面骨架（2025 推荐写法）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>前端开发者社区 - 语义化示例</title>
</head>
<body>
<header>
<div class="logo">前端日报</div>
<nav aria-label="主导航">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/article">文章</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h1>2025 年了，HTML 语义化还在卷</h1>
<p>作者：<address><a href="/author/xiaoming">小明</a></address>
发布时间：<time datetime="2025-12-04">2025年12月4日</time>
</p>
</header>
<section>
<h2>一、为什么还要语义化</h2>
<p>这里是正文内容……</p>
</section>
<section>
<h2>二、常见标签对比</h2>
<figure>
<img src="semantic.jpg" alt="语义化标签对比图">
<figcaption>正确与错误写法对比</figcaption>
</figure>
</section>
</article>
<aside>
<h3>相关文章</h3>
<ul>
<li><a href="#">Vue3 组合式 API 最佳实践</a></li>
<li><a href="#">Tailwind CSS 2025 完全指南</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 前端日报 All Rights Reserved</p>
<address>联系我们：hi@qianduan.com</address>
</footer>
</body>
</html>四、快速检查自己的页面是否语义化（3 个工具）
- Chrome 插件：Web Developer → Outline → Show Element Tag Names
- HTML5 Outliner：https://gsnedders.html5.org/outliner/
（能直接看出层级结构是否合理） - 用屏幕阅读器测试（NVDA 或 VoiceOver）读一遍，听起来是否流畅自然
五、一句话总结
2025 年了，能用语义化标签的地方绝不用 div，这不仅是“最佳实践”，更是搜索引擎、无障碍、团队协作、未来维护的硬性要求。
如果你把现在的项目代码贴出来，我可以帮你一行行改成完美语义化版本哦～
