用语义化标签搭出清晰的网页骨架，理解每个标签背后的意图，而不只是让它“显示出来”。
很多新手写 HTML 的方式是“满屏 div”：哪里需要一块就套一个 div，再用 class 区分。页面能跑起来，但结构是哑巴——浏览器不知道哪块是导航、哪块是正文，搜索引擎也读不出重点。语义化标签要解决的，就是让结构本身表达含义。
这篇我们从最常用的七个结构标签讲起：header、nav、main、article、section、aside、footer。学完你就能搭出一个职责分明、可读可维护的页面骨架。
先看一段“全 div”写法，它没有任何错误，但信息量很低：
<div class="header">
<div class="nav">...</div>
</div>
<div class="main">
<div class="article">...</div>
</div>
<div class="footer">...</div>换成语义化标签后，结构本身就在说话，class 只用来补充样式信息：
<header>
<nav>...</nav>
</header>
<main>
<article>...</article>
</main>
<footer>...</footer>好处是实打实的：搜索引擎抓取时能识别正文区块，屏幕阅读器可以跳转到 main 直接读正文，团队协作时别人打开文件也能一眼看清页面分区。语义化不是“更高级”，而是“更准确”。
一个典型的内容页骨架大致长这样，七个标签各管一块：
<body>
<header>
<!-- 顶部：Logo、标题、主导航 -->
<nav>主导航</nav>
</header>
<main>
<article>
<h1>文章标题</h1>
<p>正文内容……</p>
<section>
<h2>一个小节</h2>
<p>小节内容……</p>
</section>
</article>
<aside>
<!-- 侧边：相关推荐、目录 -->
</aside>
</main>
<footer>
<!-- 底部：版权、备案、联系方式 -->
</footer>
</body>header：区块的顶部，常放标题、Logo、导航。它不等于“页面顶部”，一个 article 里也可以有自己的 header。nav：主导航栏。只给“主要导航”用，页脚那一排链接通常不需要 nav。main：页面正文主体，整个文档只能有一个。屏幕阅读器靠它直接跳到正文。article：一段可以独立存在、被分发或复用的内容，比如一篇文章、一个商品卡片、一条评论。section：按主题划分的内容区块，通常带标题。用来组织 article 内部，或页面里的某个功能区。aside：与正文相关但非主线的内容，比如侧边栏、相关推荐、广告位。footer：区块底部，放版权、链接、补充信息。和 header 一样，不限于页面级。这两个最容易混淆。区分的关键是“独立性”：如果这段内容单独拿出来仍然完整、有意义，就用 article；如果它只是某个更大主题下的一小节，离开上下文就没意义了，就用 section。
举个例子，一篇博客文章整体是 article，文章里的“评论列表”每一条评论也是 article（可以单独引用），而文章正文的“步骤一、步骤二”更适合 section。
<article>
<h1>如何选一把好用的键盘</h1>
<section>
<h2>看轴体</h2>
<p>轴体决定手感……</p>
</section>
<section>
<h2>看键帽</h2>
<p>键帽材质影响触感……</p>
</section>
<section>
<h2>读者评论</h2>
<article>
<h3>某读者的看法</h3>
<p>我觉得红轴更顺手。</p>
</article>
</section>
</article>语义化不只是结构标签，标题层级同样重要。标题是页面的“目录”，要按级别逐层递进，不要跳级。一般规则：
h1，概括页面主题。h2 起步，子小节用 h3，依次往下。<main>
<article>
<h1>文章总标题</h1>
<section>
<h2>第一部分</h2>
<h3>子要点</h3>
</section>
<section>
<h2>第二部分</h2>
</section>
</article>
</main>除了让代码好看，语义化还顺手解决了几个实际问题：
div class="top-wrap-inner" 是干嘛的。把这些标签用熟，是写好网页的第一步。下一课我们进入 CSS，看怎么给这副骨架穿上样式——从盒模型和选择器开始。