HTML5 语义化标签

1. 页面骨架（结构类）

标签	语义 & 典型场景
<header>	页头、文章/区块头部（logo + 主导航）
<nav>	主要导航链接组（不是页脚那种辅助导航）
<main>	页面主体内容唯一区域（一个页面只能用一次）
<section>	主题性内容分组，通常带标题（章节、选项卡面板）
<article>	可独立分发的完整内容（帖子、商品卡片、评论）
<aside>	与主内容弱相关的侧边栏（广告、相关文章列表）
<footer>	页脚、文章/区块尾部（版权、备案号、作者信息）

2. 标题与大纲

标签	语义 & 提示
<h1>–<h6>	标题层级，一个页面最好只有一个 <h1>
<hgroup>	给同一区块的多级标题打包（<h1>+<h2> 组合）

3. 文本语义（让爬虫/读屏秒懂）

标签	语义 & 典型用法
<p>	段落
<blockquote>	引用的长段落（可嵌套 <cite> 给来源）
<q>	行内短引用，浏览器自动加引号
<cite>	作品标题（书名、电影名、歌曲名）
<time datetime="2024-08-26">	机器可读的时间
<mark>	高亮搜索关键词
<em> / <strong>	强调 / 强烈强调（读屏软件会重读）
<abbr title="World Wide Web">WWW</abbr>	缩写说明
<code> / <pre>	行内代码 / 预格式化代码块
<kbd> / <samp>	用户输入 / 程序输出示例

4. 媒体与图形

标签	语义 & 必写属性
<figure>	自包含单元（图片、图表、代码片段）
<figcaption>	为 <figure> 提供标题/说明
<picture>	响应式图像（不同尺寸/格式）
<audio controls>	音频播放器
<video controls>	视频播放器

5. 列表 & 表格

标签	语义 & 小贴士
<ol> / <ul> / <li>	有序 / 无序 / 列表项
<dl> / <dt> / <dd>	描述列表（术语 + 释义）
<table> 系	<caption> 表格标题、<thead> / <tbody> / <tfoot> 结构分明

6. 表单增强（语义+无障碍）

标签	语义 & 用法
<label for="id">	绑定控件，点击文字即可聚焦
<fieldset> / <legend>	表单分组 + 组标题
<datalist>	输入框自动补全列表
<output>	显示计算结果或脚本返回值

7. 细节补充

• <address>：作者/所有者的联系方式（非页面通用页脚）。
• <small>：附属细则（版权、免责声明），不只是“字体变小”。
• <details> / <summary>：原生折叠面板，无需 JS。