HTML语义化标签按功能分为结构型、文本型和媒体型三类：结构型如<header><nav><main>定义页面框架；文本型如<h1><p><blockquote>表达内容层级与类型；媒体型如<img><figure><video>嵌入多媒体资源。
HTML语义化标签按功能分三类，别再只记<header>和<nav>
HTML语义化标签不是随机罗列的，而是按内容角色严格归类。你用错标签，往往是因为没看清它在结构中的定位——比如把<section>当<div>套壳用，或把<aside>塞进主文里当装饰。
<main>必须唯一，<article>可嵌套，别混成一个意思
<main>是整个文档中**唯一**的主体内容容器，浏览器和屏幕阅读器靠它快速定位核心信息；而<article>表示可独立分发、复用的内容单元（如一篇博客、一条新闻），可以有多个，也能嵌套在<section>或<main>里。
-
<main>不能出现在<article>、<aside>、<footer>、<header>、<nav>内部 -
<article>内可以再嵌<article>（比如评论区里的用户回复） - 如果一段内容既不属于
<main>也不属于<article>，但又需要语义区块，优先选<section>，不是<div>
<aside>不是“侧边栏CSS样式”，而是语义上的“附属关系”
很多人写<aside>就想到浮动右栏，这是典型误解。<aside>的关键是内容与当前上下文的**附属性**：它可以出现在页面任意位置，只要语义上是补充、注释、引用或广告类内容。
- 文章末尾的“相关链接”列表，用
<aside>比<section>更准确 - 博客正文里的
<blockquote>加作者说明，整个块包在<aside>里才完整表达“这是对引文的补充” - 放在
<nav>里的辅助导航（如“快捷入口”）不该用<aside>，那是<nav>的子集，不是附属
用<section>前先问一句：它有明确标题吗？
<section>不是通用分组标签，它的存在前提是该区块**有主题且可被标题概括**。没有<h1>–<h6>的<section>大概率是误用。
立即学习“前端免费学习笔记（深入）”；
- 常见错误：
<section class="card-grid">——纯样式命名，无主题，应改用<div> - 正确用法：
<section><h2>技术栈</h2><p>我常用…</p></section> - 注意：
<article>和<aside>内部的子区块，即使有标题，也优先用它们自己的语义标签，而不是退化为<section>
真正难的不是记住标签名，而是每次写标签时多想半秒：这个内容在逻辑上属于谁？跟谁有关？要不要被单独引用或索引？忽略这点，再多的<header>也救不了语义混乱。
