我花了两周学会 HTML — 这 5 个语义标签是初学者真正需要的
本文通过真实学习经验，详细讲解 HTML5 中 5 个核心语义标签：header、nav、main、article、section的使用方法和应用场景。包含完整的代码重构案例和快速参考表，帮助初学者快速掌握语义化 HTML，提升代码质量。
作为一名前端初学者，学习 HTML 的第一周结束后，我回头看自己的代码，发现满屏都是 <div> 标签。嵌套的 div、包裹着 div、再包裹着更多的 div。代码能运行，但阅读起来就像在迷宫里迷路一样。
然后我发现了 HTML5 语义化标签，一切都变了。
在第二周，我学会了仅仅 5 个语义标签，就能把代码从混乱变成专业。这些 语义化 HTML 标签不仅仅是最佳实践——它们是“能运行的代码”和“易于维护、无障碍、SEO 友好的代码”之间的分水岭。
如果你也是被 div 淙没的初学者，这篇文章就是为你准备的。让我告诉你，这 5 个必学标签如何在接下来的两周内，让你的 HTML 水平飞跃提升。
<div> 的问题
为什么初学者都爱用 <div>？
我真希望有人在第一天就告诉我：语义化 HTML 指的是使用能够描述其目的的标签，而不仅仅是“能用”的标签。
作为初学者，我什么都用 <div>。为什么？
-
因为它能用 - 浏览器不会报错
-
因为教程都这样写 - 大部分快速教程都用 div
-
因为它简单 - 不用思考太多
但是我没有意识到的是：
使用 <div> 的三大隐藏成本
1. 无障碍性问题
屏幕阅读器无法正确导航我的网页。视障用户没有办法快速跳转到导航栏或主要内容。我的“能用”的网站，实际上排除了一整群用户。
2. SEO 优化问题
搜索引擎无法理解我的内容结构。Google 只能猜测我网页的哪些部分比较重要，这对排名非常不利。
3. 代码可维护性问题
几天后连我自己都看不懂自己写的代码。一堆写着 header-wrapper、content-container 类名的 div，阅读起来真的很累。
对比示例
看看这个对比：
<!-- 之前：这是什么？ -->
<div class="header">
<div class="logo">我的网站</div>
<div class="menu">...</div>
</div>
<!-- 之后：一目了然 -->
<header>
<h1>我的网站</h1>
<nav>...</nav>
</header>
视觉效果完全相同，但意义完全不同。一个是自我说明、无障碍、SEO 友好的。另一个就只是... div。
一旦理解了“为什么”要使用语义标签，学习这些基本标签其实很简单。下面是你真正需要优先学会的 5 个。
核心 5 个语义标签
1. <header> — 页面头部
基本概念
定义：网页、区块或文章的介绍性内容或导航辅助。
使用场景：
-
网页顶部
-
文章开头
-
任何主要区块的引言处
新手常见错误
❗ 错误认知：以为一个页面只能有一个 <header>
✅ 正确理解：可以有多个 header——网站一个、每篇文章一个、每个主要区块一个。<header> 讲的是角色，不是位置。
实战代码
<!-- 网站头部 -->
<header>
<h1>我的个人网站</h1>
<nav>
<ul>
<li><a href="#about">关于</a></li>
<li><a href="#projects">项目</a></li>
</ul>
</nav>
</header>
<!-- 文章头部 -->
<article>
<header>
<h2>我的第一篇博客</h2>
<p>发布于 <time datetime="2025-10-27">2025 年 10 月 27 日</time></p>
</header>
<p>文章内容...</p>
</article>
重点提示
👉 记住：
<header>用于放置介绍性内容，不仅仅是页面顶部。
2. <nav> — 导航栏
基本概念
定义：主要导航区块的容器，如菜单、目录或面包屑。
使用场景：
-
主要网站导航
-
页面内导航
-
任何主要的导航链接群组
新手常见错误
❗ 错误做法：每一组链接都用 <nav>
✅ 正确做法：只在主要导航区块使用。页脚的社交媒体链接？可能不需要。主菜单？绝对需要。
实战代码
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/blog">博客</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>
为什么重要
-
无障碍：屏幕阅读器提供“跳转到导航”功能
-
SEO：搜索引擎用它理解网站结构
-
可维护性：其他开发者一眼就能识别导航
👉 最佳实践：仅在主要导航区块使用
<nav>。
3. <main> — 主要内容
基本概念
定义：网页的主要内容区域。除了导航、头部、侧边栏和页脚以外的所有内容。
重要规则：每个页面只能有一个 <main>
新手常见错误
❗ 常见错误：
-
完全忘记使用
<main> -
在一个页面使用多个
<main>
✅ 正确理解：一个页面，一个主要内容区。
实战代码
<body>
<header>网站头部</header>
<nav>网站导航</nav>
<main>
<!-- 所有主要内容都放这里 -->
<h1>欢迎来到我的网站</h1>
<p>这是主要内容...</p>
</main>
<footer>网站页脚</footer>
</body>
为什么重要
-
无障碍：屏幕阅读器可以直接跳转到主要内容
-
SEO：搜索引擎优先处理
<main>内的内容 -
用户体验：“跳转到主内容”链接依赖这个标签
⚠️ 注意：每个页面只能有一个
<main>。
4. <article> — 独立文章
基本概念
定义：一段独立的内容，脱离页面其他部分仍然有意义。
使用场景：
-
博客文章
-
新闻报道
-
产品卡片
-
论坛帖子
-
用户评论
判断方法
测试问题：“这段内容能否被单独发布到 RSS、邮件或其他网站？”
-
如果可以 → 使用
<article> -
如果不可以 → 考虑
<section>或<div>
实战代码
<main>
<article>
<header>
<h2>理解语义化 HTML</h2>
<p>作者：Leon Wong | 2025 年 10 月 27 日</p>
</header>
<p>文章内容...</p>
<footer>
<p>标签：HTML, 网页开发</p>
</footer>
</article>
<article>
<h2>CSS Flexbox 指南</h2>
<p>另一篇独立文章...</p>
</article>
</main>
👉 记忆技巧：能单独发布的内容，就用
<article>。
5. <section> — 内容分组
基本概念
定义：内容的主题分组，通常带有自己的标题。
使用场景：
-
长文章中的章节
-
分页内容
-
页面内的主题区域
判断方法
测试问题：“这段内容是否有自然的标题？”
-
如果有 → 使用
<section> -
如果只是为了样式分组 → 使用
<div>
实战代码
<article>
<h1>我的学习之路</h1>
<section>
<h2>第一周：HTML 基础</h2>
<p>在第一周，我学习了...</p>
</section>
<section>
<h2>第二周：语义标签</h2>
<p>在第二周，我发现...</p>
</section>
</article>
👉 经验法则：内容需要标题，用
<section>；只是样式分组，用<div>。
实战案例：代码重构
前后对比
让我展示一个实际页面结构的前后对比：
重构前（全部 div）
<div class="header">
<div class="logo">我的博客</div>
<div class="nav">
<a href="/">首页</a>
<a href="/about">关于</a>
</div>
</div>
<div class="content">
<div class="post">
<div class="post-header">
<h1>我的文章标题</h1>
</div>
<div class="post-content">
<p>文章内容...</p>
</div>
</div>
</div>
<div class="footer">
<p>© 2025 我的博客</p>
</div>
问题：
-
✖️ 结构不清晰
-
✖️ 无障碍性差
-
✖️ SEO 不友好
-
✖️ 需要复杂的类名
重构后（语义标签）
<header>
<h1>我的博客</h1>
<nav>
<a href="/">首页</a>
<a href="/about">关于</a>
</nav>
</header>
<main>
<article>
<header>
<h2>我的文章标题</h2>
</header>
<section>
<p>文章内容...</p>
</section>
</article>
</main>
<footer>
<p>© 2025 我的博客</p>
</footer>
优势：
-
✅ 结构一目了然
-
✅ 无障碍工具可以正确导航
-
✅ 搜索引擎理解内容层级
-
✅ HTML 自我说明，不需要复杂类名
改进效果对比
| 指标 | 使用 div | 使用语义标签 |
|---|---|---|
| 代码可读性 | ⭐⭐ | ⭐⭐⭐⭐⭐ |
| 无障碍性 | ⭐ | ⭐⭐⭐⭐⭐ |
| SEO 优化 | ⭐⭐ | ⭐⭐⭐⭐⭐ |
| 维护成本 | 高 | 低 |
快速参考表
标签选择决策表
| 标签 | 使用时机 | 不要使用时机 | 示例 |
|---|---|---|---|
<header> |
介绍页面/区块/文章 | 只需要一个标题 | 网站头部、文章头部 |
<nav> |
主要网站导航 | 每一组链接 | 主菜单、面包屑 |
<main> |
包裹主要内容 | 里面有侧边栏或头部 | 页面主体内容 |
<article> |
内容可以独立存在 | 内容依赖周围环境 | 博客文章、新闻 |
<section> |
有标题的主题分组 | 只是样式分组 | 文章章节、区域分组 |
决策流程图
需要添加元素？
↓
是否为介绍性内容？
│
├── 是 → 使用 <header>
│
└── 否 → 是否为导航链接？
│
├── 是 → 使用 <nav>
│
└── 否 → 是否为主要内容？
│
├── 是 → 使用 <main>
│
└── 否 → 是否可独立发布？
│
├── 是 → 使用 <article>
│
└── 否 → 是否有主题分组？
│
├── 是 → 使用 <section>
│
└── 否 → 使用 <div>
学习心得
我的成长轨迹
在第二周学会这 5 个语义标签，彻底改变了我写 HTML 的方式。
之后的学习变得很自然：学习 <aside> 用于侧边栏、<footer> 用于页脚内容，还有更多高级语义标签，都不再觉得困难——它们都符合我已经建立的心智模型。
最大的改变？无障碍性、SEO 和可维护性不再是“额外的工作”。它们从一开始就内建在我的代码中，因为我是根据目的选择标签，而不是外观。
给初学者的建议
如果你跟我一样在第二周学会这 5 个标签，你写的代码会比大部分学了好几个月的初学者都好。这不是夹张——语义化 HTML 是区分专业代码和初学者代码的基本功之一。
总结
核心要点
✅ 语义化 HTML = 描述目的的标签，不只是外观
✅ 必学 5 标签：<header>、<nav>、<main>、<article>、<section>
✅ 三大好处：内建无障碍性、SEO 优化、可维护性
✅ 黄金法则：根据目的选择标签，不是外观
实践作业
想练习吗？这是你的作业：
任务：拿一个你用 div 构建的网页，用这 5 个标签重构它。
步骤：
-
打开你最近的 HTML 项目
-
找出那些有语义类名的 div（如 "header"、"navigation"、"main-content"）
-
把它们替换成正确的语义标签
-
测试页面功能是否正常
-
使用 W3C 验证器检查代码
你会惊讶于代码变得多么清晰。
下一步学习
你作为初学者最大的 HTML 困惑是什么？
欢迎在评论区留言，我会在下一篇文章解答。我正在公开学习，分享我一路上发现的所有经验。
下期预告：
我会深入分析 CSS Flexbox 和 Grid，告诉你应该先学哪一个（附带视觉化示例）。
关注我，获取更多初学者友好的前端开发指南。让我们一起写出更好的代码！🚀
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
16
0- 0
已为社区贡献3条内容
所有评论(0)