关键在于先理清内容角色再选标签：区块标签取决于功能而非样式，如全站头部用<header><nav>，文章标题区用<article><header>；<main>必须唯一且直接承载核心内容；<section>表主题章节，<article>表独立内容单元；验证需检查纯HTML结构、大纲层级及语义属性。
直接把复杂布局转成规范的HTML5，关键不在“怎么套标签”，而在“先理清内容角色”。一个区块用什么标签，取决于它在整页中承担的功能，而不是它长什么样、放在哪、有没有边框。
从结构入手，别从样式出发
看到一个视觉上像“顶部导航栏”的区域，别急着写 <div class="header">。先问：这是整个页面的头部？还是某篇文章的标题区？它是否包含主导航链接？
- 如果是全站统一的顶部区域（含logo + 主菜单），用 <header> 包裹，内部主导航用 <nav aria-label="主导航">
- 如果只是某篇
<article>里的标题和作者信息，那就用<article><header><h2>标题</h2><p>作者 <time datetime="2026-06-10">6月10日</time></p></header>... - 避免把
<nav>用在“上一篇/下一篇”这类辅助链接上——它们不是主导航，普通<a>即可
主干结构必须清晰且唯一
HTML5对几个核心容器有硬性要求，违反会导致语义失效甚至影响SEO和屏幕阅读器识别：
- 每个页面只能有一个 <main>，它必须直接承载页面的核心内容（比如博客列表、商品详情、表单主体）
-
<main> 不能被
<article>、<section>或<aside>包裹，也不能嵌套在另一个<main>里 -
<header> 和 <footer> 可以多次出现：既可在
<body>级使用，也可在<article>或<section>内部使用，各自表达对应区块的头尾
内容区块按职责选标签
别把 <section> 当万能分组器。它代表一个有明确主题的逻辑章节，通常自带标题；而 <article> 是能独立存在、可被单独引用或订阅的内容单元。
立即学习“前端免费学习笔记（深入）”；
- 博客首页的文章列表：每篇用 <article>，整体用
<main>包裹 - 侧边栏的“热门标签”“作者简介”：属于与主内容相关但可分离的信息，用 <aside>
- “关于我们”“服务流程”这类带小标题的栏目：适合用 <section>，每个内部放
<h2> - 纯装饰性、无内容意义的空 div（比如仅用于撑开间距或加背景色）：保留
<div>即可，强行语义化反而失真
检查与验证不能跳过
写完代码后，快速验证是否真正语义化：
- 打开浏览器开发者工具，关闭所有CSS，看纯HTML是否仍能读出清晰层次（标题是否突出、导航是否可辨、文章是否独立）
- 用在线工具如 HTML5 Outliner 生成文档大纲，确认
<h1>是否只出现一次（<article>内的<h2>不冲突），<nav>是否出现在合理层级 - 检查
<time>是否用了datetime属性，<img>是否都有alt，<main>是否有id并配合<a href="#main">跳至主内容</a>
