语义化标签搭建html5页面骨架更可靠易维护且利于seo与辅助技术。核心主干标签包括header、nav、main、article、aside、footer，需按内容逻辑嵌套，避免无意义div，注重可访问性细节。

直接用语义化标签搭骨架，比套一堆

更可靠、更易维护，也更利于搜索引擎和辅助技术理解页面。

核心结构必须明确

一个标准HTML5页面应围绕几个不可替代的主干标签组织：

• header：可多次使用，用于页面顶部或文章区块的标题区域，比如网站Logo、主标题、文章标题等
• nav：仅包裹真正起导航作用的链接集合（如顶部菜单、侧边栏目索引），面包屑或操作按钮不属于此范畴
• main：每个页面有且仅有一个，必须直接包裹主体内容，不能嵌套在
  、

  或

  内部
• article：适用于可独立存在、可被转发或订阅的内容单元，如博客正文、新闻条目、用户评论
• aside：存放与当前内容相关但非核心的补充信息，例如术语解释、作者简介、关联推荐；删掉它不影响主内容逻辑完整性
• footer：用于页面或区块底部，常见版权信息、联系方式、备案号等

层级与嵌套要讲逻辑

语义化不是标签堆砌，而是按内容关系组织层级：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 不要把
  塞进

  里——导航属于全局结构，通常放在

  下或独立成块
• 适合按主题划分内容区块（如“热门教程”“最新动态”），但不宜过度拆分；它不等于视觉上的“一块”，而是一组有共同主题的内容
• 内部可以有自己的

  、

  ，比如文章标题和发布时间就该放在这里，而不是丢进

  外层
• 避免用
  替代

  ：如果一段内容能单独被RSS抓取或分享，就该用

细节处理影响可访问性

光用对标签还不够，关键细节决定是否真正“语义到位”：

• 每个页面只用一个

  ，通常放在

  内作为站点名或页面主标题

• 时间信息统一用2026年6月12日，机器可读又便于屏幕阅读器识别
• 图文组合用

  +

  ，而不是简单用

  加

  说明

  避免无意义的

  ：只要能用

  、

  、

  等替代，就别留着空div占位

  实际结构示例参考

  一个典型博客首页的骨架可这样组织：

  • 最外层：
    （网站名称+主导航）
  • 紧接着：
    （包裹全部正文流）
  • main内：
    × n（每篇博客含自己的

    、段落、

    标签列表）
  • main旁同级：
    （“关于我”“热门文章”等独立section）
  • 底部：
    （版权声明+备案号）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！