HTML5结构标签构建语义化页面骨架：header、main、footer为不可替代基础容器，main必须唯一；section按主题分组，article用于独立可复用内容；aside和nav明确辅助与导航边界；div仅用于无更贴切语义标签的场景。
用对 HTML5 结构标签，页面区域划分就不是靠一堆 <div> 硬堆出来的视觉盒子，而是有逻辑、可读、能被机器理解的内容骨架。
核心主干：用 <header>、<main>、<footer> 搭起页面骨架
这三个标签是 body 内不可替代的基础容器。它们自带隐式 ARIA 角色（比如 <main> 对应 role="main"），屏幕阅读器会直接识别并跳转到主内容区。
-
<header>放网站标识、全局导航或某区块的标题信息；它可多次出现，既能在页面顶层，也能嵌套在<article>或<section>里 -
<main>必须唯一，只包裹真正核心、不可省略的内容，不包含导航栏、侧边栏或页脚这类重复性区块 -
<footer>同样可多处使用：整页底部放版权信息，单篇文章末尾放作者、发布时间等元数据
内容分组：按主题用 <section>，按独立性用 <article>
<section> 是页面内的逻辑区块，比如“产品特性”“用户评价”“常见问题”，每个都该有明确标题（<h2>–<h6>）；而 <article> 是能脱离当前页面单独存在、分发或复用的内容单元，比如一篇博文、一条新闻、一个评论卡片。
- 首页上的“最新动态”列表，每条新闻用
<article>包裹，内部可用<header>放标题和时间，<footer>放来源或标签 - “关于我们”页面中，“团队介绍”“发展历程”“企业文化”三个模块，适合用
<section>划分，各自配一个<h2> - 避免把整个首页套进一个
<article>—— 它不是容器，而是内容实体
辅助与导航：用 <aside> 和 <nav> 明确功能边界
<aside> 不是“右边那个小栏”，而是语义上可分离的附属内容，比如文章旁的术语解释、延伸阅读、作者简介；<nav> 专指主要导航链接集合，不是所有链接都算导航。
立即学习“前端免费学习笔记（深入）”；
-
<aside>可放在<main>内部（关联当前文章），也可放在<body>级别（作为全站侧边栏） -
<nav>推荐用<ul>+<li>+<a>组织链接，便于辅助技术解析导航结构 - 页内锚点菜单、面包屑导航、跳过链接这些次要导航，一般不用
<nav>，避免语义过载
灵活补充：什么时候还用 <div>？
<div> 没有过时，它仍是合法且必要的通用容器——前提是确实没有更贴切的语义标签可用。
- 纯样式分组：比如为一组按钮加统一动画类名，或为 JS 动态插入内容预留挂载点
- 布局微调：Grid 或 Flex 的子项需要额外包裹层来控制对齐或间距时
- 避免情况：给“头部导航”写
<div class="header">，或给“主要内容”写<div id="content">—— 这些本该用语义化标签替代
