HTML5 引入了许多新的语义元素，使得文档的结构更加清晰，并提升了可访问性和搜索引擎优化（SEO）。这些语义元素有助于更好地描述页面内容的结构和意义。下面是这些元素的详细描述和使用示例：
1. <article>
定义页面中独立的内容区域。通常用于博客文章、新闻文章等。
示例代码：
<article>
<h1>文章标题</h1>
<p>文章内容...</p>
</article>
2. <aside>
定义页面的侧边栏内容，通常包含与主内容间接相关的信息，如小工具、广告或补充信息。
示例代码：
<aside>
<h2>侧边栏标题</h2>
<p>侧边栏内容...</p>
</aside>
3. <bdi>
允许将文本脱离其父元素的文本方向设置，这在多语言页面中尤其有用。
示例代码：
<p>这是一个 <bdi>العربية</bdi> 示例。</p>
4. <command>
定义一个命令按钮，比如单选按钮、复选框或按钮。注意这个元素在 HTML5 中并不被广泛支持，因此应谨慎使用。
示例代码：
<command type="command">命令按钮</command>
5. <details>
用于描述文档或文档某个部分的细节，通常与 <summary> 元素一起使用。
示例代码：
<details>
<summary>更多信息</summary>
<p>这里是详细信息的内容...</p>
</details>
6. <dialog>
定义对话框或模态窗口。可以用于创建弹出提示框或对话框。
示例代码：
<dialog open>
<p>这是一个对话框内容。</p>
<button onclick="this.closest('dialog').close()">关闭</button>
</dialog>
7. <summary>
定义 <details> 元素的标题。点击 <summary> 元素会展开或折叠 <details> 的内容。
示例代码：
<details>
<summary>查看更多</summary>
<p>详细内容...</p>
</details>
8. <figure>
规定独立的流内容（如图像、图表、照片、代码等），通常配合 <figcaption> 使用以提供标题。
示例代码：
<figure>
<img src="image.jpg" alt="示例图像">
<figcaption>图像说明文字</figcaption>
</figure>
9. <figcaption>
定义 <figure> 元素的标题或说明。
示例代码：
<figure>
<img src="image.jpg" alt="示例图像">
<figcaption>图像说明文字</figcaption>
</figure>
10. <footer>
定义 section 或 document 的页脚部分，通常包含版权信息、联系信息等。
示例代码：
<footer>
<p>© 2024 版权信息</p>
</footer>
11. <header>
定义文档或 section 的头部区域，通常包含标题、导航等。
示例代码：
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</header>
12. <mark>
定义带有记号的文本，通常用于突出显示关键字或重要信息。
示例代码：
<p>这个单词 <mark>重要</mark> 需要突出显示。</p>
13. <meter>
定义度量衡，用于表示已知最大值和最小值的度量值，如进度条。
示例代码：
<meter value="0.7" min="0" max="1">70%</meter>
14. <nav>
定义导航链接的部分，通常用于包含网站的主要导航菜单。
示例代码：
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
15. <progress>
定义任务的进度，适用于表示某个过程的进展状态。
示例代码：
<progress value="50" max="100">50%</progress>
16. <ruby>
定义 ruby 注释，通常用于中文注音或字符的解释。
示例代码：
<ruby>
漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp>
</ruby>
17. <rt>
定义字符（如中文注音或字符）的解释或发音。通常与 <ruby> 元素一起使用。
示例代码：
<ruby>
漢字<rt>かんじ</rt>
</ruby>
18. <rp>
在 <ruby> 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
示例代码：
<ruby>
漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp>
</ruby>
19. <section>
定义文档中的节或区段，通常用于组织文档的结构。
示例代码：
<section>
<h2>节标题</h2>
<p>节内容...</p>
</section>
20. <time>
定义日期或时间，提供机器可读的时间信息。
示例代码：
<p>发布于 <time datetime="2024-07-23">2024年7月23日</time></p>
21. <wbr>
规定在文本中的何处适合添加换行符，以优化文本的排版。
示例代码：
<p>请访问 <wbr>example<wbr>.com</p>
这些语义元素使 HTML 文档更具结构化和语义化，有助于搜索引擎优化、辅助技术的支持以及更好的文档可读性。