Frontend Academy · 课时

语义化 HTML：基础

使用 button、nav 和 heading 等原生 HTML 元素，免费获得内置无障碍支持，然后再考虑使用 ARIA。

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

语义化 HTML 免费带来无障碍支持

使用正确的 HTML 元素，就能免费获得键盘支持、屏幕阅读器播报以及正确的 ARIA 角色。大多数无障碍问题都源于使用 div + JavaScript，而不是使用原生元素。

按钮与容器的 onClick 对比

<button> 可获得焦点，屏幕阅读器会播报“按钮”，按 Enter 或 Space 会触发点击，并且可以配合表单提交。<div onClick> 不具备这些特性。

<!-- BAD: not keyboard accessible, not announced -->
<div class="btn" onclick="submit()">Save</div>

<!-- GOOD: full accessibility for free -->
<button type="button" onclick="submit()">Save</button>

按钮操作使用按钮元素，链接使用链接元素

如果操作会导航到某个网址，请使用 <a href>。如果操作只会改变当前页面，请使用 <button>。不要把锚点当作按钮使用（没有 href，只使用 onclick）——这会让辅助技术感到困惑。

标题构成文档大纲

按顺序使用 h1-h6 来创建逻辑大纲。屏幕阅读器用户会通过标题导航——跳过级别（h1 -> h3）会造成令人困惑的断层。

<h1>Article Title</h1>
  <h2>Section One</h2>
    <h3>Subsection</h3>
  <h2>Section Two</h2>

<!-- BAD: skipping levels -->
<h1>Title</h1>
<h4>Section</h4>

地标元素

HTML5 地标元素（header、nav、main、aside、footer）可以让屏幕阅读器用户在主要区域之间快速跳转。每个页面只能有一个 <main>。

<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <h1>Page Title</h1>
  <article>...</article>
  <aside>Sidebar</aside>
</main>
<footer>...</footer>

列表元素

无序列表使用 <ul>，有序列表使用 <ol>，定义列表使用 <dl>。屏幕阅读器会播报“包含 N 个项目的列表”——这是很有用的导航提示。

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>
<!-- Announced: 'list with 3 items' -->

表单：为每个输入框添加标签

每个输入框都需要关联一个 <label>。for/id 对会将它们关联起来——点击标签会让输入框获得焦点，焦点移入时，屏幕阅读器也会播报该标签。

<label for="email">Email</label>
<input id="email" name="email" type="email">

<!-- Or wrap (no for/id needed): -->
<label>
  Email
  <input name="email" type="email">
</label>

使用 fieldset 和 legend 组织分组

使用 <fieldset> + <legend> 将相关输入框（例如单选按钮）分组。每当组内的输入框获得焦点时，屏幕阅读器都会播报 legend。

<fieldset>
  <legend>Choose a plan</legend>
  <label><input type="radio" name="plan" value="free"> Free</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>

使用 table 元素表示表格数据

使用带有 <thead>、<tbody> 和 <th scope="col"> 的 <table>——不要使用表格进行布局。屏幕阅读器会以二维方式在单元格之间导航，并播报表头。

article、section 和 figure

<article>：自包含的内容（博客文章、评论）。<section>：带有标题的主题分组。<figure> + <figcaption>：带有说明文字的媒体内容。

仅在必要时使用 ARIA

ARIA 的第一条规则是：不要使用 ARIA。原生 HTML 始终是首选。只有当没有合适的语义元素来实现自定义组件（组合框、选项卡、树）时，才应使用 ARIA。

快速检查

为什么更推荐使用 <button onclick="...">，而不是 <div onclick="...">？

回顾：语义化 HTML

使用正确的元素：按钮操作使用按钮元素，导航使用 a，按顺序使用 h1-h6 构建大纲，使用地标元素（header、nav、main、footer），使用 ul/ol 创建列表，为每个输入框添加 label，使用 fieldset/legend 创建单选按钮组，使用 table 表示数据表格。原生 HTML 可以免费提供无障碍支持。ARIA 是最后的选择。

常见问题解答

「语义化 HTML：基础」课时是免费的吗？

是的 — 「语义化 HTML：基础」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「语义化 HTML：基础」这节课中我会学到什么？

使用 button、nav 和 heading 等原生 HTML 元素，免费获得内置无障碍支持，然后再考虑使用 ARIA。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「语义化 HTML：基础」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy