用能赋予结构含义的标签替换你那些匿名的 div。
在 Kodokon 中打开本课一个完全由 div 构成的页面能工作，但它什么也没说：对屏幕阅读器没说，对搜索引擎没说，对六个月后接手你代码的同事也没说。语义化标签描述每个区域的角色：header、nav、main、article、section、footer。
<body>
<header>
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/articles">Articles</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<h1>The blog for curious devs</h1>
</main>
<footer>
<p>© 2026 Kodokon. All rights reserved.</p>
</footer>
</body>header 归纳页面头部（logo、导航），footer 归纳收尾信息（法律声明、次要链接）。main 承载主要内容，并且在页面上必须唯一。nav 标记一个导航区域：主导航、面包屑或目录。
最微妙的区别：article 与 section。经验法则：如果这个块脱离上下文仍然说得通（一篇博客文章、一条评论、一张产品卡片），它就是 article。如果它是某段内容内部的一个主题分组、有自己的标题，那它就是 section。
<main>
<article>
<h1>Understanding semantic HTML</h1>
<section>
<h2>Accessibility</h2>
<p>Screen readers rely on the
structure to navigate.</p>
</section>
<section>
<h2>SEO</h2>
<p>Search engines understand the page better.</p>
</section>
</article>
</main>思考练习：在一个电商产品页上，你会如何标记客户评价的列表？每条评价都有作者、日期和能独立成立的内容：因此每条评价都是一个 article，而把它们归纳在一起、带有标题的“客户评价”块则是一个 section。