HTML 语义化 — 开发者指南

学习 HTML 语义元素 — header、nav、main、article、section — 提升无障碍、SEO 与可维护性，构建更专业的页面结构。

What Is HTML Semantic Markup?

语义化 HTML 使用描述含义而非仅外观的元素。<nav> 告诉浏览器与读屏软件「这是导航」。<div class='nav'> 不能。搜索引擎与辅助技术依赖语义理解页面结构。

Why HTML semantic markup Matters

Google and screen readers parse semantic tags to understand page structure — directly affecting rankings and accessibility scores.

Replacing div soup with <article>, <nav>, and <main> gives crawlers explicit signals about which content is navigation versus primary editorial text.

HTML semantic markup — Key Ideas You Must Know

<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>
每页一个 <main> 承载主内容
标题层级：单个 <h1>，嵌套 h2–h6
地标角色改善读屏导航
语义 HTML 支持 Google 富摘要

HTML semantic markup Code Example

语义化页面骨架

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
  <header><nav>...</nav></header>
  <main>
    <article>
      <h1>Page Title</h1>
      <p>Content here.</p>
    </article>
  </main>
  <footer>...</footer>
</body>
</html>

Common HTML semantic markup Mistakes

什么都用 <div>
跳级标题（h1 直接到 h4）
多个 <main>
信息图 alt 为空

Practice HTML semantic markup with Free Lessons

完成 Sturdee 免费 HTML 教程 — 从元素与语义开始，再做一个语义化落地页。

Tip: Free interactive lesson: /tutorials/html — practice HTML semantic markup with runnable code on Sturdee.

什么是 HTML 语义化标记 — FAQ

Frequently Asked Questions

语义 HTML 必须吗？+

不强制，但可提升 SEO、无障碍与可读性 — 教育类站点的重要排名因素。

什么是 HTML 语义化标记 — 开发者完整指南