# 其他新标签

URL: https://caijiao.org/html/11-html5/03-new-tags
Source: docs/html/11-html5/03-new-tags.md
Description: HTML5 引入了许多新标签，如 、、 和 ，它们增强了网页的语义化结构，提升可读性和SEO表现。

HTML5 相较于之前版本，新增了许多语义化标签，帮助开发者更清晰地表达网页结构和内容，提高网页的可访问性和搜索引擎优化效果。

## 主要新标签介绍

### 1. `<article>`

表示页面中独立的内容块，如博客文章、新闻条目。

```html
<article>
  <h2>文章标题</h2>
  <p>文章内容...</p>
</article>
```

### 2. `<section>`

定义文档中的章节或区域，通常包含标题。

```html
<section>
  <h2>章节标题</h2>
  <p>章节内容...</p>
</section>
```

### 3. `<aside>`

表示与主内容稍有关系的侧边内容，如侧边栏、广告或引用。

```html
<aside>
  <p>侧边栏内容</p>
</aside>
```

### 4. `<figure>` 与 `<figcaption>`

用于标注图像、插图及其说明文字。

```html
<figure>
  <img src="image.jpg" alt="示例图片" />
  <figcaption>图片说明文字</figcaption>
</figure>
```

### 5. `<header>` 与 `<footer>`

分别表示页面或区块的头部和底部区域。

```html
<header>
  <h1>网站标题</h1>
</header>

<footer>
  <p>版权信息</p>
</footer>
```

### 6. `<main>`

定义页面的主体内容，页面中只能有一个 `<main>` 标签。

```html
<main>
  <p>主要内容</p>
</main>
```

### 7. `<nav>`

表示导航菜单区域。

```html
<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</nav>
```

## 小结

HTML5 新增的这些标签丰富了网页的语义层次，方便开发者构建结构清晰、易维护且对搜索引擎友好的网页，建议在开发中积极使用。