HTML5结构标签是语义化标签，用于明确内容角色；不能只用<div>，否则影响SEO、无障碍访问和协作效率；<main>只能出现一次且须为<body>直接子元素。
<header>、<nav>、<main>、<section>、<article>、<aside>、<footer> 这些就是 HTML5 结构标签——它们不是装饰品，而是告诉浏览器“这段内容**是什么角色**”的语义指令。
为什么不能只用 <div>？
用一堆 <div id="header">、<div class="nav"> 能实现视觉效果，但对机器是“黑盒”：搜索引擎抓不到重点，读屏软件无法准确朗读结构，协作时别人得靠猜 class 名才能理解你的意图。HTML5 结构标签直接把语义“写进标签名”，比如：
<nav> <a href="/home">首页</a> <a href="/about">关于</a> </nav>浏览器和辅助工具立刻知道这是导航区，无需依赖 class 或注释。
<main> 只能出现一次，且不能嵌套在 <article> 或 <section> 里
这是最容易出错的硬性规则：<main> 表示页面唯一的核心内容容器，必须是 <body> 的直接子元素（或仅被 <article> 包裹时例外，但极少见）。常见错误：
- 在
<section><main>.../section>—— ❌ 违反规范，可能被屏幕阅读器跳过 - 页面中写了两个
<main>—— ❌ 浏览器不会报错，但 SEO 和无障碍检测工具会警告 - 把页眉/侧边栏塞进
<main>—— ❌ 它只该装用户真正想看的主体内容（如文章正文、产品列表）
<article> 和 <section> 的本质区别
二者都表示“一块内容”，但语义层级不同：
-
<article>：可独立存在、可被单独分发的内容单元。例如一篇博客、一条新闻、一个论坛回帖。它自带隐含的“可订阅/可转发”语义 -
<section>：只是文档中的一个逻辑分组，依赖上下文才有意义。比如“技术背景”“性能测试结果”“用户反馈”这些小节，合起来才是完整报告 - 判断口诀：如果把这块内容单独保存为一个文件，扔到另一个网站还能被理解，就用
<article>；否则用<section>
示例（正确嵌套）：
<main>
<article>
<header><h1>如何理解语义化</h1></header>
<p>语义化不是为了好看…</p>
<section>
<h2>为什么重要</h2>
<p>对 SEO 和无障碍访问有直接影响…</p>
</section>
</article>
</main>
移动端和 SEO 不会主动奖励你，但会惩罚语义缺失
没有结构标签，页面照样能显示；但一旦你加了 <header> + <nav> + <main>，Google 搜索结果页可能展示“跳转到主要内容”快捷链接；iOS VoiceOver 用户双指下滑时能快速定位到 <main> 区域——这些都不是玄学，而是解析器真正在用的信号。而最常被忽略的一点：<meta name="viewport"> 和结构标签一样，属于「不写不会崩，但写了才真正进入现代 Web 开发」的底线配置。
