别再一div到底！！！HTML语义化标签，拯救你的流水账代码

引言

你写前端页面，是不是还像小学生写作文那样，只会一"逗"到底，满篇全是div标签？

就像写作文一样，不能只用逗号，还得有句号、分号、引号。其实，HTML早已为我们准备了更合适的"标点符号"——今天我们就来聊聊，怎样用语义化标签告别"div流水账"。

什么是"div流水账"？

先来看一个典型的反面教材：

<div class="header">
  <div class="nav">
    <div class="nav-item">首页</div>
    <div class="nav-item">关于</div>
  </div>
</div>
<div class="main">
  <div class="article">
    <div class="title">标题</div>
    <div class="content">内容</div>
  </div>
</div>
<div class="footer">
  <div class="copyright">版权信息</div>
</div>

<!-- 整个页面的头部 -->
<header>
  <h1>我的博客</h1>
  <nav>...</nav>
</header>


<!-- 也可以是某篇文章的头部 -->
<article>
  <header>
    <h2>文章标题</h2>
    <p>作者：张三 | 发布时间：2026-05-23</p>
  </header>
  <p>文章内容...</p>
</article>

<nav>
  <a href="/">首页</a>
  <a href="/blog">博客</a>
  <a href="/about">关于我</a>
</nav>

<main>
  <!-- 这里放页面最核心的内容 -->
  <h1>今天我们来聊语义化标签</h1>
  <p>巴拉巴拉巴拉...</p>
</main>

<article>
  <h2>这是一篇博客</h2>
  <p>内容内容内容...</p>
</article>

<section>
  <h2>产品介绍</h2>
  <p>我们的产品非常棒...</p>
</section>


<section>
  <h2>用户评价</h2>
  <p>五星好评！</p>
</section>

<main>
  <article>正文内容...</article>
</main>


<aside>
  <h3>相关推荐</h3>
  <ul>
    <li><a href="#">推荐文章1</a></li>
    <li><a href="#">推荐文章2</a></li>
  </ul>
</aside>

看到差别了吗？

• 代码更短了！不需要写那么多class="xxx"
• 可读性更强了！一眼就知道哪是哪
• 浏览器和搜索引擎更懂了！SEO自动+1

常见误区，别踩坑！

❌ 误区1：语义化标签就是"把div换成别的名字"

不是的！语义化不是为了装逼，是真的有用。用对了才叫语义化，用错了还不如用div。

比如，别什么都往<article>里塞。一个按钮？一个输入框？这些都不是独立的文章，就别用<article>。

❌ 误区2：所有地方都要用语义化标签

不是的！有些地方就是纯粹的布局容器，没有语义，那就老老实实用地div。

比如你想把两个并排的元素包起来做flex布局，这个外层的容器就用div，完全没问题。

记住：语义化标签是用来描述"这是什么内容"，不是用来描述"这个长什么样"。

❌ 误区3：是万能的

很多人学会<section>之后，就把所有div都换成<section>。这也是不对的！

<section>是"有主题的一组内容"，如果只是单纯为了布局，还是用div更合适。

写在最后

其实语义化标签一点都不难，就像写作文用标点符号一样：

• 标题用<h1>~<h6>，就像作文里的一级标题、二级标题

• 正文用<main>，就像作文的正文

• 一篇独立的文章用<article>，就像一篇完整的作文

• 一个主题段落用<section>，就像作文里的一个段落

• 导航用<nav>，就像作文的目录

• 页头页脚用<header>和<footer>，就像作文的标题和落款

下次写HTML的时候，别再一"div"到底了。给你的代码加上合适的"标点符号"，让它变成一篇"优秀作文"吧！

毕竟，写代码就像写作文——不仅要能看懂，还要写得优雅。✨