HTML5页面骨架结构化：运用语义标签梳理Web内容层级

HTML5页面骨架需用语义化标签明确内容角色与层级：header、main、footer各司其职，main必须唯一且直接子元素；nav仅用于主导航，article用于独立可分发内容，section须带标题；细节标签如time、address、figure等补足语义链。

HTML5页面骨架不是靠一堆

拼出来的视觉盒子，而是用有含义的标签把内容角色和层级关系直接写进代码里。核心在于让浏览器、搜索引擎和屏幕阅读器一眼看懂“哪是头、哪是主、哪是辅、哪是尾”。

必须唯一且顶层的

是整个页面的语义锚点，只能出现一次，且必须直接放在下，不能被、或其他容器包裹。它里面只放真正不可省略的核心内容——比如文章正文、产品详情、表单主体。

• 导航栏、侧边栏、页脚版权这些重复性区块，一律不放进
• 哪怕文章带标题、作者、时间，也该放在内部的或里，而不是把塞进别的结构里
• 它自带role="main"，屏幕阅读器会优先跳转到这里，错放会导致关键内容被忽略

header和footer按需复用，但要匹配上下文

和可以多次出现，但每次都要服务于它的直接父容器。页面顶部的管整站，开头的就只管这篇内容。

• 页面级：放Logo、全局导航（用包）、搜索框
• 文章级：放标题、作者、发布日期
• section级：可放该小节的更新说明或参考资料，不是全站版权声明

nav、article、section各司其职

标签选错，层级就乱。区分关键看内容是否独立、是否主导、是否有主题。

立即学习“前端免费学习笔记（深入）”；

• 只包真正起主导航作用的链接集合，比如顶部菜单、左侧栏目树；页脚链接、分享按钮、面包屑不属于它
• 用于能独立存在、可被RSS订阅或单独转发的内容，如一篇博文、一条新闻；删掉周围内容后它自己仍完整
• 是带标题的主题分组，比如“技术方案”“客户案例”，必须有h2–h6标题，否则语义失效

细节标签补足语义链

骨架搭好后，用细节标签告诉机器“这是什么”，不只是“它长什么样”。

• 发布时间用6月15日，而非纯文本
• 联系信息用包裹，区别于普通段落
• 图文关系用结构，比

  更易被辅助工具识别

• 列表必须用
  • 或
  1. ，不能用div模拟项目符号