页面结构类语义标签包括、、、、、、；用错会破坏文档骨架，如必须唯一且不可嵌套在等标签内，须配标题，须可独立分发。
HTML语义化标签不是“加分项”，而是现代网页的基础设施——不用它们，div堆出来的页面在SEO、无障碍、维护性上会持续掉血，且越拖越难补救。
哪些标签属于页面结构类？用错就破坏整体语义
这类标签定义的是文档骨架，浏览器和辅助技术靠它们快速定位关键区域。一个页面里它们的使用有明确约束，不能随意嵌套或重复：
-
<header></header>表示页面或某个<section></section>的头部，可多次出现；但不要把它当“顶部装饰盒”——里面塞一堆无关广告或按钮就偏离本意 -
<nav></nav>专为**重要导航链接群**设计，比如主导航、面包屑、页内锚点跳转列表；纯操作按钮（如“导出PDF”“分享”）不该放进去 -
<main></main>每个页面**必须且只能有一个**，且不能出现在<header></header>、<footer></footer>、<aside></aside>或<nav></nav>内部；它不是“视觉居中容器”，而是语义上的“内容主干” -
<footer></footer>对应其父级上下文：可以是整个页面的页脚，也可以是某篇<article></article>下的作者信息和发布时间
<article></article> 和 <section></section> 怎么分？别再靠视觉判断
两者都表示“一块内容”，但语义完全不同：
-
<article></article>是**可独立分发、复用的内容单元**，比如一篇博客、一条新闻、一个用户评论、一个微博帖子；它自带隐含的元数据（如可通过<time datetime></time>标注发布时间） -
<section></section>是**主题性分组**，强调内容之间的逻辑关联，比如“产品特性”“客户评价”“技术参数表”；它必须搭配标题（<h2></h2>–<h6></h6>）才有完整语义 - 常见错误：
<section></section>里只放几个<p></p>没标题 → 语义断裂；把整页内容包进一个<article></article>→ 过度泛化，失去“独立可提取”的意义
<aside></aside> 不是“右边那栏”，而是语义上的“旁注”
很多人把 <aside></aside> 当作侧边栏容器来用，这是对语义的误读：
- 它的本质是**与主内容相关但非核心的补充信息**，比如文章里的术语解释、作者简介、相关链接推荐、广告（前提是广告与当前
<article></article>或<section></section>主题有关） - 它可以出现在页面任意位置，不一定要在视觉右侧；甚至可以嵌套在
<article></article>内部，作为某段话的批注 - 如果侧边栏内容与主内容完全无关（如全站通用的促销 banner），更适合用
<section></section>+ 明确 class，而不是强行套<aside></aside>
为什么 <main></main> 不能嵌套在 <header></header> 里？
这不是浏览器限制，而是语义冲突：
-
<header></header>描述的是“介绍性内容”，而<main></main>描述的是“主体内容”——把主体塞进介绍里，逻辑上说不通 - 屏幕阅读器会按语义层级播报：进入
<header></header>后预期听到 logo、导航等；若突然遇到<main></main>，会打断上下文理解 - 搜索引擎可能因此降权该页面的主内容识别准确率，尤其当
<main></main>被包裹在多个嵌套<div> 中时，语义信号进一步衰减 <p>最常被忽略的一点：语义化不是“写对标签就行”，而是让每个标签在 DOM 层级、上下文关系、辅助技术行为、SEO 解析路径上都保持一致。一旦某处松动，整条语义链就容易脱节。</p> </div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
