html5页面结构依赖语义标签而非视觉排版：header表区域介绍性内容，nav仅用于主要导航且需至少两个链接，main必须唯一且承载核心内容，article用于独立可分发内容，section用于逻辑分块并应有标题，aside表示相关但可分离信息，footer标识归属信息而非所有底部元素。
HTML5页面结构不是靠视觉排版决定的，而是靠语义标签准确表达内容的功能和层级关系。用对了，机器能读懂重点，人能快速理解逻辑，维护也更轻松。
header 和 nav：明确“这是入口”
header 不是顶部装饰盒，它代表一个区域的介绍性内容——可以是整页的页眉，也可以是一篇文章开头的标题+作者+时间。里面放 logo、主标题、搜索框都合理；但广告横幅、登录入口若不属于该区域的核心标识功能，就该另寻位置。
nav 只用于主要导航路径，比如顶部菜单、左侧栏目树、页内锚点目录。它必须有明确的跳转意图，且每个 nav 最好包含至少两个链接。页脚一堆友情链接、文章末尾的“上一篇/下一篇”，通常不用 nav，普通链接就够了。
- nav 可以嵌套在 header 里，也可以独立存在
- 同一页面可有多个 nav，但要用 aria-label 区分用途，例如 aria-label="主导航" 和 aria-label="文章目录"
- nav 内部推荐用 ul + li + a 结构，语义清晰、读屏友好
main：唯一且纯粹的主体容器
main 是整个页面中不可替代的核心内容区，比如博客正文、商品详情页的描述与购买按钮、表单的主操作区域。它必须全页唯一，不能嵌套在 header、footer、article 或 aside 里，也不能被它们包裹。
常见错误是把侧边栏、面包屑、版权声明塞进 main——这些属于重复性全局元素，应放在 main 外部。main 的子元素可以是 article、section、aside，但反过来不行：section 里不能放 main，article 里更不能嵌套 main。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- main 内容要真正“不可跳过”，删掉它，页面就失去主要价值
- 多篇文章并列时，每篇用独立的 article，全部放在 main 里，而不是给每篇套一个 main
- main 不需要 class，也不该只为了样式加，它的存在本身就是结构声明
article、section 和 aside：区分“独立”“分区”“关联”
article 指能单独存在、被 RSS 订阅或转发的内容单元，如一篇博文、一条新闻、一个用户评论。判断标准很直接：把它单独拎出来，不看上下文也能看懂。
section 是文档内的逻辑分块，依赖上下文才有意义，比如“安装步骤”“配置说明”“常见问题”。它通常自带 h1–h6 标题，没标题的 section 很可能语义断裂，此时该用 div 更合适。
aside 不是“在旁边”的内容，而是与主内容相关但可分离的信息，比如右侧的“作者简介”“相关推荐”“术语解释”。纯广告、装饰图标、无关链接不算 aside，它们更适合用 div 或 figure。
- article 可嵌套 section，section 里也可放多个 article（如评论列表）
- aside 可出现在 main 内部，也可放在 article 或 section 里，作为其附属信息
- 不要为视觉分区硬套 section，无主题、无标题的“区块”用 div 更诚实
footer 和辅助标签：收尾也要讲逻辑
footer 表示页面或区块的底部信息，可以多次出现——整页底部放版权，一篇文章末尾放“发布时间+编辑”也算 footer。但它不等于“所有底部内容”，比如回到顶部按钮、分享组件，若不属于该区域的归属信息，就不必强塞进 footer。
细节影响机器识别： 比单纯写“6月10日”更能被日历工具抓取；
- footer 里可以包含 nav（如页脚导航），但需明确它是页脚级导航
- 避免在 footer 里塞广告或促销 banner，它们不属于归属信息范畴
- figure 必须配 figcaption，且 figcaption 必须是 figure 的直接子元素
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
