应优先使用语义化html标签表达内容角色，依据实际内容结构选择header、nav、main、article、section、aside、footer等标签，确保结构准确反映信息层级与归属关系，并配合heading层级、time、address等细节形成完整语义链。
直接用语义标签表达内容角色，而不是靠 class 或 div 堆砌视觉效果。重点在于让结构本身说明“这是什么”，而不是“它看起来像什么”。
从内容出发确定主干层级
先梳理页面实际内容模块：有没有全局页眉？是否有主导航？核心信息是一整块还是多篇独立文章？有没有侧边补充或底部声明？根据这些真实内容决定是否需要 header、nav、main、aside、footer。
- header 不仅限于页面顶部，每篇 article 也可自带 header（含标题、作者、时间）
- nav 只包裹真正起导航作用的链接，比如顶部菜单或文章目录，不包括“分享到微博”这类操作按钮
- main 必须唯一，且不能嵌套在 article、aside、footer 等内部——它是整个页面的“内容锚点”
区分 article 与 section 的逻辑边界
关键看内容是否自包含、可独立存在。不是按样式分块，而是按信息粒度判断。
- 用 article 包裹博客正文、新闻稿、用户评论——它们能脱离当前页面被 RSS 订阅、单独打印或转发
- 用 section 组织主题性分组，比如“技术方案”“客户案例”“常见问题”，每个 section 应有明确的 h2–h6 标题
- 避免把多个 article 直接平铺在 main 下；若属同一栏目（如“Vue 教程”），外层加 section 并配标题，再放 article
用嵌套体现内容归属关系
语义标签的嵌套不是为了布局，而是表达“谁属于谁”。例如一篇带作者简介和相关推荐的文章，结构应反映这种从属逻辑。
- article 内可包含自己的 header（标题+元信息）、section（如“背景”“实现步骤”）、aside（文中引用或术语解释）
- aside 放在 article 内，表示它服务于该文；放在 main 旁，则表示服务整页主体内容
- figure+figcaption 替代 div+p 描述图片，让图文关系显性化
配合标题层级与辅助语义强化可读性
语义结构要和 heading 层级、time、address 等细节协同，才能形成完整的内容叙事链。
- 每个 section 和 article 都应有且仅有一个 h1–h6，不跳级（h2 后不接 h4）
- 发布时间用 time datetime="2026-06-10"，比纯文本更利于机器识别
- 联系信息用 address，而非 div class="contact"，明确其语义是“联系地址”而非普通段落
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
