HTML5 新增的语义化标签有哪些？

HTML5 引入了多个语义化标签，包括 header、nav、footer 等，这些标签有助于提升网页结构和可访问性。

HTML 中等 语义化标签 HTML5 语义化

HTML 5 新增了多个语义化标签以更好地描述网页内容结构和意义，有助于提升文档的可访问性、SEO 和可维护性。这些标签主要分为几类：

  1. 布局结构标签：
    • <header>： 用于定义页面的页眉或区域头部，可包含页面标题或导航。
    • <nav>： 定义导航区域，通常是网站主要导航菜单。
    • <footer>： 代表底部信息，常用于放置版权、联系方式等。
    • <section>： 划分内容章节，适用于主题内容区块。
    • <article>： 标记独立完整的相关内容，如一篇博文。
    • <aside>： 定义侧边栏内容，常作为页面附属信息。
    • <main>： 代表页面主内容区域。
  2. 文本与媒体标签：
    • <figure>： 表示组合型媒体元素如图像或视频。
    • <figcaption>： 配合 <figure>，定义其标题。
    • <time>： 标记时间或日期。 
      <time datetime="2025-07-06">July 6, 2025</time>
    • <mark>： 代表高亮或重要文本，默认带有黄色背景。
  3. 交互性标签：
    • <details>： 创建可展开/折叠的内容区。
    • <summary>： 与 <details> 结合使用，定义标题。 
      <details>
  <summary>View More</summary>
  <p>额外的详情内容。</p>
</details>
    • <datalist>： 用于 <input> 的预选选项列表，提升用户体验。

这些标签让浏览器和辅助技术更能理解内容。例如，基本布局示例：

<!DOCTYPE html>
<html>
<body>
  <header>页头</header>
  <nav>导航栏</nav>
  <main>
    <section><article>文章正文</article></section>
    <aside>侧边栏目</aside>
  </main>
  <footer>页脚信息</footer>
</body>
</html>