HTML5 语义化标签使用技巧

什么是语义化

语义化 HTML 是指使用具有明确含义的标签来描述内容，而不是仅用 div 和 span 构建页面结构。语义化让代码更具可读性，有助于 SEO 和可访问性。

常用语义化标签

页面结构标签

<header>    <!-- 页眉，通常包含导航、logo、站点标题 -->
<nav>       <!-- 导航链接区域 -->
<main>      <!-- 页面主要内容（每个页面只有一个） -->
<article>   <!-- 独立的内容块，如博客文章、新闻 -->
<section>   <!-- 有主题的内容分组，通常带标题 -->
<aside>     <!-- 侧边栏或补充内容 -->
<footer>    <!-- 页脚，包含版权、联系信息 -->

基本页面框架

<body>
  <header>
    <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>
        <h1>文章标题</h1>
        <time datetime="2025-03-15">2025年3月15日</time>
      </header>
      <section>
        <h2>第一节</h2>
        <p>内容...</p>
      </section>
      <section>
        <h2>第二节</h2>
        <p>内容...</p>
      </section>
      <footer>
        <p>标签: <a href="/tag/html">HTML</a></p>
      </footer>
    </article>

    <aside>
      <h3>相关文章</h3>
      <ul>
        <li><a href="/css-guide">CSS 指南</a></li>
      </ul>
    </aside>
  </main>

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

文本级语义标签

<time datetime="2025-01-01T10:00">2025年1月1日 上午10点</time>
<mark>高亮文本</mark>
<strong>重要内容</strong>（粗体，表示重要性）
<em>强调内容</em>（斜体，表示语气强调）
<cite>引用来源标题</cite>
<blockquote>长引用文本块</blockquote>
<q>短引用</q>
<code>console.log('hello')</code>
<pre>预格式化的代码块</pre>
<abbr title="HyperText Markup Language">HTML</abbr>
<address>联系方式</address>
<small>免责声明或次要信息</small>
<figcaption>图片或代码块的标题</figcaption>
<details>
  <summary>点击展开</summary>
  隐藏的详细信息
</details>

语义化对 SEO 的影响

搜索引擎使用语义化标签来理解页面结构：

<h1> 到 <h6> 定义内容层次，搜索引擎用它们理解主题结构
<article> 告诉搜索引擎这是一个独立的内容单元
<nav> 标识导航区域，搜索引擎可跳过
<main> 告诉搜索引擎核心内容位置
<time> 帮助搜索引擎理解时间信息

可访问性（ARIA）

语义化标签本身就提供了 ARIA 角色：

HTML 标签	默认 ARIA 角色
`<nav>`	`navigation`
`<main>`	`main`
`<header>`	`banner`
`<footer>`	`contentinfo`
`<aside>`	`complementary`
`<form>`	`form`
`<table>`	`table`

补充 ARIA 属性

<!-- 当语义化标签不够用时，使用 ARIA -->
<nav aria-label="主导航">
<button aria-label="关闭" onclick="closeDialog()">×</button>
<div role="alert">表单提交失败</div>

<!-- 增强可访问性 -->
<button aria-expanded="false" aria-controls="menu">
  菜单
</button>

常见错误与最佳实践

不要滥用

<!-- 错误：article 内不应该直接包含其他 article 的同级内容 -->
<article>
  <article><!-- 合理：嵌套 article，如评论中的评论 --></article>
</article>

<!-- 错误：导航用 div 而不是 nav -->
<div class="nav-links">...</div>

<!-- 正确 -->
<nav>...</nav>

最佳实践清单

每个页面只有一个 <main>，且不应嵌套在 <article>、<aside> 等标签内
<article> 应包含完整的信息，脱离上下文也能理解
<section> 通常应包含标题（h1-h6）
<aside> 用于与主内容间接相关的补充信息
确保标题层级正确：h1 → h2 → h3，不要跳级
<nav> 标记主要导航，footer 中的链接不一定要用 nav
使用 <time> 替代纯文本时间，加 datetime 属性

总结

语义化 HTML5 是现代 Web 开发的基石。它不仅让代码更清晰易维护，更是 SEO 和可访问性的基础。建议在开发中优先使用语义化标签，只在没有合适标签时才使用 div/span。