<header> 表示页面或区块的引导性内容，可多次使用；<main> 唯一且不可嵌套于 <article> 等元素内；<section> 需有主题和标题，否则用 <div>；<aside> 强调内容相关性而非布局位置。
用 <header> 时别把它当“页眉图片容器”
很多人一看到 <header> 就立刻塞个 <img> 或写个大标题，其实它语义重点是「页面或区块的引导性内容」。一个页面可以有多个 <header>，比如主区域顶部一个，<article> 里面还能再套一个。
- 单独用
<header>不代表自动居中、加粗或有默认边距——样式得自己写 - 如果只是放 logo + 导航，
<header>+<nav>是更准确的组合 - 不要用
<header>替代<h1>：标题层级该用 heading 标签，结构标签管的是“块角色”，不是“文字级别”
<main> 必须且只能出现一次，且不能嵌套在 <article> 或 <aside> 里
<main> 表示文档中与当前页面最直接相关、独一无二的主要内容。浏览器和读屏软件会据此跳转，所以规则很严格。
- 每个 HTML 文档最多一个
<main>，重复会导致验证失败和辅助技术误判 - 它不能是
<article>、<aside>、<footer>、<header>、<nav>的子元素 - 常见错误：
<article><main>…</main></article>—— 这违反规范，应把<main>提到外层，<article>放进它里面
<section> 和 <div> 的关键区别在“是否自带标题”
<section> 不是视觉分组工具，而是语义分组：它必须有主题，且通常（但不强制）带一个 <h2>–<h6> 标题。没标题的“区块”，就该用 <div>。
- 正确用法：
<section> <h2>用户反馈</h2> <p>大家说……</p> </section>
- 错误用法：
<section> <div class="card">…</div> <div class="card">…</div> </section>
→ 没标题、无主题，纯样式分组，这里该用<div> - 注意：
<section>会出现在文档大纲中，影响 SEO 和屏幕阅读器导航顺序
<aside> 不等于“右边栏”，而是“附属但相关的内容”
新手常把 <aside> 当作 CSS 布局的右栏占位符，结果导致语义错乱。它的核心是内容关系：它里面的文字/链接/引用，应该能脱离主文独立存在，又和当前上下文有关联。
立即学习“前端免费学习笔记（深入）”；
- 适合放：侧边术语解释、作者简介、相关文章链接、引用来源
- 不适合放：网站全局导航、页脚信息、广告横幅（除非广告明确关联当前文章，比如某款相机评测旁放该相机购买链接）
- 它可以出现在
<article>内部（如技术文章里的代码说明框），也可以在<body>级作为全站侧边栏——但前提是内容确实“附属且相关”
<main> 的唯一性和 <section> 的标题约束。没有标题的 <section> 不仅语义失效，还会让生成的大纲混乱；而多出一个 <main>，可能让键盘用户按 Ctrl+Alt+1（跳主内容）时卡住。 
