语义化元素 - HTML 教程

讲解

HTML5 最重要的进步之一，是引入了一批描述页面区域的语义化元素。在此之前，开发者用 <div id="header">、<div id="footer"> 模拟结构，div 本身没有任何含义；现在 <header>、<nav>、<main>、<article>、<section>、<aside>、<footer> 直接把「这是什么区域」写进了标签名。对浏览器和搜索引擎，它们是理解页面权重的线索；对屏幕阅读器用户，它们是「跳转到主内容」「列出所有导航」这类快捷导航的锚点；对后来维护代码的人，结构一眼可读。

各元素的分工：<header> 是页面或某个区块的头部（logo、标题、导语），一个页面可以有多个 header（每个 article 都可以有自己的）；<nav> 包主导航链接组，只给真正的导航用，页脚零散链接不必；<main> 是页面独一无二的主体内容，一页只能有一个，且不应包含全站共用的头部页脚；<footer> 放版权、联系方式等收尾信息。<aside> 是与主内容相关但可剥离的附属内容——侧边栏、相关阅读、广告位。

最容易纠结的是 <article> 和 <section>：article 是「独立完整、脱离上下文也成立」的内容单元——一篇博客、一条新闻、一个商品卡片、一条评论，理论上可以单独被抓取分发；section 是「主题分组」，把一块内容按主题切开，通常带一个标题。判断口诀：这块内容单独出现在 RSS 阅读器里还成立吗？成立用 article，只是文档的一个章节就用 section。语义化不是教条——找不到合适语义时，老实的 div 也比乱套的 article 强。

示例

一个博客文章页的典型语义骨架：

<body>
  <header>
    <img src="logo.svg" alt="ohmydocs" width="120" height="32" />
    <nav>
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/docs">教程</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h1>HTML 语义化指南</h1>
      <p>发布于 <time datetime="2026-08-09">2026-08-09</time></p>

      <section>
        <h2>为什么要语义化</h2>
        <p>……</p>
      </section>
      <section>
        <h2>常用元素</h2>
        <p>……</p>
      </section>
    </article>

    <aside>
      <h2>相关阅读</h2>
      <ul>
        <li><a href="/docs/html/seo-basics">HTML 与 SEO</a></li>
      </ul>
    </aside>
  </main>

  <footer>© 2026 ohmydocs</footer>
</body>

常见坑

全站只有 div，id 当语义词：<div id="nav"> 只有人看得懂，机器看不懂。有对应语义元素就优先用语义元素。
一个页面多个 main：main 表示「本页的主体」，必须唯一。多个并列主体应放在同一个 main 里或各自成 section/article。
article 与 section 无限套娃：没有明确独立性的内容硬包 article，反而干扰大纲。宁可少用，不可滥用。
nav 包一切链接：nav 给主要导航组用（顶部菜单、目录、分页），正文里的零散超链接不需要 nav。

小结

header/nav/main/article/section/aside/footer 把页面区域明码标价；article 装独立内容、section 做主题分组；语义化服务 SEO、无障碍与可维护性，没有合适语义时退回 div。下一章讲讲这对最后的「通用容器」。