Skip to content

5.2 前端入门全集之html5区块化标签

2、HTML5 区块标签

标签 描述 应用场景 最佳实践
<header> 页头 页眉或区块的头部 页面顶部导航栏、文章/区块的标题部分
<nav> 导航条 导航链接集合 主要导航菜单、面包屑导航、页脚快速链接
<main> 网页核心部分 文档的主要内容 每个页面只能有一个 <main>，不应包含重复内容（如侧边栏、页眉页脚）
<article> 文档的核心文章内容，会被搜索引擎主要抓取 独立、可分发的完整内容块 博客文章、新闻报道、论坛帖子、用户评论
<section> 文档的区域，语义比 div 大 文档中的主题部分 当内容需要单独标题时，通常包含 <h1>-<h6>标题
<aside> 文档的非必要相关内容，比如：广告等 与主要内容相关但可独立的内容 侧边栏、引文、广告
<footer> 页脚 页脚或区块的底部 页面底部版权信息、文章作者信息、联系信息

HTML5 语义化标签最佳实践示例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML5 语义化标签最佳实践示例</title>
  </head>
  <body>
    <!-- 页头 -->
    <header>
      <h1>欢迎来到我的博客</h1>
      <p>分享知识与见解</p>
    </header>

    <!-- 导航条 -->
    <nav>
      <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#articles">文章</a></li>
        <li><a href="#about">关于</a></li>
        <li><a href="#contact">联系</a></li>
      </ul>
    </nav>

    <!-- 网页核心部分 -->
    <main>
      <!-- 核心文章内容 -->
      <article>
        <h2>HTML5 的新特性</h2>
        <p>本文将介绍 HTML5 的一些新特性及其应用场景。</p>

        <!-- 文档中的主题部分 -->
        <section>
          <h3>语义化标签</h3>
          <p>
            HTML5 引入了语义化标签，如 &lt;header&gt;、&lt;nav&gt;、&lt;main&gt;
            等，使网页结构更加清晰。
          </p>
        </section>

        <section>
          <h3>多媒体支持</h3>
          <p>
            HTML5 提供了 &lt;video&gt; 和 &lt;audio&gt;
            标签，方便嵌入多媒体内容。
          </p>
        </section>
      </article>

      <!-- 与主要内容相关但可独立的内容 -->
      <aside>
        <h3>相关链接</h3>
        <ul>
          <li>
            <a href="#">MDN HTML 文档</a>
          </li>
          <li>
            <a href="#">W3C HTML 教程</a>
          </li>
        </ul>
      </aside>
    </main>

    <!-- 页脚 -->
    <footer>
      <p>&copy; 2028 我的博客。保留所有权利。</p>
      <p>
        联系方式：<a href="mailto:contact@example.com">contact@example.com</a>
      </p>
    </footer>
  </body>
</html>