html5语义化布局应优先掌握header、nav、main、aside、footer五标签；section需配标题，main仅限1次且不可嵌套，aside适用独立相关内容，nav专用于导航链接集合，语义化核心是准确表达内容角色。
HTML5 页面布局不需要从“完整页面结构”开始学，先搞懂 <header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer> 这五个语义化标签怎么用，比死记 DOCTYPE 和 meta 标签管用得多。
为什么 <div> 不再是唯一选择？
<p>过去靠一堆 <code><div class="header"> 模拟结构，<a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://www.php.cn/zt/16180.html" target="_blank">浏览器</a>和屏幕阅读器完全不知道它真是页头；HTML5 引入的语义化标签让机器能“读懂”页面逻辑。但注意：<code><section></section> 不等于“一个区块”，它必须有标题（<h1></h1>–<h6></h6>），否则不如用 <div>。
<ul>
<li>
<code><main></main> 在整个页面中只能出现一次，且不能嵌套在 <article></article>、<aside></aside>、<footer></footer>、<header></header>、<nav></nav> 内
<aside></aside> 不只是“侧边栏”，也适用于推文、引用、广告等与主内容相关但可独立存在的内容display: block
<nav></nav> 的使用边界在哪？
<nav></nav> 专指“导航链接集合”，不是所有链接都该包进去。页脚里的“关于我们”“隐私政策”链接通常不放 <nav></nav>，而顶部主导航、面包屑、站内搜索入口可以。
- 多个导航区可以有多个
<nav></nav>，比如<nav aria-label="主导航"></nav>和<nav aria-label="快捷工具"></nav> - 如果导航只有 1–2 个链接（如“登录/注册”），用
<div> 更轻量 <li>不要把 <code><nav></nav>当样式容器：它不自带 margin/padding，也不影响布局流，纯语义用途 - 错误写法：
<article> <header>文章标题</header> <p>正文…</p> </article>
（缺少标题元素，<header></header>在<article></article>内应配合<h2></h2>或更高阶标题） - 正确写法：
<article> <header> <h2>文章标题</h2> </header> <p>正文…</p> </article> - 避免
<main></main>包<header></header>+<footer></footer>：页头页脚属于整页，不是主内容的一部分
常见错误：嵌套混乱导致无障碍失效
屏幕阅读器依赖 DOM 结构播报内容顺序。<header></header> 放在 <main></main> 外面是常规操作，但如果把 <header></header> 塞进 <article></article> 里又没配 <h2></h2>，就会让辅助技术误判层级。
立即学习“前端免费学习笔记（深入）”；
真正卡住新手的往往不是标签写不对，而是没想清楚“这段内容对用户意味着什么”。语义化不是加标签凑数，是告诉浏览器：“这里是一段独立的、可被跳过的、有明确角色的内容”。<main></main> 里塞了页脚版权信息，或者用 <section></section> 包单个按钮，问题就出在这里。
