HTML页面分块核心是用语义化标签（如<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>）替代无意义<div>，确保结构清晰、可访问性好、SEO友好，并遵循嵌套规则与标题要求。
HTML 页面内容分块，核心是用语义化标签划分逻辑区域，而不是靠 <div> 无差别堆砌。语义正确才能让结构清晰、可访问性好、SEO 友好，也方便后续用 CSS 精准控制布局。
用语义化标签替代纯 <div> 分块
浏览器和辅助技术（如读屏器）依赖语义标签理解页面结构。盲目套 <div class="header"> 不如直接用 <header> —— 后者自带隐含含义，无需额外说明。
-
<header>：页面或区块的头部，通常含标题、logo、主导航 -
<nav>：仅用于导航链接集合（不是所有链接都该放这里） -
<main>：页面唯一主内容区，一个页面只出现一次 -
<article>：能独立分发/复用的内容单元（如博客文章、新闻条目） -
<section>：有主题的逻辑分组，必须带标题（<h2>–<h6>），否则语义失效 -
<aside>：与主内容相关但可独立存在的补充信息（如侧边栏、广告、作者简介） -
<footer>：页面或区块的尾部，不一定是页面最底部
错误示例：<div class="section"><div class="title">关于我们</div><p>…</p></div> —— 缺少语义，CSS 类名无法被机器识别。
嵌套规则与常见误用
语义标签不是扁平列表，它们有明确的嵌套逻辑。错乱嵌套会破坏结构意义，甚至影响屏幕阅读器播报顺序。
立即学习“前端免费学习笔记（深入）”；
-
<main>内不应再嵌套<header>或<footer>（除非是<article>或<section>的局部头尾） -
<article>可以独立存在，也可嵌套在<main>或<section>中；反过来，<section>不能作为<article>的子元素来“包装”内容 -
<nav>必须包裹一组导航链接，如果里面混了搜索框、按钮或段落文字，就违背了它的语义 -
<aside>必须与最近的祖先节（<article>或<section>）相关；若放在<body>直接子级且无上下文，语义模糊
<article>
<header>
<h2>如何调试 fetch 请求</h2>
<p>发布于 2024-05-20</p>
</header>
<p>当 fetch 返回空响应体时…</p>
<aside>
<h3>小贴士</h3>
<p>检查 network 面板的 Initiator 列</p>
</aside>
</article>
CSS 布局配合分块的实用注意点
分块本身不等于布局，但语义结构会影响 CSS 作用域和响应行为。现代布局（如 Flexbox / Grid）应基于语义容器设计，而非强行拉伸 <div>。
- 给
<header>、<nav>、<main>等设置display: flex是安全的；但对<section>直接设display: grid前，先确认它确实承担网格容器职责 - 避免用
float或负 margin 打乱语义流 —— 这会让屏幕阅读器按源码顺序读，而视觉上却错位 - 用
grid-area命名区域时，名称应与语义标签一致（如header、sidebar），增强可维护性 - 响应式断点中，
<aside>在移动端常折叠进汉堡菜单，此时需用aria-expanded和aria-controls补充状态，不能只靠 display: none
验证分块是否合理的方法
不要只看渲染效果，重点检查结构是否经得起“剥离样式”的考验 —— 即禁用 CSS 后，内容是否仍按逻辑顺序线性可读。
- 用浏览器开发者工具的「Accessibility」面板查看 Landmark Regions，确认
<main>、<nav>等是否被正确识别 - 用 VoiceOver（macOS）或 NVDA（Windows）朗读页面，听是否跳过关键区块或重复播报
- 运行 W3C HTML Validator，关注 “Sectioning elements must have a heading” 类警告 ——
<section>和<article>没标题就是无效语义 - 检查
<main>是否被意外包裹在<article>或<section>中（规范要求它是顶层元素）
语义分块不是加几个新标签就完事，关键是每个标签是否真实表达了内容角色。写完 HTML 后，删掉所有 CSS，用纯文本方式扫一遍结构 —— 那才是用户（尤其是依赖辅助技术的用户）最先看到的真实页面。
