哎，先别急着点头说“懂了”，我知道你在想什么——这不就是换个名字写HTML吗？我当年也是这么觉得的，直到有一次项目上线，SEO同事对着我的代码叹气，说“这页面像是给机器看，还是给人看的？”那一刻我才意识到，<div>和<header>虽然长得有点像，但骨子里完全是两码事。今天咱们不聊那些让人头大的术语，就聊聊怎么把这些标签用对、用活，让你的网页既漂亮又聪明。
先搞清楚：div和span到底是谁
打个比方，<div>就像是你家里的纸箱，<span>则是装在小盒子里的某个小物件。它们本身没有“身份”，纯粹是为了把东西包起来、归类、方便你贴标签（CSS样式）或者搞事情（JavaScript操作）。
举个例子，你在写一个博客文章页面，想用红色字体突出显示某个关键词：
<p>今天天气真不错，<span class="highlight">阳光明媚</span>，适合出去走走。</p>
这里用<span>是因为它只是文字的一部分，属于行内元素，不会换行，不影响整体布局。但如果你要把整段文字包起来，换个背景色，那就该用<div>了：
<div class="article-box">
<h2>我的周末计划</h2>
<p>今天天气真不错，阳光明媚，适合出去走走。</p>
</div>
<div>是块级元素，默认占满整行，适合用来划分页面区域。很多新手喜欢滥用<div>，恨不得每一行文字都套一层<div>，结果代码冗长难读，维护起来像解毛线团。记住，<div>和<span>是“万能胶”，不是“必需品”，能不用就不用，除非你真的需要一个没有语义的容器。
语义化标签：给网页装上“身份证”
HTML5出来之后，开发者们终于忍无可忍，发明了一批有“身份”的标签。它们不仅告诉浏览器“这是哪块内容”，还告诉搜索引擎、屏幕阅读器、甚至未来的AI：“嘿，这是头部，这是导航，这是正文！”
header：页面的“脸面”
<header>通常放在页面顶部，包含标题、Logo、导航等。但它不限于页面头部，文章内部也可以用。
<header>
<h1>我的技术博客</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
注意，<header>不是只放一次的全局头部，一篇文章里可以有多个<header>，比如每个章节开头加个小标题区域。
nav：导航的专属地盘
<nav>专门用来包裹主导航链接。不是所有链接都要塞进去，比如页脚的“关于我们”“隐私政策”这种辅助链接，就不必用<nav>。
<nav aria-label="主导航">
<ul>
<li><a href="/articles">文章</a></li>
<li><a href="/tutorials">教程</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>
加个aria-label是给屏幕阅读器听的，让它们知道这块是“主导航”，而不是随便一堆链接。这是细节，但很加分。
footer：收尾要有仪式感
<footer>通常放在页面底部，包含版权信息、联系方式、友情链接等。同样，文章也可以有自己的<footer>，放作者信息、发布日期、标签等。
<footer>
<p>© 2024 我的博客 | <a href="/privacy">隐私政策</a></p>
</footer>
main：正文的C位
<main>标签明确告诉浏览器：“嘿，这段是页面主要内容，别管那些边边角角了。”一个页面只能有一个<main>，而且不能放在<article>、<aside>、<header>、<footer>里面。
<main>
<article>
<header>
<h2>HTML5语义化标签实战指南</h2>
<time datetime="2024-01-15">2024年1月15日</time>
</header>
<p>本文详细介绍了...</p>
<footer>
<p>作者：张三 | 标签：HTML, 前端</p>
</footer>
</article>
</main>
你看，<article>内部也可以有自己的<header>和<footer>，这就是语义化的魅力——层层嵌套，结构清晰。
section和article：别搞混了
这两个最容易混淆。简单来说：<article>是独立的内容块，可以单独拿出来用；<section>是按主题划分的内容区块，通常有标题。
比如一篇博客文章用<article>，而文章里的“简介”“正文”“参考资料”三个部分用<section>：
<article>
<h2>如何学好HTML</h2>
<section>
<h3>简介</h3>
<p>HTML是网页的基础...</p>
</section>
<section>
<h3>正文</h3>
<p>学习HTML需要实践...</p>
</section>
<section>
<h3>参考资料</h3>
<p>MDN Web Docs...</p>
</section>
</article>
新手最常踩的三个坑
坑一：以为语义化标签能替代CSS布局
很多人写<header>的时候，下意识给它加一堆浮动、定位、宽高，结果页面乱成一锅粥。记住，语义化标签是“内容结构”，不是“布局容器”。布局该用<div>还是用CSS Grid/Flexbox，是你的事，标签本身不负责排版。
坑二：滥用<section>，结果页面全是<section>套<section>
有些同学觉得<section>万能，于是把页面切成无数小块，每块都包一个<section>，最后连自己都搞不清哪是哪。判断标准很简单：如果这块内容有独立意义、可以单独引用，就用<article>；如果只是按主题分块，才用<section>。
坑三：忽略了无障碍访问（a11y）
语义化标签不只是给搜索引擎看的，也是给视障用户用的。他们用屏幕阅读器浏览网页，靠的是标签语义来判断内容结构。如果你把导航链接包在<div>里，屏幕阅读器根本不知道那是导航。所以，用<nav>、<main>、<article>这些标签，不仅是最佳实践，更是一种尊重。
一句话总结
<div>和<span>是“隐形人”，适合纯布局；<header>、<nav>、<footer>、<main>、<article>、<section>是“有身份证的人”，告诉世界你是谁、你在哪、你干什么。用对标签，你的网页不仅更干净、更易维护，还会被搜索引擎和辅助技术高高捧起。
下次写HTML前，先问自己一句：“这段内容，它想说什么？”答案往往就藏在正确的标签里。