语义标签搭建html结构更省力可靠，需严格匹配内容角色：header、nav、main、footer按阅读顺序排列，main内用article/section/aside合理分块，标题层级与语义标签协同构建大纲，并补全aria-label等可访问性细节。
直接用语义标签搭结构，比套一堆 div 更省力也更靠谱。关键不是“用了没”，而是每个标签是否真正对应内容角色——header 是头、nav 是导航、main 是唯一正文区，错一层，可访问性和 SEO 就可能打折扣。
按内容流顺序组织顶层骨架
页面从上到下，天然有阅读顺序。HTML 结构就该跟着这个逻辑走，别为了样式倒着嵌套。
- header 放最上面，放 logo、主标题或搜索框都行，可以多处出现（比如每篇文章也有自己的 header）
- nav 紧跟在 header 后，只包真正跳转的链接，按钮或图标不导流就别塞进去
- main 必须独立存在，不能被 article 或 aside 包着，整个页面只能有一个
- footer 放最后，版权、备案号、回到顶部这些归它管
main 内部怎么分块才不乱
main 不是“万能筐”，往里堆内容前得想清楚：这是独立文章？还是主题归类？还是补充信息？
- 每篇博客、每条新闻用 article 包起来，自带标题、作者、时间，能单独 RSS 推送
- 多个 article 属于同一栏目（比如“CSS 新特性”），就用 section 套一层，并配 h2 标题
- aside 放侧边栏里的相关链接、作者简介或广告，和 main 内容有关联但非主线
- 避免把所有内容平铺在 main 下，不加 section 或 article，等于放弃结构表达力
标题层级和语义标签要对得上
h1–h6 不只是变大变小，它们和语义标签一起构成内容大纲。搜索引擎和读屏软件都靠这个理清重点。
- 全页 h1 只用一次，通常放在 header 或 main 的第一个 header 里
- 每个 article 或 section 自带一个标题，从 h2 开始，往下递进，不跳级
- 没标题的 section 别硬套，不如用 div；header 里没 h1–h6 也慎用，容易误导辅助技术
别忽略可访问性的隐性要求
语义标签本身就有无障碍基础，但有些细节不补上，效果会打折扣。
- figure 和 figcaption 配合图片使用，比单纯 img + alt 更准确表达图文关系
- 导航区域加 aria-label（如
aria-label="主导航"），方便屏幕阅读器区分多个 nav - 确保 DOM 顺序和视觉顺序一致，别用 CSS 把 footer 拖到上面去，读屏器还是会按代码顺序读
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
