现代语义化布局应优先使用 html5 结构元素：、、 划分主干区域， 和 组织内容块， 与 明确导航与附属内容，避免滥用 ，以提升可访问性、seo 和维护性。
body 不该靠手动写一堆 <div> 堆出来，现代语义化布局优先用标准 HTML5 结构元素划分核心区域，既利于可访问性，也减少 CSS 重置负担。
<h3>用 <code><header></header>、<main></main>、<footer></footer> 划分主干区域
这三个标签是 body 内最基础、不可替代的语义容器。浏览器默认赋予它们隐式 ARIA 角色（如 main 对应 role="main"），屏幕阅读器会直接识别。
常见错误现象：<div class="header"> 被当成普通容器，跳过导航；<code><div id="content"> 不被辅助技术识别为主内容区。
<ul>
<li>
<code><header></header> 应只包含站点级或章节级页眉（如 logo、主导航），不要塞进文章标题——那是 <h1></h1> 的事
<main></main> 在整个页面中必须唯一，且不能嵌套在 <article></article> 或 <aside></aside> 内部<footer></footer> 是其最近的节元素（<article></article> 等）的尾部，全局页脚要包在 <footer></footer> 里用 <section></section> 和 <article></article> 组织内容块
二者不是样式容器，而是内容关系标记：<section></section> 表示有主题的独立部分（如“用户评价”“配置参数”），<article></article> 表示可独立分发/复用的内容（如博客条目、新闻卡片、产品 SKU）。
使用场景：一个商品页的 body 可能这样组织：
<main><article><h1>无线降噪耳机 X1</h1>...</article><section aria-labelledby="reviews-title"><h2 id="reviews-title">用户评价</h2>
...</section><section><h2>技术参数</h2>...</section></main>
注意：<section></section> 必须有标题（<h2></h2>–<h6></h6>），否则语义断裂；<article></article> 可以没有，但建议有。
避免滥用 <div> 替代语义标签
<p>很多老项目把所有区域都写成 <code><div id="nav">、<code><div class="content-wrapper">，导致：
<ul>
<li>搜索引擎无法区分主次内容，影响 SEO 权重分配</li>
<li>CSS 选择器过度依赖 class，维护成本高（改个 class 名就得同步改 JS 和 CSS）</li>
<li>响应式断点逻辑混乱——比如想对所有 <code><main></main> 设置最大宽度，却得写 .content, .main-area, #primary 多个选择器
替换原则：只要该区域有明确功能或内容类型，就优先选 HTML5 语义标签；仅当纯粹为样式/JS 挂载点且无语义时，才用 <div>。
<h3>
<code><aside></aside> 和 <nav></nav> 的边界容易混淆
<nav></nav> 专指**主要导航链接集合**（如顶部菜单、侧边栏目导航、页脚站点地图），不是所有链接都算；<aside></aside> 是与当前内容**相关但可分离的信息**（如侧边栏推荐、术语解释、作者简介）。
典型误用：
- 把面包屑导航放进
<aside></aside>→ 应属<nav></nav>（它是导航路径） - 把“猜你喜欢”商品列表当
<nav></nav>→ 它不提供页面内跳转，属于补充内容，用<aside></aside>更准 - 多个
<nav></nav>未加aria-label→ 屏幕阅读器会读成“导航、导航”，需加<nav aria-label="主菜单"></nav>
真正复杂的页面（如仪表盘）可能有 3–4 个 <nav></nav>，但每个都必须有明确用途和标识。
语义标签本身不带样式，但它的结构意义直接影响 JS 获取元素的方式（比如 document.querySelector('main') 比 document.getElementById('content') 更稳定）、CSS 作用域控制（main h2 比 .content h2 更不易冲突），以及最关键的——当用户关闭 CSS 或用读屏软件时，页面是否还能被正确理解。这点常被忽略，直到上线后被无障碍审计打回。
