html5语义层级由嵌套关系决定而非视觉样式：header作用域依最近节元素而定，须含标题或标志性内容；article是独立可分发内容单元，可嵌套但需自足；section是须带标题的主题分组，不可无题滥用。
HTML5语义标签的层级不是靠视觉位置或缩进决定的，而是由嵌套关系真实构建的逻辑结构。header、article、section三者各司其职，用错顺序或混用角色，会导致内容归属混乱——屏幕阅读器读不准，搜索引擎抓不透，甚至影响SEO权重分配。
header：作用域取决于最近的“节元素”
header不是“网站顶部栏”的同义词，它没有全局性。它的语义范围由离它最近的节元素（body、article、section）决定。
- 放在下时，是整页的页眉，适合放logo、主标题、主导航入口
- 放在
内部时，只服务这篇文章，应含该文的标题、作者、发布时间等 - 放在
内部时，必须带一个h2–h6标题（如“安装步骤”），否则语义失效，不如用div - 不能空着用：没标题、没logo、没标志性内容的header，会让辅助技术困惑
article：独立可分发的内容单元
article代表能脱离当前页面依然成立的内容块。判断标准很实在：把它单独复制出来，贴到RSS阅读器或另一个网站里，是否还看得懂、用得上？
- 典型例子：一篇博客正文、一条新闻稿、一个论坛回帖、一段用户评论
- 不能包裹整页布局（比如首页的全部栏目），那属于main的职责
- 可以嵌套自身：比如主article里的评论区，每条评论都用子article标记
- 内部可含多个section，但每个section必须有对应标题（h2–h6），否则语义断裂
section：有主题的逻辑分组，不是div的升级版
section本质是“同一主题下的内容打包”，它本身不具备独立性，也不可被单独订阅。关键前提是：必须配标题。
- 常见用法：一篇文章里的“背景介绍”“实验方法”“结果分析”各为一个section
- 可以嵌套：大section（如“前端工具链”）下再分小section（如“Vite配置”“Webpack优化”）
- 不能替代样式容器：只为控制margin/padding而用section，属于语义降级
- 没标题就别用：纯图文混排、无明确主题的区块，老实用div更诚实
三者协作的合理结构，往往是一层main包住整体，里面按需穿插article与section；每个article自带header说明自身；section只出现在需要主题分组的地方，并且标题清晰。结构树在Chrome DevTools的Accessibility面板里一目了然——那里显示的，才是真实有效的语义层级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
