高质量HTML5网站的核心是语义化标签的准确使用：先明确内容角色再选标签，header、main、nav等需严格遵循语义规则，article强调独立可分发性，section用于主题组织，aside/figure/time等辅助标签不可替代视觉定位。
构建高质量 HTML5 网站，核心不在样式炫酷或交互繁多，而在于用对语义标签搭出经得起推敲的逻辑骨架。它不是给浏览器看的装饰，而是告诉搜索引擎、屏幕阅读器和未来接手你代码的同事：“这里是什么，为什么在这里”。
先定角色，再选标签
别问“哪个标签能实现这个布局”，要问“这部分内容在整页中承担什么角色”。比如顶部区域：如果含 Logo + 主导航 + 搜索框，它是整个页面的 header；如果只是某篇博客文首的标题与作者信息，它就是那篇 article 自带的 header。同一标签可在不同层级复用，但每次使用都必须匹配其父容器的主题。
- main 只能有一个，且不能嵌套在 article、aside、nav 或 footer 里
- nav 只包裹真正起导航作用的链接，页脚一堆杂项链接通常不用它
- 没有 h1–h6 的“头部”不是 header，应改用 div 或直接省略
区分 article 和 section：独立性是关键
article 是可被单独分发的内容单元——RSS 订阅能抓取它，打印出来也自成一篇；section 是为组织而存在，必须有明确主题且通常带标题。一个常见错误是把“关于我们”“服务介绍”“客户案例”三个板块全用 article 包裹，其实它们共享“公司介绍”这一主题，更适合用 section 统一包裹，每个子模块再用 h2 标明小节。
- 博客列表页：每篇文章用 article，整组文章用 section 并加 h2 标题
- 产品页：各功能模块（如“性能”“安全”“集成”）是 section，不是 article
- 用户评论若支持独立分享或 RSS 推送，可用 article；否则用 section 或普通列表
辅助结构不可少：aside、figure、time
aside 不是“侧边栏”的视觉定位标签，而是语义上“关联但非核心”的内容，比如文章旁的术语解释、相关资源链接、作者简介。图文组合请用 figure + figcaption，而非 div 套图加 p。时间信息务必用 time 标签并带上 datetime 属性，让机器准确识别日期，这对新闻、活动页尤其重要。
立即学习“前端免费学习笔记（深入）”；
- aside 可出现在 main 内，也可放在 article 里作为补充说明
- figure 不限于图片，图表、代码块、引用块都适用
- time datetime="2026-06-12" 比单纯写“今天”更利于 SEO 和无障碍访问
检查结构是否合理，三步快速验证
写完结构后，不靠浏览器预览，而是用“盲读法”检验：关掉 CSS，只看纯标签和文字，能否清晰分辨出哪是导航、哪是正文、哪是补充信息？再配合基础检查清单：
- 页面中是否存在多个 main？
- 所有主导航链接是否都在 nav 内？
- 每篇独立文章是否包裹在 article 中？
- 是否有无意义的 div 明显可以替换为 section、aside 或 header？
- 所有标题是否按 h1→h2→h3 顺序使用，未跳级？
