HTML5文档骨架需按内容逻辑流构建：header（含logo/标题）→ nav（仅主导航）→ main（唯一且直接子元素）→ footer（页面级底部）；article用于可独立分发内容，section须带标题且属主题分组；aside须可移除而不影响主内容，nav严禁包裹非导航链接；结构须经W3C验证与屏幕阅读器测试。
HTML5文档骨架不是把标签堆上去，而是用语义标签表达内容的真实角色和层级关系。核心在于“内容决定结构”，而不是“结构套内容”。
按逻辑流组织顶层骨架
页面最外层结构应严格遵循内容自然流向：从顶部标识到主导航，再到主体内容，最后是底部信息。这个顺序既是用户阅读路径，也是屏幕阅读器解析顺序。
- header作为的首个子元素，放网站Logo、主标题或横幅图；可复用在article或section内部，但必须包含有语义的元素（如h1–h6、logo图、主导航）
- nav紧随header之后，只包裹真正起导航作用的链接集合（如顶部菜单、页脚全站地图），不用来包搜索框或分页控件
- main必须是的直接子元素，且全页唯一；不能嵌套在header、nav、aside、article或footer里
-
footer放在main之后，属于整个页面的尾部；若某篇文章有独立署名或编辑说明，应放在对应
内部的footer中
区分article与section的使用场景
两者都用于内容分组，但判断标准很明确：看这块内容能不能单独被RSS抓取、分享链接或导出PDF。
- 用article：博客正文、新闻稿、商品卡片（含标题+描述+价格+操作）、用户评论——它们具备完整语义闭环，可独立存在
- 用section：必须带
–
标题，且属于主内容下的主题分组，比如“技术参数”“客户评价”“售后服务”；它不能脱离上下文独立成立
- 避免无标题的section：纯视觉分隔或空容器，直接删掉，用CSS margin或border实现即可
aside和nav的边界要守牢
这两个标签最容易被“看起来像就用了”，但辅助技术会按规范严格解析，误用会导致信息丢失。
立即学习“前端免费学习笔记（深入）”；
-
aside必须满足“移除后不影响主内容完整性”：作者简介、术语解释、相关文档链接可以；广告、随机推荐、登录入口一律用，必要时加role="complementary"
- nav只用于主导航链路集合；面包屑、文章目录、分页导航需用
- aside可出现在article内部（如代码块旁的说明），但不能作为nav的子元素；nav也不该被包在section里再塞进main
验证结构是否真正生效
写完骨架后，不能只靠肉眼检查。真正的语义结构需要被机器正确识别。
- 打开Chrome开发者工具 → Elements面板 → 右键任意article或section → “Copy outerHTML”，粘贴到W3C验证器中检测嵌套合法性
- 用NVDA或VoiceOver朗读页面，确认大纲层级是否符合预期（如main是否被识别为“主区域”，article是否被读作“文章”）
- 检查每个语义标签是否都承载了实际内容角色：header里有没有h1或logo？nav里有没有可跳转链接？footer里有没有版权或联系方式？
