HTML 语义化

用有含义的标签代替 <div>——搜索引擎和屏幕阅读器能更好地理解页面结构。

学完本章你将： 掌握 header/nav/main/article/section/aside/footer 语义标签。

传统 vs 语义

html

<!-- ❌ 纯 div——无语义 -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="article">...</div>
<div class="footer">...</div>

<!-- ✅ 语义标签——相同布局，自带含义 -->
<header>...</header>
<nav>...</nav>
<article>...</article>
<footer>...</footer>

常用语义标签

标签	含义
` `	页头（logo、导航）
` `	导航链接区域
` `	页面主体内容（每页一个）
` `	独立的文章/帖子
` `	文档分区（带标题）
` `	侧边栏/补充内容
` `	页脚（版权、链接）

典型页面结构

html

<body>
  <header>
    <h1>我的博客</h1>
    <nav>
      <a href="/">首页</a>
      <a href="/about">关于</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>文章标题</h2>
      <section>
        <h3>第一部分</h3>
        <p>内容……</p>
      </section>
    </article>

    <aside>
      <h3>相关文章</h3>
      <ul><li>...</li></ul>
    </aside>
  </main>

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

语义化标签

HTML 语义化

传统 vs 语义

常用语义标签

典型页面结构

🛠️ 学完试试这些工具