直接用、、、、这五个语义化标签比div更可靠易维护；仅用于纯样式/脚本容器、无标题的分组、第三方组件包裹或嵌套布局等无语义场景。
直接用 <header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer> 这五个语义化标签，比套一堆 <div> 更可靠、更易维护，也更少出兼容性问题。
<h3>什么时候该用 <code><div> 而不是语义标签
<p>语义标签不是万能的，有些场景必须退回 <code><div>：
<ul><li>纯粹为样式或 JS 操作临时包裹一组元素，比如动画容器、加载遮罩层、弹窗根节点——这些没有内容语义，用 <code><div> 最干净
<li>需要嵌套多层布局容器（如 Grid 子项再 Flex 布局），而语义标签不支持嵌套同类结构（例如不能在 <code><main></main> 里再套一个 <main></main>）
<div> 包裹（如某些 React 组件渲染结果），强行替换会破坏行为
<li>
<code><section></section> 和 <article></article> 要求内部有标题（<h1></h1>–<h6></h6>），没标题就别硬套，用 <div> 更诚实
<h3>
<code><main></main> 的唯一性约束和常见误用
<main></main> 在整个页面中只能出现一次，且不能嵌套在 <article></article>、<aside></aside>、<footer></footer>、<header></header>、<nav></nav> 内部。违反这点会导致屏幕阅读器跳过内容，SEO 权重稀释。
- 错误写法：
<article><main>...</main></article>——<main></main>不该出现在<article></article>里 - 错误写法：
<main>...</main><main>...</main>—— 页面里出现两个<main></main> - 正确做法：把真正面向用户的核心内容（非导航、非侧边栏、非页脚）全部放在唯一一个
<main></main>内，哪怕它包含多个<section></section>或<article></article>
Flex/Grid 布局下容器的 class 命名陷阱
即使用了语义标签，仍需加 class 控制样式；但 class 名容易暴露逻辑混乱：
- 避免用
class="left-nav"这类纯位置描述名——如果某天改成顶部导航，class 就失效或误导 - 避免
class="container-1"、class="wrap"这类无意义命名，后期查 DOM 根本不知道它管哪块 - 推荐组合式命名：比如
class="nav-primary"（主导航）、class="sidebar-related"（相关推荐侧栏）、class="main-article-list"（主内容区的文章列表） - 如果用 BEM，确保修饰符反映功能而非视觉，例如
nav__item--active可以，nav__item--blue不行
最常被忽略的是：语义标签本身不带任何默认 margin/padding，但不同浏览器对 <main></main> 或 <aside></aside> 的默认 display 解析可能略有差异（尤其旧版 Safari），上线前务必在真实设备上检查空白间距是否一致。
