HTML5语义化标签是用<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>等明确表达内容角色的结构标签，提升可访问性、SEO与可维护性；<main>全页唯一，<header>/<footer>可多次使用，需避免语义套娃和滥用div。
HTML5语义化标签不是给代码“贴标签”，而是用标签讲清楚内容“是谁、在哪、干什么”。写对了，搜索引擎更懂你，读屏软件更顺手，团队改起代码也不抓瞎。
先定结构，再选标签
动手前问自己三个问题：这块内容能单独存在吗？它在整个页面里承担什么角色？去掉样式后，别人还能看出它是导航还是正文吗？
- 能独立分发（比如 RSS 订阅、打印、分享）→ 用 article
- 是整页最核心的信息区（不含导航、侧边栏、页脚）→ 用唯一 main
- 是一组主要跳转链接（如顶部菜单、左侧目录）→ 用 nav
- 是与主文相关但非必需的补充（如推荐文章、广告、作者简介）→ 用 aside
- 是按主题划分的连续内容块（如“安装步骤”“常见问题”）→ 用 section
别踩这些常见坑
语义化不是堆标签，错用反而降低可读性。
- main 必须全页唯一，不能嵌在 article 或 aside 里
- header 和 footer 可以出现多次——页面顶部一个，每篇 article 内部也能有自己的 header
- 纯图标按钮旁的一行说明文字，用 span 或 small 更合适；只有完整信息块（比如带标题、时间、摘要的文章）才上 article
- 避免“语义套娃”：不用 section > article > section 这类无实际区分意义的嵌套
搭配小标签，细节更到位
大结构搭好后，用轻量语义标签补足关键信息点：
立即学习“前端免费学习笔记（深入）”；
- 发布时间用 time datetime="2026-06-10"，既利于 SEO 识别时效，也方便读屏软件朗读
- 图表配说明时，用 figure 包裹图片 + figcaption，比普通 div+ p 更易被图片搜索收录
- 引用他人观点或数据，用 blockquote 而非只是加缩进；作者署名可用 cite
- 强调关键词或术语定义，优先用 strong、em、dfn，而不是只靠 CSS 加粗变色
验证结构是否合理
写完可以快速自查这几项：
- 全页只有一个 h1 吗？main 是否包裹了真正要传达的核心内容？
- 所有主导航都包在 nav 里了吗？页脚版权信息是否在 footer 中？
- 有没有连续使用 div class="xxx" 的地方？能否替换成 section、aside 或 article？
- 标题层级是否连贯？比如 h2 下直接跳到 h4，会打乱辅助技术生成的大纲
