HTML5语义化标签让页面结构自解释：main唯一标识核心内容，nav定义导航，article用于独立可分发内容，section按主题分块并建议带标题，aside承载补充信息，header/footer可嵌套使用；避免语义套娃，善用time、figure、blockquote等轻量标签增强可访问性与SEO。
用对 HTML5 语义化标签，页面结构一眼就明白——不是靠 class 名猜，而是标签本身就在说话。
明确每个区块“是谁、在哪、干什么”
写标签前先问自己：这块内容能单独存在吗？它在整个页面里承担什么角色？去掉样式后，别人还能看出它是导航还是正文吗？
- 整页最核心的信息区（不含导航、侧边栏、页脚）→ 用 main，且全页只能出现一次
- 一组主要跳转链接（如顶部菜单、左侧目录）→ 用 nav
- 能独立分发的内容（比如 RSS 订阅、打印、分享的博客文章）→ 用 article
- 按主题划分的连续内容块（如“安装步骤”“常见问题”）→ 用 section，内部建议带标题（h1–h6）
- 与主文相关但非必需的补充（如推荐文章、广告、作者简介）→ 用 aside
header 和 footer 可多次使用，别只盯首页
header 和 footer 不是页面专属，它们可以出现在页面全局，也能嵌在 article 或 section 内部。
- 全局页眉：header 包含网站标题、主导航
- 文章头部：article 里的 header 可放标题、作者、发布时间
- 文章尾部：article 里的 footer 可放版权、编辑说明、相关链接
- 页脚区域：footer 放备案号、联系方式等，位置灵活，不强制在页面最底
避免语义套娃和标签滥用
语义化不是堆标签，错用反而让结构更混乱。
- 别把 section 套 article 再套 section——没实际区分意义的嵌套，纯属增加理解成本
- main 必须全页唯一，不能放在 article 或 aside 里
- 纯图标按钮旁的一行说明文字，用 span 或 small 更合适；只有完整信息块（带标题、时间、摘要）才上 article
- 不要用 div 模拟语义标签，比如 div class="nav" → 直接换 nav
搭配轻量语义标签补足关键细节
大结构搭好后，用小标签点睛，让机器和人都能更快抓住重点。
- 发布时间用 time datetime="2026-06-24"，既利于 SEO 识别时效，也方便读屏软件朗读
- 图表配说明时，用 figure 包裹图片 + figcaption，比普通 div + p 更易被图片搜索收录
- 引用他人观点或数据，用 blockquote 而非只靠缩进；作者署名可用 cite
- 强调关键词或术语定义，优先用 strong、em、dfn，而不是只靠 CSS 加粗变色
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
