HTML5页面分块应优先使用语义化标签：一、用<section>划分带标题的逻辑区块；二、用<article>封装可独立分发的内容；三、用<nav>标识主要导航；四、用<aside>标记附属信息；五、仅在无语义需求时用<div>布局。
在HTML5中，页面分块是构建语义化结构的关键步骤。使用具有明确语义的标签替代传统通用容器，有助于提升可访问性、SEO效果与代码可维护性。以下是实现页面分块的具体方法：
一、使用<section>标签划分逻辑区块
<section>表示文档中的一个独立主题区域，每个<section>应有明确的标题，适用于内容上自成一体的模块，如文章章节、产品介绍区或用户评论区。
1、在<body>内插入<section>标签，并为其添加<h2>至<h6>级别的标题元素。
2、确保每个<section>的内容围绕同一主题组织，不与其他<section>内容交叉重复。
立即学习“前端免费学习笔记（深入）”；
3、避免将<section>用作纯粹样式布局容器；若无标题且无独立语义，应改用<div>。
二、使用<article>标签封装独立内容单元
<article>代表可独立分发或复用的内容块，例如博客文章、新闻稿、论坛帖子等，其内部可嵌套<header>、<footer>及多个<section>。
1、为每篇完整内容（如一篇技术博文）包裹一层<article>标签。
2、在<article>内部使用<header>定义标题与元信息，使用<footer>标注作者、发布时间等。
3、当同一页面存在多篇文章时，每个<article>应彼此分离，不可嵌套。
三、使用<nav>标签标识导航区块
<nav>专用于包含主要导航链接的区块，通常位于页眉、侧边栏或页脚，帮助辅助技术识别网站导航结构。
1、将主导航菜单（如首页、关于、服务、联系）放入<nav>标签内。
2、一个页面可包含多个<nav>，但仅对重要导航区域使用，如跳过导航链接、页内锚点导航不应滥用<nav>。
3、<nav>内部推荐使用无序列表<ul>配合<li>与<a>组织链接，增强语义清晰度。
四、使用<aside>标签标记附属内容
<aside>表示与主内容相关但可独立存在的侧边信息，例如作者简介、广告栏、相关链接或术语注释框。
1、将非主线但具关联性的内容置于<aside>中，如文章右侧的“延伸阅读”列表。
2、<aside>可出现在<article>内部（表示该文的附属说明），也可位于<body>层级（表示全站级侧边栏）。
3、若<aside>内容完全脱离当前上下文（如无关广告），需确保其不影响主内容逻辑流。
五、使用<div>标签进行无语义布局分组
<div>是通用容器，不携带语义信息，仅在缺乏合适语义标签或纯样式/脚本分组需求时使用，例如CSS Grid布局容器或JavaScript操作目标。
1、当区块仅用于控制样式（如设置背景色、边距）或绑定事件而无内容语义时，选用<div>。
2、避免用<div>替代<section>、<article>等语义标签；若内容具备明确主题或独立性，必须优先选择语义化标签。
3、为<div>添加class或id属性以支持CSS与JS操作，但不得依赖其传达结构含义。
