Frontend Academy · 课时

语义化标签：header、nav、main、article、footer

Q: 「语义化标签：header、nav、main、article、footer」这节课中我会学到什么？

用语义化 HTML5 元素替代没有意义的 div，并了解它们如何帮助浏览器、搜索引擎和屏幕阅读器。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

用语义化 HTML5 元素替代没有意义的 div，并了解它们如何帮助浏览器、搜索引擎和屏幕阅读器。

第 2 / 4 课13 个步骤

语义化标签：header、nav、main、article、footer 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是语义化 HTML？

语义化 HTML使用能够描述内容含义的元素，而不仅仅描述外观。<article>表示“这是一段自成一体的内容”。通用的<div>则没有任何语义。

语义化之前：div 堆砌

早期网页开发者完全使用<div>和<span>元素构建布局。屏幕阅读器无法区分导航、内容和广告。搜索引擎只能猜测页面结构。

<!-- Old way -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div>

<header> — 网站或部分的页眉

<header>元素包含页面或某个部分的介绍性内容，通常包括徽标、网站名称和导航。一个页面可以有多个页眉——网站有一个，每篇文章也可以有一个。

<header>
  <a href="/"><img src="logo.svg" alt="CoddyKit"></a>
  <nav>...</nav>
</header>

<nav> — 导航链接

使用<nav>包裹导航链接集合，例如主菜单、面包屑路径或目录。屏幕阅读器会播报导航地标，让用户可以直接跳到这些地标或跳过它们。

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/courses">Courses</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<main> — 主要内容

每个页面应该恰好有一个<main>。它包含本页面独有的主要内容，而不是导航或页脚等重复元素。辅助技术可以让用户直接跳转到主要内容。

<main>
  <h1>Learn Frontend Development</h1>
  <p>Start your journey here...</p>
</main>

<article> — 自成一体的内容

<article>用于包裹自身具有完整意义、可以单独发布或转载的内容，例如博客文章、新闻条目、用户评论或产品卡片。请思考：“如果把它复制到另一个网站上，它是否仍然有意义？”

<article>
  <h2>Introduction to CSS Grid</h2>
  <p>CSS Grid revolutionised web layout...</p>
  <time datetime="2025-01-15">January 15, 2025</time>
</article>

<section> — 主题分组

<section>用于将属于同一主题的相关内容分组，例如章节、标签页或主题区域。每个部分通常都有一个标题。如果内容可以独立存在，请使用独立内容元素。

<section>
  <h2>Core Technologies</h2>
  <p>HTML, CSS, and JavaScript...</p>
</section>

<aside> — 补充内容

<aside>包含与周围内容有间接关联的内容，例如侧边栏、引述、广告或相关链接。屏幕阅读器会将它作为补充地标提供给用户。

<footer> — 收尾内容

<footer>
  <p>&copy; 2025 CoddyKit. All rights reserved.</p>
  <nav aria-label="Footer">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>

标题层级：h1 到 h6

使用标题创建逻辑清晰的文档大纲。每个页面只能有一个<h1>。子标题使用 h2，下一级子标题使用 h3，依此类推。不要跳过层级，也不要仅仅因为视觉大小而使用标题。

为什么语义化对搜索引擎优化和无障碍访问很重要

搜索引擎利用语义结构理解页面内容——具有恰当地标和标题层级的页面通常排名更高。屏幕阅读器用户通过地标和标题导航，因此语义化直接关系到可访问性。

快速检查

哪个元素应该包裹页面的主要独有内容，并且在页面中恰好出现一次？

在交互式课程中回答

回顾：语义化 HTML5 地标

使用<header>、<nav>、<main>、<article>、<section>、<aside>和<footer>为文档提供结构，让浏览器、搜索引擎和屏幕阅读器都能理解。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 41
课程: 163

免费开始学习查看完整课程

常见问题解答