html5语义化布局的核心是用标签准确表达内容角色：header、nav、main、article、section、aside、footer各司其职，需依逻辑层级合理嵌套，避免伪语义化，确保结构清晰、可访问、易维护。
HTML5语义化布局的核心，是让标签本身说出内容的“身份”，而不是靠class名或CSS样式去暗示。构建清晰骨架的关键不在于堆砌新标签，而在于用对的容器承载对的内容。
先定义内容角色，再选标签
写代码前停一秒，问自己：这段内容在整页中扮演什么角色？是全站统一的导航？是独立可分发的文章？还是辅助阅读的侧边信息？答案直接对应标签：
- header：用于页面顶部或某区块顶部，放logo、站点标题、文章标题等；一个页面可有多个
- nav：只包裹主导航链接（如首页、分类、关于），不塞搜索框或广告
- main：每个页面仅一个，包裹真正独一无二的主体内容，不含重复的页眉页脚
- article：自包含、可独立传播的内容单元，比如一篇博客、一条新闻、一个论坛帖
- section：文档中逻辑上的一节，通常带标题，比如“技术要点”“用户反馈”
- aside：与主内容相关但非核心的信息，如作者简介、延伸阅读、相关广告
- footer：页面或区块底部，放版权、联系方式、备案号等
保持层级合理，避免嵌套错位
语义标签不是扁平罗列，而是有自然逻辑顺序和嵌套关系：
- body内按内容流顺序组织：
→ 里可以包含多个 ，每个 内部可用 划分小节 可出现在顶层，也可嵌在 内部，作为该文章的标题区
警惕“伪语义化”陷阱
用了新标签不等于真正语义化。常见误区包括：
- 把整个轮播图区域包进
，却不加标题——section应有明确主题，否则用 更诚实- 在
里重复放网站logo和主导航——这些属于全局结构，应放在main之外 - 用
- 为兼容旧浏览器强行套
，却忽略本身的可访问性价值 验证骨架是否合格的简易清单
写完结构后快速过一遍：
- 页面是否有且仅有一个
？它是否在
内或紧邻其上？ - 主导航是否被
- 所有文章内容是否都落在
中，而非裸露在 下？ - 时间信息是否用了
- 是否存在连续三层以上嵌套？能否替换成
或
- 在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
