html5语义标签的核心是用header、footer、nav、main、article、section、aside等标签精准表达内容结构与关系，而非仅作样式容器；每个标签有明确语义职责，如header/footer可多次出现于不同内容单元，nav专用于主导航路径，main必须唯一且仅含核心内容，article强调自包含可独立传播，section用于逻辑分组，aside承载附属但相关的信息。

HTML5文档结构规范的核心，是用语义标签代替无意义的

堆砌，让每个区块自带“身份说明”。不是为了好看，而是为了让机器（搜索引擎、屏幕阅读器）和人（其他开发者）一眼看懂页面在说什么、哪部分最重要。

header 和 footer：定义可复用的边界区域

不等于“页面最上面那块”，它代表任意一个内容单元的头部——可以是整个页面的顶部，也可以是一篇文章开头的标题+作者信息。

同理，既可是全站底部版权栏，也可能是某条评论末尾的时间戳和操作按钮。两者都允许多次出现，关键看它服务的是哪个“节”（section）或整体文档。

Wechat HTML Publisher

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

下载

• 页面级
  放Logo、主导航、搜索框；文章级

  放标题、发布时间、作者
• 里别塞主菜单或登录入口，那是

  或

  的事；它该承载归属信息、辅助链接、法律声明
• 避免把导航栏硬塞进
  ，除非它是页脚专属的次要导航

nav 和 main：区分“怎么走”和“走到哪儿”

只包裹真正构成网站骨架的导航路径——比如顶部横栏、左侧分类菜单、文章内目录锚点。它不是所有链接的收容所，“上一篇/下一篇”或文末推荐链接，一般不需要

包裹。

则必须唯一，且只装页面不可替代的核心内容：一篇博客正文、商品列表页的SKU区块、表单提交后的结果页。它不能包含导航、侧边广告、页脚信息。

• 一个页面只能有一个
  ，重复使用会破坏语义逻辑
• 内部建议用

  或

  组织链接，便于辅助技术识别列表结构
• 如果页面是纯工具类应用（如计算器），
  里就放功能主体，不强求有

article 和 section：搞清“独立”和“分组”的差别

强调自包含性——单独拎出来仍能成立，比如RSS订阅里的一条新闻、打印出来的单篇博文、被转发到其他平台的用户评论。

侧重逻辑分组，通常带

-

标题，比如“关于我们”“服务流程”“客户评价”，它本身不保证独立传播价值。

• 可嵌套，例如评论区里每条回复都是

  ；

  一般不嵌套

  ，除非章节里确实包含多篇独立内容
• 不要用
  替代

  来包博客正文，否则失去内容可重用性
• 没有标题的
  不符合规范，浏览器和辅助工具可能忽略其语义

aside：处理与主内容相关但非核心的信息

不是“侧边栏”的视觉定位标签，而是语义定位标签。它装的是对

起补充作用的内容：当前文章的延伸阅读、作者简介、广告位、引用来源。即使它在CSS里被放在顶部或底部，只要语义上是附属信息，就该用

。

• 页脚里的“友情链接”如果属于全站通用资源，更适合放在
  而非
• 文章内插入的术语解释框、数据图表说明，属于典型的
  使用场景
• 避免用
  包裹主导航或登录模块，它们不属于“附属”范畴

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