首页 › HTML › HTML5 语义化 › 语义标签与页面结构

语义化是 HTML5 最重要的理念——用有意义的标签描述内容，而非用 <div> 包一切。

为什么语义化

<!-- ❌ 非语义化（div 农场） -->
<div class="header">网站标题</div>
<div class="nav">导航菜单</div>
<div class="main">
  <div class="article">
    <div class="title">文章标题</div>
    <div>文章内容</div>
  </div>
  <div class="sidebar">侧边栏</div>
</div>
<div class="footer">版权信息</div>

<!-- ✅ 语义化 -->
<header>网站标题</header>
<nav>导航菜单</nav>
<main>
  <article>
    <h1>文章标题</h1>
    <p>文章内容</p>
  </article>
  <aside>侧边栏</aside>
</main>
<footer>版权信息</footer>

语义化的收益：

收益	说明
SEO	搜索引擎更好理解页面结构，提升排名
无障碍	屏幕阅读器根据语义跳转导航
可维护性	代码自文档化，开发人员一看就懂
浏览器默认样式	语义标签有合理的默认行为

核心语义标签

<body>
  <!-- ⭐ 页面头部：Logo、站点名、导航 -->
  <header>
    <h1>我的博客</h1>
    <nav>
      <a href="/">首页</a>
      <a href="/about">关于</a>
    </nav>
  </header>

  <!-- ⭐ 页面主要内容（每个页面只有一个） -->
  <main>
    <!-- ⭐ 独立内容块（博客文章、新闻） -->
    <article>
      <header>
        <h2>文章标题</h2>
        <time datetime="2026-05-16">2026年5月16日</time>
      </header>
      <p>文章正文...</p>
      <footer>
        <p>标签：<a href="/tag/html">HTML</a></p>
      </footer>
    </article>

    <!-- ⭐ 页面分区（含主题的组） -->
    <section>
      <h2>相关文章</h2>
      <!-- 相关文章列表 -->
    </section>

    <!-- ⭐ 侧边栏（与主内容间接相关） -->
    <aside>
      <h3>作者简介</h3>
      <p>前端开发者，专注于 Web 技术。</p>
    </aside>
  </main>

  <!-- ⭐ 页面底部：版权、法律信息 -->
  <footer>
    <p>&copy; 2026 我的博客</p>
  </footer>
</body>

标签	含义	注意
<header>	页眉/区块头部	可用于页面级和 <article> / <section> 内
<nav>	导航链接	页面主要导航
<main>	页面主体	每页只有一个
<article>	独立内容	RSS 订阅单位，可独立分发
<section>	主题分区	含 <h1>~<h6> 标题
<aside>	侧边栏/旁注	与主内容间接相关
<footer>	页脚/区块尾部	版权、作者信息

典型页面骨架

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文章标题 - 我的博客</title>
</head>
<body>
  <header>
    <h1>我的博客</h1>
    <nav>
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/blog">博客</a></li>
        <li><a href="/about">关于</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>HTML5 语义化指南</h2>
        <p>发布于 <time datetime="2026-05-16">2026-05-16</time></p>
      </header>

      <section>
        <h3>什么是语义化</h3>
        <p>...</p>
      </section>

      <section>
        <h3>核心标签</h3>
        <p>...</p>
      </section>
    </article>

    <aside>
      <h3>热门文章</h3>
      <ul>
        <li><a href="/post1">CSS Grid 教程</a></li>
        <li><a href="/post2">JavaScript 异步编程</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 我的博客</p>
  </footer>
</body>
</html>

标签选用指南

小结

语义标签	替代了过去用 <div class="xxx"> 的写法
<header>	头部区域
<nav>	导航
<main>	主内容（唯一）
<article>	独立内容单元
<section>	主题分区
<aside>	侧边旁注
<footer>	底部区域

上一节：HTML5 输入类型与验证 下一节：文本级语义与交互元素

贡献者: 布欧-Lewyon