（division的缩写）是HTML中最基础、最通用的容器元素。

基本用法

核心特点

无语义含义：纯粹的结构元素，不传达任何内容含义块级显示：默认占据整行宽度样式基础：通常配合class或id属性使用

适用场景

需要纯粹的结构容器时配合CSS实现复杂布局JavaScript动态操作DOM的挂载点

最佳实践：虽然div非常灵活，但在现代HTML5开发中，应优先考虑语义化容器元素。

三、语义化容器元素

HTML5引入了一系列语义化容器元素，它们不仅具有容器功能，还能明确表达所包含内容的性质。

1. header元素

表示介绍性内容或导航链接的容器。

典型应用

网站标题

文章标题

发布时间：2023-08-20

...

2. footer元素

通常包含与所在区域相关的元信息。

使用示例

...

3. article元素

表示独立、可自包含的内容区块。

特征说明

内容本身应有意义，独立于其他内容适合论坛帖子、新闻文章、博客条目等可嵌套使用（如评论中的子评论）

如何学习HTML

...文章内容...

4. section元素

表示文档中的通用分段或章节。

使用要点

引言

...

主要内容

...

注意：当内容需要明确标题且具有独立意义时，才使用section。纯粹为了样式而分组应使用div。

5. aside元素

表示与周围内容相关但不是主要内容的部分。

常见形式

四、容器元素的嵌套策略

合理的容器嵌套是构建良好HTML结构的关键。

典型页面结构

...

...

...

...

嵌套原则

保持层级清晰，避免过度嵌套（一般不超过4层）每个语义化容器应有明确的目的使用注释标明复杂结构的用途

五、容器元素的现代应用

1. 响应式布局基础

2. 配合CSS Grid/Flexbox

.grid-container {

display: grid;

grid-template-areas:

"header header"

"main sidebar";

}

3. 无障碍访问考虑

为容器添加适当的ARIA角色确保键盘导航顺序合理避免纯粹用于样式的空容器

六、选择容器的决策流程

内容是否需要语义表达？ → 是：选择语义化元素是否需要纯粹的结构分组？ → 是：使用div是否与主要内容有附属关系？ → 是：考虑aside是否是独立完整的内容单元？ → 是：使用article

通过合理运用各种容器元素，你可以创建出既符合标准又易于维护的HTML结构。记住：好的HTML结构是优秀网页的基础，它不仅影响SEO效果，也决定了代码的可访问性和可维护性。