告别无脑 ＜div＞：HTML 语义化标签入门
生活中的例子 01
让屏幕阅读器（盲人使用的工具）能准确读出网页结构。
生活中的例子 02
让搜索引擎（如 Google, 百度）更好地理解你的网页内容，提升排名。
生活中的例子 03
让其他接手你代码的程序员一眼看懂网页布局，不需要猜来猜去。
新手入门指南
COPY
你的网页还没“学会说话”吗？
1. 搬家箱子的故事
想象一下，你刚搬完家，房间里堆满了 100 个一模一样的纸箱子。最糟糕的是，每个箱子上都只写着一个词：“东西”。
你要找牙刷？祝你好运，你得一个个翻。 你要找锅铲？慢慢找吧。
这其实就是很多初学者写 HTML 代码的样子。他们用<div>标签包住所有东西。<div>就像那个写着“东西”的箱子，它本身没有任何意义，只是一个容器。
而HTML 语义化标签（Semantic Tags），就是把箱子上的标签换成“厨房”、“卧室”、“书房”。虽然箱子还是那个箱子，但所有人都立刻明白里面装的是什么了。
2. 什么是语义化标签？
简单来说，就是用“有名字”的标签来代替无意义的 `<div>`。
在 HTML5 出现之前，我们写网页头部的导航栏通常是这样：
<div class="header">...</div>
浏览器看这段代码时，心里想的是：“哦，这是一个盒子，虽然你给它起名叫 header，但对我来说它只是个普通的盒子。”
现在，我们直接用语义化标签：
<header>...</header>
浏览器看到这行代码时会想：“啊哈！这是网页的头部！我知道这里面肯定是 Logo 和导航菜单！”
这就是语义化：让代码本身就有意义。
3. 常用的三个“新标签”
让我们来看看最常用的三个语义化标签，它们分别对应网页的不同部分：
- `<header>`（头部）：通常放在页面顶部。里面放 Logo、搜索框、或者导航链接。就像文章的标题和作者栏。
- `<article>`（文章）：用于包裹一段独立的内容。比如一篇博客文章、一条新闻、或者一个论坛帖子。这段内容如果被单独拿出来，也是读得通的。
- `<footer>`（底部/页脚）：放在页面最下面。通常包含版权信息（Copyright）、联系方式、或者相关的链接。
4. 实战代码：重构你的网页
来看看这段对比，左边是“老式写法”，右边是“语义化写法”。
🚫 老式写法 (全是 Div):
<div class="top-part"> <h1>我的博客</h1> </div> <div class="blog-post"> <h2>学习 HTML 很有趣</h2> <p>这是正文内容...</p> </div> <div class="bottom-part"> <p>© 2023 某某版权所有</p> </div>
✅ 语义化写法 (清晰明了):
<!-- 头部：告诉浏览器这里是开头 --> <header> <h1>我的博客</h1> </header> <!-- 文章：告诉浏览器这是主要内容 --> <article> <h2>学习 HTML 很有趣</h2> <p>这是正文内容，如果是新闻网站，这里就是新闻本身。</p> </article> <!-- 页脚：告诉浏览器这是结尾信息 --> <footer> <p>© 2023 某某版权所有</p> </footer>
看，代码结构是不是一下子清晰了很多？
5. 新手最容易犯的错
不要为了样式（长相）去用这些标签！
这是最大的误区。有些新手发现<article>标签里的字默认没有任何变化，觉得“没用”，就不想用。
记住：语义化标签不是用来改变字体大小或颜色的（那是 CSS 的工作），它是用来定义结构的。即使它们在屏幕上看起来和<div>一模一样，但在搜索引擎和屏幕阅读器（盲人使用的工具）眼里，它们有着天壤之别。
6. 总结
下次写网页时，别再一股脑用<div>了。问问自己：这一块内容是什么？如果是头部就用<header>，如果是文章就用<article>。做一个有条理的“搬运工”，给你的代码贴上正确的标签吧！