HTML5 引入了许多新的语义元素，这些元素有助于改善网页的结构，使得页面的内容更加清晰易懂，便于开发者、浏览器、搜索引擎及屏幕阅读器等理解页面结构。语义化标签能够提高代码的可维护性，增加可访问性，且有助于搜索引擎优化（SEO）。

以下是 HTML5 的一些常见语义元素：

1. <header>

• 用于表示文档的页头部分，通常包含导航、logo、标题等信息。
• 可以用于整个页面、单个部分或者文章的头部。

示例：

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

2. <footer>

• 用于表示文档或部分内容的页脚，通常包含版权信息、联系方式、社交媒体链接等。
• 可以用于整个页面或单个部分的底部。

示例：

<footer>
  <p>&copy; 2025 My Website. All rights reserved.</p>
  <ul>
    <li><a href="#privacy">Privacy Policy</a></li>
    <li><a href="#terms">Terms of Service</a></li>
  </ul>
</footer>

3. <article>

• 用于表示文档中的独立内容单元，通常是一个完整的故事、文章、评论、博客帖子等。
• 适用于内容可以独立分发或共享的部分。

示例：

<article>
  <h2>My First Blog Post</h2>
  <p>This is the content of the blog post...</p>
</article>

4. <section>

• 用于表示文档中的一个部分或章节，可以包含标题、段落、图像等内容。
• 用于将页面内容分组，可以帮助组织内容。

示例：

<section>
  <h2>About Me</h2>
  <p>This is the section where I introduce myself...</p>
</section>

5. <nav>

• 用于表示页面中的导航链接，通常包含指向其他页面或站点内部的链接。
• 用于帮助用户在网站中快速找到其他部分。

示例：

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

6. <aside>

• 用于表示与页面主要内容相关的附加内容，通常作为侧边栏出现，包含广告、推荐内容、额外的解释等。
• 用于嵌套的内容不一定直接与主内容关联，但仍然是相关的。

示例：

<aside>
  <h3>Related Articles</h3>
  <ul>
    <li><a href="#article1">Article 1</a></li>
    <li><a href="#article2">Article 2</a></li>
  </ul>
</aside>

7. <main>

• 用于表示文档的主要内容区域，包含网页中最重要的内容。
• 一个文档中只能有一个 <main> 元素，它排除了页头、页脚、侧边栏等部分的内容。

示例：

<main>
  <h1>Welcome to My Website</h1>
  <p>This is the main content of the page.</p>
</main>

8. <figure>

• 用于表示文档中的图像、图表、插图等内容，通常与 <figcaption> 一起使用来提供图像的标题或说明。
• <figure> 标签帮助将图像与相关说明联系在一起。

示例：

<figure>
  <img src="image.jpg" alt="A beautiful landscape">
  <figcaption>Landscape of the mountains</figcaption>
</figure>

9. <figcaption>

• 用于为 <figure> 元素提供标题或描述。
• <figcaption> 只出现在 <figure> 元素内。

示例：

<figure>
  <img src="image.jpg" alt="A beautiful landscape">
  <figcaption>Landscape of the mountains</figcaption>
</figure>

10. <mark>

• 用于突出显示页面中的重要部分，通常是用户搜索结果中的匹配部分。
• 该文本会高亮显示，通常以黄色背景表示。

示例：

<p>Search results for <mark>HTML5</mark> tutorial.</p>

11. <progress>

• 用于表示任务的进度条，适合显示进度状态，如文件上传、下载等。
• 可以通过 value 和 max 属性来设置进度的当前值和最大值。

示例：

<progress value="60" max="100">60%</progress>

12. <output>

• 用于表示计算结果或表单提交的输出，通常用于显示用户输入的结果。
• <output> 标签适用于与 JavaScript 一起使用，动态展示计算结果。

示例：

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="50"> + 
  <input type="number" id="b" value="100"> =
  <output name="result" for="a b">150</output>
</form>

13. <details>

• 用于表示一个可展开和折叠的内容块，适用于实现交互式内容，例如问答或摘要。
• 用户点击 <summary> 标签来展开或折叠详细内容。

示例：

<details>
  <summary>More Information</summary>
  <p>This is the detailed content that is hidden initially.</p>
</details>

14. <summary>

• 用于为 <details> 元素提供一个可点击的标题。
• 这是用户展开详细内容时的触发按钮。

示例：

<details>
  <summary>More Information</summary>
  <p>This is the detailed content that is hidden initially.</p>
</details>

总结

HTML5 的语义元素使得网页的结构更加清晰、简洁，有助于提高网站的可访问性、可维护性和搜索引擎优化（SEO）。通过使用这些语义标签，开发者能够更好地组织内容，使其更易于理解和使用。