HTML5语义化标签怎么用？项目实战中的页面结构优化方法、代码示例与10个常见问题

把 <div> 用到极致、class 套了七八层，浏览器和爬虫读到的依然是一堆没有含义的盒子。语义化标签从来不是”换个标签名”这么简单，它决定了一篇页面的骨架能不能同时被搜索引擎、屏幕阅读器和后来接手的人读懂。

🧱 为什么 div 用得好好的，还要换语义化标签

class 名属于团队内部约定，机器读不懂。<div class="nav"> 在爬虫眼里和 <div class="abc"> 没有区别，都是一块没有身份的容器。语义化标签把”这块区域是干什么的”直接写进了文档结构，带来三个层面的实际收益：

搜索引擎：更容易判断主导航、正文主体、次要相关内容的位置，配合标题层级理解内容主次；
辅助技术：屏幕阅读器可以借助 landmark（地标区域）在页面里快速跳跃，而不是一行行往下听；
团队协作与维护：结构自解释，接手的人不用先猜一遍 class 命名规则。

在 HTML5 之前，这类信息只能靠 ARIA 的 role="navigation"、role="main" 去补。原生语义标签相当于把这些角色内置了，写法更短，语义也更稳。

🧭 每个标签的”岗位”分清楚

语义化用错，多半不是语法问题，而是岗位理解错了：

标签	职责与判断标准
`<header>`	页面页头，也可以作为 article / section 的头部。一个页面允许出现多次
`<nav>`	主要导航区块。面包屑、页脚的一堆次要链接不适合都套上它
`<main>`	页面唯一主体内容。一页只能有一个，且不能作为 article、aside、footer、header、nav 的后代
`<article>`	能独立分发、被订阅或被整块复用的完整内容单元，比如一篇正文、一条评论、一张商品卡
`<section>`	按主题切分的分组，绝大多数情况下应该自带一个标题
`<aside>`	与主线相关但可以单独剥离的内容，侧栏推荐、作者简介、延伸阅读都归它
`<footer>`	页脚或区块脚，同样可以出现多次
`<figure>` + `<figcaption>`	图、表、代码块这类”带说明、自成一体”的单元
`<time>` / `<mark>` / `<address>` / `<details>`	细节增强：机器可读的时间、重点标记、联系方式、可折叠区块
`<search>`	较新的标签，用于包裹站内搜索表单，2023 年进入标准，新项目可以直接用

💡 一个简单口诀：这块内容单独抽出去还成不成立？ 成立就用 article，只是主线里的一个主题分段就用 section，纯粹为了布局和样式兜底就用 div。

📦 项目里怎么搭：一个首页骨架示例

语义化不是把 div 全替换掉，而是先把骨架立起来，剩下的交给 div 做样式容器：

<body>
  <header class="site-header">
    <h1>站点名称或本页主标题</h1>
    <nav aria-label="主导航">
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/docs/">文档</a></li>
      </ul>
    </nav>
  </header>

  <main id="main">
    <article>
      <header>
        <h2>文章标题</h2>
        <p>发布于 <time datetime="2026-10-05">2026年10月5日</time></p>
      </header>

      <section>
        <h3>第一个主题小节</h3>
        <p>正文内容……</p>
        <figure>
          <img src="demo.png" alt="结构示意图">
          <figcaption>图：页面区域划分示意</figcaption>
        </figure>
      </section>

      <footer>
        <p>本文标签：语义化、结构优化</p>
      </footer>
    </article>

    <aside>
      <h2>相关阅读</h2>
      <ul><li><a href="/a">延伸文章</a></li></ul>
    </aside>
  </main>

  <footer class="site-footer">
    <p>© 站点版权信息</p>
  </footer>
</body>

几个关键点：<article> 内部可以有自己的 header 和 footer，用来放标题、发布时间、标签；aside 放在 main 里面表示”与主体相关”，放在 main 外面则更偏向整站的侧栏；nav 加了 aria-label，是为了在同一页有多个导航时区分彼此。

写完可以做一个快速自检：把 CSS 全部去掉，页面还能不能读通？ 把标题单独抽出来，能不能组成一份完整的大纲？两个问题都过关，骨架基本就对了。

🔍 页面结构优化的 6 个抓手

标题层级只走直线：h1 → h2 → h3，不跳级、不倒挂。标题是爬虫理解内容主次成本最低的信号。
landmark 四件套齐全：页头（banner）、导航（navigation）、主体（main）、页脚（contentinfo），缺一块就等于少了一个地标。
可点的东西用对标签：跳转用 <a>，触发行为用 <button>，别拿 div 加 onclick 顶替，键盘和读屏都会失效。
图文单元进 figure：图片配 figcaption，说明文字和图片形成绑定关系，alt 属性也别空着。
DOM 顺序 = 阅读顺序：不要用 flex 的 order 或绝对定位把视觉顺序和代码顺序搞反，爬虫读到的是 DOM 顺序。
语义骨架之上叠加结构化数据：JSON-LD 描述文章、作者、发布时间等信息，与语义化标签是互补关系，不是替代关系。

✅ 收个尾：结构对了，后面的优化才有意义

语义化标签真正的价值，在于让一份 HTML 文档在没有样式、没有 JavaScript 的情况下依然具备完整的可读性和明确的层次。标题层级清晰、landmark 完整、交互元素语义正确，这三件事做扎实，SEO、可访问性、可维护性基本就同时被照顾到了。至于具体的标签选择，记住”能不能单独抽出去还成立”这条判断线，绝大多数纠结都能当场解决。