常见的 HTML5 语义化标签
<header>：定义文档或节的头部区域，通常包含标题、logo、导航链接等。<nav>：表示导航链接的部分，适合用来包裹主要的导航菜单。<main>：标识文档的主要内容，每个页面应该只有一个<main>元素，且不应包含在其他元素（如<article>,<aside>,<footer>,<header>, 或<nav>）内。<article>：代表一个独立的内容块，比如博客文章、新闻故事或用户评论。<section>：定义文档中的一个部分或章节，通常会有一个标题。它用于组织内容，但不应该用作样式钩子或布局工具。<aside>：包含与页面内容相关但不是主要内容的信息，例如侧边栏或注释。<footer>：定义文档或节的尾部区域，通常放置版权信息、联系方式等。<figure>和<figcaption>：<figure>用于包裹图像、图表、代码片段等内容，而<figcaption>则用于为<figure>提供标题或说明文字。<time>：表示日期或时间，可以使用datetime属性来指定机器可读的格式。<mark>：高亮显示文本，常用于标记文档中需要引起注意的部分。<details>和<summary>：<details>定义用户可以查看或隐藏的额外细节，而<summary>定义了<details>的标题。<dialog>：表示对话框或窗口，可以通过 JavaScript 控制其显示和隐藏。<progress>和<meter>：分别用于表示进度条和度量值，适用于展示任务完成情况或数值范围。
语义化示例
以下是一个简单的 HTML5 页面结构，展示了如何使用语义化标签：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>我的博客</title>
</head>
<body><header><h1>我的个人博客</h1><nav><ul><li><a href="#home">首页</a></li><li><a href="#about">关于我</a></li><li><a href="#contact">联系我</a></li></ul></nav></header><main><article><header><h2>最新文章标题</h2><p>发布于 <time datetime="2025-01-06">2025年1月6日</time></p></header><p>这是文章的内容...</p><figure><img src="image.jpg" alt="图片描述"><figcaption>这张图是关于...</figcaption></figure></article><aside><h3>热门文章</h3><ul><li><a href="#">文章一</a></li><li><a href="#">文章二</a></li><li><a href="#">文章三</a></li></ul></aside></main><footer><p>© 2025 我的博客. 保留所有权利.</p></footer>
</body>
</html>