HTML5语义化标签
页面结构元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>页面标题</title>
</head>
<body>
<header> <!-- 网站头部/标题栏 -->
<nav> <!-- 主导航 -->
<ul><li><a href="/">首页</a></li></ul>
</nav>
</header>
<main> <!-- 主体唯一内容 -->
<article> <!-- 独立完整内容 -->
<header><h1>文章标题</h1></header>
<section> <!-- 主题性分组 -->
<h2>章节标题</h2>
<p>内容...</p>
</section>
<footer>
<address>作者：<a href="/about">张三</a></address>
</footer>
</article>
<aside> <!-- 侧边栏相关内容 -->
<section>相关文章</section>
</aside>
</main>
<footer> <!-- 网站页脚 -->
<small>© 2024 公司名称</small>
</footer>
</body>
</html>
语义化元素参考
| 元素 | 用途 | 说明 |
|---|---|---|
| <header> | 介绍性内容或导航辅助 | 可多次出现（页面级+文章级） |
| <nav> | 主要导航链接 | 非所有链接组；用 aria-label 区分 |
| <main> | 文档的主体内容 | 每页一个；跳转导航目标 |
| <article> | 自包含的内容片段 | 博客帖子、新闻文章、论坛帖子 |
| <section> | 文档中的主题性分组 | 应有标题；不是通用容器 |
| <aside> | 与主内容切向相关的内容 | 侧边栏、引用块、广告区域 |
| <figure>/<figcaption> | 带说明的独立图示 | 图片、代码片段、图表 |
| <time> | 机器可读的日期/时间 | 使用 datetime 属性 |
| <mark> | 高亮/相关文字 | 搜索结果高亮 |
| <details>/<summary> | 可展开的折叠组件 | 原生手风琴，无需 JS |
| <dialog> | 原生模态对话框 | 使用 showModal() 保证无障碍 |