HTML5语义化布局核心是用header、nav、main、aside、footer划分功能区域，再以section、article、aside组织内容逻辑，hr标记主题断点，div仅用于纯样式、脚本锚点等必要场景。
HTML5文档布局的核心，是用有明确含义的标签代替无意义的
堆砌。语义标签不只是让代码看起来更整齐，而是告诉浏览器、搜索引擎和屏幕阅读器“这一块内容到底在干什么”。分区不是为了视觉分隔，而是为了逻辑归类。
用header、nav、main、aside、footer划分功能区域
这些标签定义页面最顶层的功能模块，每个都有不可替代的职责：
- header：代表整个页面或某个区块的头部，可嵌套使用。放网站Logo、主标题、全局通知，但不要塞搜索框或登录按钮（它们属于交互控件，更适合放在
- nav：只包裹主导航链接，比如首页、产品、关于、联系。一个页面可以有多个
-
main：全页唯一，且不能嵌套在
、 或 -
aside：内容必须与上下文有关联但又可分离。例如文章右侧的“作者简介”或“延伸阅读”，不是整页广告栏；若广告完全无关，就该用加注释说明用途
- footer：对应其父级容器。页面级
用section、article、aside组织内容逻辑
在
或 内部，进一步按内容主题和复用性分层： -
section：表示一个带标题的独立主题块。比如“安装步骤”“配置说明”“常见问题”，每个都应有
或
，且内部内容聚焦同一话题。不要为加间距而硬套
-
article：封装能独立存在、可被转发或聚合的内容单元。一篇博客、一条新闻、一个用户评论，都该用
包起来。多个 并列时，彼此之间不应嵌套 -
aside（再次出现，但层级不同）：当它出现在
内部时，专指与该文章强相关的附属信息，比如术语解释框、引用来源、相关视频链接
用hr标记真实的内容主题断点
不是画线工具，而是语义开关。它只在前后内容发生本质切换时才出现：- ✅ 合理：
本节介绍如何部署前端应用
接下来讲解后端服务的负载均衡策略
——技术领域明显迁移 - ❌ 错误：
订单信息
发票信息
——二者同属一个业务流程，应统一用包裹，靠CSS margin区分 - 样式必须由CSS控制，禁止写
。推荐写法：
，再在CSS中定义高度、颜色和间距
div仍是必要补充，但要有明确理由
不是所有地方都要强行语义化。以下情况用
更合适：- 纯样式容器：比如实现卡片阴影、背景渐变、动画过渡层
- 脚本操作锚点：需要JS动态增删内容的区域，且无结构含义
- BEM命名体系下的模块封装：如，此时class已承担语义说明作用
- 兼容老版本辅助技术时的降级兜底（虽已少见，但仍有场景）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
