很多初学者写页面满屏都是 <div> 和 <span>，浏览器只知道"这里有个盒子"，却不知道它是导航、正文还是页脚。HTML5 提供了一批语义化标签，让标签名本身就能表达含义，对搜索引擎优化和无障碍访问都更友好。

传统 div 布局的问题

<div class="header">
  <div class="nav">导航</div>
</div>
<div class="main">正文</div>
<div class="footer">页脚</div>

功能上没问题，但代码里到处是 class，人和搜索引擎都要靠 class 名去猜结构。

常用语义化标签

一篇典型的文章页面可以这样组织：

<header>
  <h1>雪梨代码库</h1>
  <nav>
    <a href="/">首页</a>
    <a href="/tags">标签</a>
  </nav>
</header>

<main>
  <article>
    <h1>文章标题</h1>
    <p>正文第一段……</p>
    <section>
      <h2>小节标题</h2>
      <p>小节内容……</p>
    </section>
  </article>

  <aside>相关推荐</aside>
</main>

<footer>© 2026 雪梨代码库</footer>

各标签的含义：

  • <header>：页面或区块的头部，放标题、logo
  • <nav>：导航链接区域
  • <main>：页面主内容，一个页面只用一次
  • <article>：独立成篇的内容，如一篇文章、一条评论
  • <section>：按主题分组的内容块，通常带标题
  • <aside>：与主内容相关的侧边内容
  • <footer>：页脚，放版权、联系方式

文本内容也讲究语义

<h1>一级标题，一个页面最好只有一个</h1>
<h2>二级标题</h2>
<p>这是一个段落。</p>
<strong>加粗且重要，读屏软件会重读</strong>
<em>倾斜且强调语气</em>
<blockquote>引用别人的话</blockquote>
<ul><li>无序列表项</li></ul>
<ol><li>有序列表项</li></ol>
<figure>
  <img src="a.jpg" alt="示意图">
  <figcaption>图片说明</figcaption>
</figure>

<strong> 和 <em> 与 <b>、<i> 的区别在于：前两者带"重要/强调"的语义，搜索引擎和读屏软件能理解，而不只是变个样式。

语义化的实际好处

  1. 搜索引擎更容易理解页面结构，利于收录和排名
  2. 读屏软件可以按语义跳转，视障用户能直接跳到 <main> 或文章区
  3. 代码可读性高，看到 <nav> 就知道是导航，不用去查 class 名

小结

  • 语义化标签让标签名表达含义，替代满屏的 div
  • 页面骨架常用 header、nav、main、article、section、aside、footer
  • main 每页只用一次，h1 也建议只出现一次
  • strong/em 带语义，优先于纯样式的 b/i