html5语义标签的核心是明确内容“是什么”及“属于谁”：header作内容单元入口，nav专司导航路径，main为唯一正文锚点，article用于可独立分发的内容，section用于逻辑分组。
HTML5布局的核心不是视觉排列，而是用标签明确内容“是什么”以及“属于谁”。语义标签真正起作用的地方，是让浏览器、搜索引擎和屏幕阅读器能顺着结构读懂页面逻辑——header是入口，nav是路径，main是目的地，article是独立单元，aside是附属说明，footer是收尾。它们共同构成一条可被机器识别的内容导航链。
header：每个内容单元的“介绍页”
它不等于“网页最上面那块”，而是任何需要被引入的内容区块的起点。整站页眉、每篇article的标题区、某个section的小标题栏，都可以有自己的header。关键看里面有没有承担引导作用的信息，比如h1/h2、作者名、发布时间、简短导语。
- 全页顶层header通常含网站名、主导航入口和搜索框
- article内部的header放文章标题、作者、time datetime属性标注的发布日期
- 避免空header：只放几个按钮或装饰性图标，没有标题或上下文，就失去语义价值
nav：只管“去哪”，不管“干啥”
nav不是链接收纳盒，它专指用户用来切换内容板块的主路径。顶部菜单、左侧栏目、文章内目录（toc）属于nav；而“分享到微博”“打印本页”“返回顶部”这类操作按钮，不属于导航，应放在普通div或button里。
- 一个页面可有多个nav，但需区分层级：顶层nav服务全站，article里的nav服务该文内部跳转
- 页脚的“关于我们”“隐私政策”等辅助链接，更适合用普通a标签配合address或role="navigation"
- nav内部推荐用ul/li结构，链接文本需具描述性，如“Vue入门教程”优于“点击查看”
main：不可替代的“唯一正文锚点”
main是整个文档的语义重心，告诉所有解析工具：“用户真正要读/用的部分从这里开始”。它必须唯一、直接位于body第一层，不能嵌套在section、article、aside或footer中。
- 博客首页的main里放“最新文章列表”，而不是把整个带侧栏的页面容器塞进去
- 商品详情页的main只包裹标题、参数表、描述文字、购买按钮——不包括顶部导航和底部相关推荐
- 若原结构用div#content，只需替换成
，并确认其父级是body即可，无需重构其他部分
article与section：按“能否单独存在”来区分
判断标准很直接：把这块内容复制出来，脱离当前页面，它是否依然完整、可理解、可分发？能，就是article；不能，只是为组织方便而分组，就是section。
- 用户评论、新闻稿、独立教程卡片，都用article——它们可被RSS抓取、单独打印、转发链接
- “技术方案”“客户案例”“FAQ”这类带h2标题的主题区块，用section包裹更准确
- 多个article并列时，外层加section并配h2标题，例如
前端教程
… …
语义标签不是为了写得漂亮，而是为了让内容走得更远。结构对了，SEO、无障碍、维护性、跨平台适配，自然跟上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
