HTML 语义化与 ARIA

这一课你将能做到

1. 用 HTML5 语义标签（<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>）构建页面骨架
2. 为复杂组件补充 ARIA 属性（role、aria-label、aria-expanded、aria-live 等），提升无障碍访问体验
3. 理解语义化对 SEO、屏幕阅读器和代码可维护性的综合价值

为什么要学

HTML5 引入了大量语义标签，不是为了让你多记几个单词，而是为了解决一个根本问题：「这段内容到底是什么？」搜索引擎爬虫、屏幕阅读器、RSS 阅读器、社交分享机器人——它们都看不到 CSS 渲染后的视觉效果，只能读取 HTML 标签来判断内容结构。

CodeForge 的课程列表页面如果用 <div class="card"> 堆砌，搜索引擎只知道「这里有几个 div」，不知道「这是课程卡片、有标题、有描述、有价格」。换成 <article> + <h2> + <p> + <time>，信息的可读性和可访问性会完全不同。

语义化和 ARIA 不是「加分项」，而是现代 Web 开发的底线要求。在很多国家和地区，Web 可访问性（Accessibility，简称 a11y）是法律要求。

先建立图像

CodeForge 首页语义化结构：

<body>
├── <header>
│   └── <nav aria-label="主导航"> ... </nav>
│
├── <main>
│   ├── <section aria-labelledby="hero-title">
│   │   └── <h1 id="hero-title">...</h1>
│   │
│   ├── <section aria-labelledby="courses-title">
│   │   └── <h2 id="courses-title">热门课程</h2>
│   │   └── <ul>
│   │       └── <li>
│   │           └── <article>
│   │               ├── <h3>课程标题</h3>
│   │               ├── <p>描述</p>
│   │               └── <time datetime="2026-10-07">...</time>
│   │
│   └── <aside aria-label="侧边栏">
│       └── <p>学习提示...</p>
│
└── <footer> ... </footer>

跟着做

步骤 1：用语义标签重写页面骨架

创建 semantic.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>语义化示例 | CodeForge</title>
  <style>
    :root { --primary: #2563eb; --surface: #fff; --text: #0f172a; --muted: #64748b; --border: #e2e8f0; }
    body { font-family: system-ui, sans-serif; margin: 0; color: var(--text); background: #f8fafc; }
    header, footer { background: var(--surface); border-bottom: 1px solid var(--border); padding: 1rem 2rem; }
    footer { border-top: 1px solid var(--border); border-bottom: none; text-align: center; color: var(--muted); }
    nav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
    nav a { color: var(--text); text-decoration: none; font-weight: 500; }
    main { max-width: 900px; margin: 2rem auto; padding: 0 1rem; }
    .hero { text-align: center; padding: 3rem 1rem; }
    .hero h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 0.5rem; }
    .course-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 1.5rem; }
    article { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; }
    article h3 { margin: 0 0 0.5rem; font-size: 1.125rem; }
    article p { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.9375rem; }
    time { font-size: 0.875rem; color: var(--muted); }
    aside { background: #eff6ff; border-left: 4px solid var(--primary); padding: 1rem 1.25rem; border-radius: 0 8px 8px 0; margin-top: 2rem; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="主导航">
      <ul>
        <li><a href="#" aria-current="page">首页</a></li>
        <li><a href="#">课程</a></li>
        <li><a href="#">路线图</a></li>
        <li><a href="#">关于</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section class="hero" aria-labelledby="hero-title">
      <h1 id="hero-title">构建你的前端技能树</h1>
      <p>从 HTML 语义化到现代 CSS 布局，系统化掌握网页开发。</p>
    </section>

    <section aria-labelledby="courses-title">
      <h2 id="courses-title">热门课程</h2>
      <div class="course-grid">
        <article>
          <h3>HTML/CSS 基础精讲</h3>
          <p>掌握语义化标签、盒模型、Flexbox 与 Grid 布局。</p>
          <time datetime="2026-10-07">更新于 2026年10月7日</time>
        </article>
        <article>
          <h3>JavaScript 核心原理</h3>
          <p>深入理解作用域、闭包、原型链与异步编程。</p>
          <time datetime="2026-09-20">更新于 2026年9月20日</time>
        </article>
      </div>
    </section>

    <aside aria-label="学习建议">
      <p><strong>提示：</strong>建议按顺序学习基础课程，再进入进阶内容。</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 CodeForge 学习平台. 保留所有权利。</p>
  </footer>
</body>
</html>