HTML 标签:功能排序
本页按任务整理常用现代元素,适合在不知道标签名时检索。
清单强调常见工程用法,不声称覆盖 HTML Living Standard 的全部元素。
文档骨架与元数据
| 元素 |
作用 |
关键注意 |
html |
文档根元素 |
设置准确 lang |
head |
元数据容器 |
不放页面主要可见内容 |
title |
文档标题 |
唯一、简洁并能区分页面 |
base |
相对 URL 基准 |
会影响全页链接,谨慎使用 |
link |
样式表、图标和资源关系 |
校验 rel、href 与跨源设置 |
meta |
字符集、视口和其他元数据 |
UTF-8 声明尽早出现 |
style |
内嵌 CSS |
受内容安全策略限制 |
body |
文档主体 |
每个文档一个 |
页面与章节结构
| 元素 |
作用 |
关键注意 |
header |
页面或章节引导内容 |
可在不同章节重复出现 |
nav |
主要导航链接组 |
不必包围所有链接 |
main |
页面独有的主要内容 |
通常只有一个可见主地标 |
article |
可独立分发的完整内容 |
可嵌套评论、帖子等独立单元 |
section |
有主题的章节 |
通常应有标题 |
aside |
间接相关的补充内容 |
不等于所有侧栏布局 |
footer |
页面或章节收尾信息 |
可属于页面或最近章节 |
search |
搜索或筛选功能区域 |
较新元素,检查目标支持 |
h1-h6 |
章节标题 |
按结构层级而非字号选择 |
address |
页面或文章联系信息 |
不作为任意地址容器 |
div |
通用块容器 |
无合适语义元素时使用 |
文本语义
| 元素 |
作用 |
关键注意 |
p |
段落 |
不用于纯布局间距 |
em |
语气强调 |
嵌套可增强强调程度 |
strong |
重要、严重或紧急 |
不只是视觉加粗 |
b / i |
引起注意或不同语态 |
仅在对应语义成立时使用 |
small |
附注、版权或免责声明 |
不只是缩小字号 |
s / del / ins |
失效、删除、插入内容 |
文档修订优先 del、ins |
mark |
与当前上下文相关的高亮 |
颜色对比度必须充足 |
abbr / dfn |
缩写与术语定义 |
首次出现宜给出完整解释 |
time / data |
机器可读值 |
使用规范格式的属性值 |
sub / sup |
上下标 |
不用于单纯改变基线样式 |
span |
通用行内容器 |
无合适文本语义时使用 |
br / wbr |
强制换行或换行机会 |
不用连续 br 制造间距 |
引用、代码与注音
| 元素 |
作用 |
关键注意 |
blockquote / q |
块级或行内引用 |
可在附近显示可访问的来源链接 |
cite |
作品标题 |
不用作普通人名容器 |
code / pre |
代码和预格式文本 |
HTML 示例需转义特殊字符 |
kbd / samp / var |
输入、输出和变量 |
可组合表达命令交互 |
ruby / rt / rp |
东亚文字注音 |
rp 提供旧环境括号回退 |
bdi / bdo |
双向文本隔离或覆盖 |
用户名等未知方向文本优先 bdi |
列表与披露内容
| 元素 |
作用 |
关键注意 |
ul / ol / li |
无序、有序列表和列表项 |
顺序有意义时使用 ol |
dl / dt / dd |
名称和值的描述列表 |
可表达术语、元数据或问答 |
menu |
命令或项目列表 |
浏览器表现通常接近 ul |
details / summary |
原生展开与折叠 |
summary 应清楚描述内容 |
dialog |
对话框 |
模态行为使用 showModal() |
链接、嵌入与脚本
| 元素 |
作用 |
关键注意 |
a |
导航到 URL 或片段 |
链接文字说明目标,限制危险协议 |
iframe |
嵌入其他页面 |
设置 title、sandbox 和最小 allow |
embed / object |
嵌入外部资源 |
兼容和安全边界复杂,优先专用元素 |
script |
加载脚本或数据块 |
避免内联不可信数据,使用 CSP |
noscript |
脚本不可用时的替代 |
不应成为关键功能唯一实现 |
template / slot |
模板与 Shadow DOM 分发 |
克隆内容仍需按上下文安全处理 |
图片、图形与媒体
| 元素 |
作用 |
关键注意 |
img |
图片 |
信息图需准确 alt,装饰图用空 alt |
picture / source |
响应式图片候选 |
最终保留带 alt 的 img |
figure / figcaption |
独立内容及说明 |
说明可在 figure 首部或尾部 |
map / area |
图像映射 |
热区需要可访问名称和键盘路径 |
audio / video |
音视频播放器 |
提供控件、字幕、文字稿等替代 |
track |
字幕、描述或章节轨道 |
常用 WebVTT,发布前校对 |
canvas |
位图画布 |
画面不自动成为可访问语义 |
表格数据
| 元素 |
作用 |
关键注意 |
table / caption |
数据表格及标题 |
不用于页面布局 |
thead / tbody / tfoot |
表格行分组 |
改善结构和样式定位 |
tr / th / td |
行、表头和数据单元格 |
简单表格用 scope 关联表头 |
colgroup / col |
列分组和列属性 |
不替代表头语义 |
表单与状态
| 元素 |
作用 |
关键注意 |
form |
提交控件集合 |
服务端重新验证和授权 |
label |
控件标签 |
显式 for 指向唯一 id |
input / textarea |
单行、多行输入 |
设置用途匹配的 type 和 name |
button |
按钮 |
表单内明确 type="button" 或 submit |
select / option / optgroup |
选项选择 |
分组有标签,控件有可见名称 |
datalist |
输入建议 |
不能当作强制值白名单 |
fieldset / legend |
相关控件分组及标题 |
单选组和复选组尤其适用 |
output |
计算结果 |
动态更新时考虑状态播报 |
progress |
任务进度 |
与已知范围测量 meter 区分 |
meter |
已知范围中的标量 |
提供文字含义,不只显示颜色 |
废弃元素
新代码不要使用 acronym、applet、basefont、big、center、dir、font、
frame、frameset、marquee、menuitem、noframes、param、plaintext、
strike、tt 或 xmp。浏览器容错不代表元素仍符合标准。
迁移时优先恢复内容语义,再用 CSS 处理表现;不要机械地把所有旧标签替换为 div。
另见:字母排序、HTML 属性。