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