# 结构布局示例

URL: https://caijiao.org/html/08-layout/03-example
Source: docs/html/08-layout/03-example.md
Description: 结构布局示例展示了如何使用 HTML5 的语义化标签（如 header、nav、main、footer 等）构建清晰的网页结构，便于维护和响应式设计。

在 HTML5 中，可以利用语义化标签构建一个结构清晰、易于理解和维护的网页布局。这种方式不仅有助于 SEO，也便于辅助工具识别网页内容。

## 常见网页结构区域

1. `<header>`：页面头部，包含网站标题、Logo、导航等。
2. `<nav>`：主导航区域，通常嵌套在 header 中。
3. `<main>`：页面主内容，仅出现一次。
4. `<article>` / `<section>`：页面的主体内容分块。
5. `<aside>`：侧边栏或补充内容。
6. `<footer>`：页面底部，包含版权、联系方式等。

## 示例代码



## 布局说明

- **Header + Nav**：顶部导航区域
- **Main**：核心内容区域，可再细分为 `section` 和 `article`
- **Aside**：用于展示侧栏内容、推荐、广告等
- **Footer**：统一的页尾信息

此结构可作为响应式网页开发的基础骨架，配合 CSS 实现更精美的排版与适配。