构建语义化html5页面的关键是让每个标签准确传达内容意图：header、nav、main、footer需严格按逻辑层级使用；section和article须满足主题独立性与标题要求；aside仅用于关联性辅助信息；判断依据为三步定位法。
构建语义化HTML5页面，关键不是堆砌新标签，而是让每个标签准确传达内容意图——浏览器、屏幕阅读器和搜索引擎靠它理解“这段代码在说什么”，而不是“它看起来像什么”。
header、nav、main、footer：结构性骨架必须对齐逻辑层级
它们不是装饰性容器，而是页面语义骨架的四个刚性支点：
- header 是内容的“介绍入口”，不是顶部横条。它可以出现在页面顶层（如全站页眉），也可以嵌套在 article 或 section 内部（如每篇文章自己的标题区）。只要里面包含标题、作者、发布时间等引导信息，就该用 header；纯 logo + 搜索框没上下文？那就只是视觉区块，用 div 更诚实。
- nav 只服务于主导航链接集合。面包屑、页内锚点、底部友情链接？不属于它。导航区必须是用户快速跳转主路径的地方，否则用 div 或 ul 即可。
- main 是唯一且不可嵌套的主体声明。它必须直接位于 body 下第一层，只包裹用户真正要读的核心内容（比如博客正文、商品参数表、表单本体），不包括侧栏、广告、相关推荐。多个 main 会破坏可访问性规则。
- footer 表示页面或区块的尾部信息。全站页脚用一次，每篇 article 也可自带 footer（含发布时间、编辑说明等），但不能用来包版权+联系方式+友情链接+返回顶部按钮——那只是样式分组，应拆解或用 div。
section 和 article：主题独立性决定是否启用
别把 section 当“带样式的 div”。它成立的前提是三个条件同时满足：有明确主题、可被单独引用、自带标题（h1–h6）。
- 产品页里的「技术参数」「客户评价」「部署指南」——每个都有标题、自成一体、删掉不影响主干，就该用 section。
- 一个无标题的轮播图容器、一个仅用于 JS 绑定的 tab 面板外层、一个纯 CSS Grid 布局的卡片网格——没有主题、不可独立存在、无标题，一律用 div。
- article 要求更高：必须是可独立分发、复用的内容单元，比如一篇博客、一条新闻、一个论坛回帖。它自带隐含语义权重，搜索引擎会把它当作完整内容看待。普通功能模块（如“登录入口”“在线客服”）不是 article。
aside 与 div：辅助信息才有资格上桌
aside 不是“侧边栏”的同义词，而是指与当前内容相关但非核心的补充信息。
- 文章旁的术语解释、人物背景卡片、延伸阅读推荐——这些和主内容有关联又不干扰主线，适合 aside。
- 全站通用的广告位、无关的热门榜单、独立于当前页面的订阅入口——它们和当前内容无实质关联，就该回归 div。
- 如果某区块只是为了响应式断点加 class、为了 JS 找元素而设 id，无论它在左边还是右边，都不具备语义资格，div 就是最干净的选择。
判断流程：三步定位，不靠感觉
写标签前，快速问自己：
- 这个区域承载独立主题内容吗？→ 否 → 用 div
- 是 → 它是否有层级标题（h2–h6）？→ 否 → 补标题或改用 div
- 是 → 它能否被单独引用（比如 RSS 抓取、分享链接直达）？→ 否 → 用 section；是 → 用 article
语义标签的价值不在表面“标准”，而在结构自解释性——半年后你或同事再打开这份 HTML，一眼就能读懂哪块是主干、哪块是补充、哪块只是技术挂载点。硬套标签反而会让结构失真。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
