跳转至

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 属性。