html页面顶层骨架应为header→nav→main→footer顺序结构：main必须唯一且为body直接子元素，不得嵌套于header、nav等标签内；article用于可独立分发内容，section需带标题表逻辑分组；多nav须用aria-label区分用途。
语义化标签不是堆砌，而是按内容角色分层协作——header、nav、main、article、section、aside、footer 各有不可替代的职责，混用或嵌套错位会直接削弱结构可读性与辅助技术识别效果。
怎么安排页面顶层骨架？
一个 HTML 页面必须有且仅有一个 main，它不能出现在 header、nav、aside、footer 内部。常见错误是把整个页面用 div 包裹后塞进 main，或者在 header 里再套一层 main。
正确层级应是：
-
header放顶部通用内容（Logo、主标题、搜索框） -
nav紧跟其后或嵌入header，但只包裹导航链接本身 -
main独立展开，承载用户真正要访问的核心内容 -
aside可放在main外侧（如侧边栏），也可嵌在article内部（如相关链接） -
footer在最底部，不参与内容流布局，避免用position: fixed错位覆盖
article 和 section 怎么区分使用？
article 表示**可独立存在、可被重用或分发的内容单元**，比如一篇博客、一条新闻、一个用户评论；section 是**逻辑分组容器**，强调主题一致性，但本身不构成完整内容。
常见误用：
- 把整页文章用一个
section包住，而不用article—— 这丢失了“独立内容”语义 - 在
article内部用多个section却不配标题（h2–h6）——section应有明确主题，标题是其语义锚点 - 用
article包裹广告或侧边推荐 —— 这属于aside范畴
简记：能单独 RSS 订阅的，用 article；只是“这一块讲的是 A，下一块讲的是 B”，用 section。
nav 和 aria-label 配合时容易漏什么？
一个页面可能有多个 nav：顶部主导航、页脚链接区、文章内目录（nav + ol）。若不加 aria-label，屏幕阅读器会统称“导航”，用户无法分辨用途。
实操要点：
- 主导航写
<nav aria-label="主导航"></nav>，页脚导航写<nav aria-label="页脚导航"></nav> - 避免只用
aria-label="导航"这类泛化描述 - 不要省略
nav直接用div+aria-label—— 语义标签优先级高于 ARIA -
nav内部必须是链接集合，纯文字或按钮不属于合法子元素
表格和表单里的语义细节常被忽略
表格不只是 table + tr + td。缺少 caption、thead、scope，会让数据关系对辅助工具不可见。
表单中，label 必须通过 for / id 显式绑定控件，不能靠位置相邻“猜”；fieldset + legend 是分组必选项，尤其多选/单选场景。
典型疏漏：
-
table没有caption，导致屏幕阅读器无法获知表格用途 -
th缺少scope="col"或scope="row"，行列关系断裂 -
input type="checkbox"周围用p包文字，而非label—— 点击文字无法聚焦控件 -
textarea没有label，仅靠 placeholder 提示 —— placeholder 不是 label 替代品
语义化最难的不是记住标签名，而是每次写 HTML 时，先问一句：“这段内容，脱离样式后，机器和人还能不能一眼看懂它是什么、在哪、为什么存在？”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
