HTML 语义化基础 📚

HTML 语义化是指使用具有明确含义的标签来构建网页结构，而非仅依赖样式类名。它能让代码更清晰、提升可访问性（Accessibility）和搜索引擎优化（SEO）效果。

常用语义元素 📋

<header>：定义页面或区域的头部（如网站标题、导航栏）
<nav>：表示导航链接区域
<main>：页面主要内容区域
<section>：定义文档中的分块内容（如文章章节）
<article>：独立内容区块（如博客文章）
<footer>：页面或区域的底部信息
<aside>：侧边栏内容（与主内容相关但独立）

语义化的优势 ✅

增强可读性：开发者更容易理解页面结构
提升SEO：搜索引擎能更好地识别内容重点
无障碍访问：屏幕阅读器可准确解析内容层级
维护成本降低：代码逻辑更清晰，便于后期修改

实践示例 🧪

<body>
  <header>
    <h1>网站标题</h1>
    <nav>
      <ul>
        <li><a href="/courses/html_basics">HTML基础</a></li>
        <li><a href="/courses/css_styling">CSS样式</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h2>语义化标签详解</h2>
      <p>使用 `<article>` 包裹独立内容...</p>
    </section>
  </main>
  <footer>
    <p>© 2023 本站版权所有</p>
  </footer>
</body>

HTML语义结构示意图

拓展学习 🔍