HTML5语义化架构的核心是让标签真实反映内容逻辑角色：用<article>标记可独立分发内容，<main>包裹唯一主内容，<nav>定义主导航，<aside>放置辅助信息，<section>按主题组织带标题的内容块，严格遵循嵌套归属关系与细节语义标签。
HTML5语义化架构的核心，是让标签本身成为内容逻辑的自然表达——不是为了好看而加标签，而是因为“它本来就是这个角色”，结构就该如实反映内容的归属、独立性与功能。
从内容本质出发选标签
动手前先明确每块内容的“身份”：它能不能单独存在？是不是导航入口？是否属于主信息流？
- 能被RSS订阅、单独打印或转发的内容（如一篇博文、一条新闻）→用<article>
- 整页最不可删的部分（正文、主表单、核心产品展示）→用唯一<main>包裹
- 一组跳转链接，且构成用户主要浏览路径（顶部菜单、左侧栏目）→用<nav>
- 服务于主内容但非必需的补充（相关推荐、作者简介）→放在<aside>里，位置决定服务范围（在
内即服务该文，在 旁即服务全页） - 按主题组织的连续内容块（如“安装步骤”“故障排查”）→用<section>，且必须配
–
标题
嵌套要体现真实归属关系
标签之间的父子关系，不是为排版缩进，而是回答“它属于谁”。结构对了，屏幕阅读器和搜索引擎才不会读偏。
-
<main>必须直接位于下，不能包在
、 - 每篇<article>可自带<header>（含标题、time发布时间、作者address），体现其自包含性
- <figure>包裹图片+<figcaption>，图文关系显性化；不用div+p模拟
- 时间写成<time datetime="2026-06-17">今天</time>，机器可识别，SEO友好
避免常见结构性误用
错用语义标签比不用更伤结构。关键看是否破坏了内容逻辑链。
立即学习“前端免费学习笔记（深入）”；
- 把纯装饰图标、分享按钮塞进<nav>——它们不是导航，不该占用导航语义
- 在<main>里放页脚链接或广告横幅——稀释主内容权重，影响可访问性
- 用<section>代替<article>包裹博客正文——失去独立分发能力，RSS无法识别
- 多层无意义嵌套，比如
……
配合细节强化语义完整性
大骨架搭好后，小标签补上关键信息点，让语义链条闭合。
- 每个<section>和<article>都有且仅有一个
–
，不跳级
- 联系信息用<address>，不是；强调术语用<dfn>，不是单纯加粗
- 引用内容用<blockquote>，署名用<cite>
- 检查清单：全页一个h1？main包的是真核心？所有主导航都在nav里？time和figure有没有漏掉？
