HTML 零基础教程

HTML 语义化标签

1. 语义化 HTML 与结构元素

语义化 HTML 的核心在于赋予网页内容以意义，使其对浏览器和开发者都更易于理解。

与其单纯依赖 <div> 标签来构建页面结构，语义化 HTML 引入了能够描述其包含内容用途的元素。这能提升无障碍性 (Accessibility)、搜索引擎优化 (SEO) 以及代码的整体可维护性。

在本章节中，我们将深入探索 <header>、<nav>、<article>、<aside> 和 <footer> 标签，它们是构建语义化网页的基石。

1. <header> 标签

<header> 标签代表介绍性内容或一组导航链接。它通常包含：

  • 网站的 Logo 或品牌标识
  • 主标题 (<h1> - <h6>)
  • 搜索表单
  • 导航链接（虽然主要导航通常更适合用 <nav>）

一个页面可以有多个 <header> 元素。例如，一个是网站的主页眉，另一个用于特定的 <article>。

示例代码：

<header>
  <img src="logo.png" alt="我的网站 Logo">
  <h1>欢迎来到我的精彩网站</h1>
  <p>这是关于本站的简短介绍。</p>
</header>

解析：

  • <header> 标签清楚地将此部分标识为页面的介绍部分。
  • <img> 标签显示网站 Logo。
  • <h1> 标签提供页面的主标题。
  • <p> 标签提供简短描述。

实际应用：
想象你正在建立一个博客。每篇博客文章都可以有自己的 <header>，包含文章标题、作者和发布日期。而主网站也可以有一个包含网站 Logo 和导航的 <header>。

2. <nav> 标签

<nav> 标签代表页面中包含导航链接的部分。它专用于主要的导航区域，而不仅仅是任何链接组。

示例代码：

<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于</a></li>
    <li><a href="/services">服务</a></li>
    <li><a href="/contact">联系我们</a></li>
  </ul>
</nav>

解析：

  • <nav> 标签清楚地将此部分标识为主要导航。
  • <ul> 和 <li> 标签创建无序链接列表。

何时不使用 <nav>：
页面页脚中的简单链接列表可能不需要 <nav> 标签。请考虑这些链接是否代表了一个重要的导航部分。

3. <article> 标签

<article> 标签代表文档、页面、应用程序或网站中一个独立的组成部分。它应该是可以独立分发或复用的。

常见例子包括：

  • 博客文章
  • 新闻报道
  • 论坛帖子
  • 杂志文章

示例代码：

<article>
  <h2>我的第一篇博客</h2>
  <p>发布于：<time datetime="2023-10-27">2023年10月27日</time></p>
  <p>这是我第一篇博客的内容。很高兴与世界分享我的想法！</p>
</article>

解析：

  • <article> 标签封装了整个博客文章。
  • <h2> 标签提供文章标题。
  • <time> 标签代表特定的时间段。

嵌套 <article> 元素：
你可以相互嵌套 <article> 元素。例如，一篇博客文章可能包含评论，而每条评论本身都可以是一个 <article>。

4. <aside> 标签

<aside> 标签代表页面中与主要内容间接相关（切线相关）的部分。

它通常用于：

  • 侧边栏
  • 引用挂件 (Pull quotes)
  • 广告
  • 相关链接

示例代码：

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

解析：

  • <aside> 标签将此部分标识为补充内容。
  • <h3> 标签为侧边栏提供标题。

<aside> 的放置：<aside> 元素可以出现在 <article> 内部或外部，具体取决于它与主要内容的关系。如果它直接与文章相关，应放在内部；如果更通用，可以放在外部。

5. <footer> 标签

<footer> 标签代表一个版块或页面的页脚。它通常包含：

  • 版权信息
  • 联系信息
  • 服务条款
  • 隐私政策
  • 网站地图
  • 社交媒体链接

一个页面可以有多个 <footer> 元素，例如，一个是主网站页脚，另一个用于特定的 <article>。

示例代码：

<footer>
  <p>© 2026 我的网站. 保留所有权利。</p>
  <p><a href="/contact">联系我们</a> | <a href="/privacy">隐私政策</a></p>
</footer>

解析：

  • <footer> 标签清楚地将此部分标识为页脚。
  • © 是版权符号的 HTML 实体。

6. 综合演练：组合使用

让我们将所有这些元素组合成一个完整的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的语义化 HTML 页面</title>
</head>
<body>

  <header>
    <img src="logo.png" alt="我的网站 Logo">
    <h1>欢迎来到我的精彩网站</h1>
    <p>一个关于 Web 开发的网站。</p>
  </header>

  <nav>
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/blog">博客</a></li>
      <li><a href="/about">关于</a></li>
      <li><a href="/contact">联系</a></li>
    </ul>
  </nav>

  <article>
    <h2>我的第一篇博客</h2>
    <p>发布于：<time datetime="2023-10-27">2023年10月27日</time></p>
    <p>这是我第一篇博客的内容...</p>
  </article>

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

  <footer>
    <p>© 2023 我的网站. 保留所有权利。</p>
  </footer>

</body>
</html>

这个例子展示了如何使用 <header>, <nav>, <article>, <aside> 和 <footer> 标签从语义上构建一个基本的网页。