HTML5 常用语义化标签### HTML5 常用语义化标签 > 使网页结构更加清晰、易于理解，同时提升网页的可访问性和

HTML5 常用语义化标签

使网页结构更加清晰、易于理解，同时提升网页的可访问性和SEO

语义化标签及其应用场景：

<header> 定义页面或区域的头部信息，包括logo、站点名称、导航菜单或搜索框等。它可以出现在页面顶部，也可以作为文章或section的一部分出现。
<nav> 包裹导航链接，如主菜单、页内导航等。它帮助用户和屏幕阅读器识别出页面的主要导航区域。
<main> 表示文档或应用程序的主要内容，直接与文档主题相关，不包括导航、广告、侧边栏等辅助内容。
<article> 包含独立、完整的文章内容，如新闻文章、博客帖子、论坛帖子等。每个都应该是可以独立分发和复用的。
<section> 对页面内容进行逻辑分组，每个应有其自己的标题（如<h1>至<h6>），表示文档中的一个独立部分或章节。
<aside> 表示和主要内容相关的辅助信息，如侧边栏、注释、引用等，这些内容可以被移除而不影响主要内容的完整性。
<footer> 定义页面或区域的底部信息，常包含版权信息、联系方式、底部导航等。
<figure> & <figcaption> <figure>用于标记图像、图表、视频等流内容之外的媒体，而<figcaption>用于为<figure>提供标题或说明文字。
<details> & <summary> <details>用于创建一个可以显示或隐藏详细信息的交互式小部件，<summary>作为其摘要或标题，点击时展开或折叠详细内容。
<mark> 高亮显示文本，通常用于搜索结果中的关键词匹配。
<time> 表示日期或时间，便于机器可读，有利于搜索引擎和辅助技术理解时间信息。
<dialog> 定义一个对话框或模态窗口，用于用户交互，如确认框、提示信息等。
<figure> & <figcaption> 定义媒体内容（如图片、图表）及其说明文字，增强内容的语义性。这些标签的使用提高了网页的结构化水平，使得内容层次更加分明，不仅有利于搜索引擎更好地索引和理解网页内容，还提升了用户体验，尤其是对于依赖辅助技术的用户来说，语义化的标签能够提供更为清晰的页面结构信息。 HTML5 引入了语义化标签后，网页的结构更加清晰，便于理解，同时提高了网页的可访问性和SEO。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 设置文档字符集为UTF-8 -->
  <meta charset="UTF-8">
  <!-- 设置视口，屏幕适配 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 页面标题 -->
  <title>My Blog</title>
</head>
<body>
<!-- 页面头部 -->
<header>
  <!-- 导航栏 -->
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<!-- 页面主要内容 -->
<main>
  <!-- 内容区块 -->
  <section>
    <!-- 博客文章 -->
    <article>
      <!-- 文章标题 -->
      <header>
        <!-- 文章标题 -->
        <h1>Latest Post: "Exploring the Power of HTML5 Semantic Tags"</h1>
        <!-- 发布日期，datetime属性提供机器可读的日期时间 -->
        <time datetime="2024-05-07">May 7, 2024</time>
      </header>
      <!-- 文章段落 -->
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at suscipit nisl, id, facilisis orci.</p>
      <p><a href="#">Read More</a></p>
      <!-- 边栏内容 -->
      <aside>
        <!-- 图片容器 -->
        <figure>
          <!-- 文章配图，alt属性提供图片描述 -->
          <img src="blog-post-image.jpg" alt="Blog Post Image">
          <!-- 图片说明 -->
          <figcaption>A captivating image related to the blog post</figcaption>
        </figure>
      </aside>
    </article>
  </section>
  <!-- 侧边栏 -->
  <aside>
    <h2>Popular Posts</h2>
  </aside>
</main>

<footer>
  <!-- 版权信息 -->
  <p>&copy; 2023 My Blog. All rights reserved.</p>
  <nav>
    <a href="#">Privacy Policy</a> |
    <a href="#">Terms of Service</a>
  </nav>
</footer>
</body>
</html>