HTML5 语义化标签详解

本文档整理了HTML5中常用的语义化标签，按功能分类，便于学习和参考。

📋 内容结构标签

文本内容类

标签	作用	说明	示例
blockquote	块级引用	用于标记长文本引用（跨段落的引用内容），默认有左侧缩进样式；可搭配cite属性标注引用来源	<blockquote cite="https://example.com">这是一段长文本引用内容</blockquote>
q	行内引用	标记短文本的行内引用（如一句话、短语），浏览器默认会为内容添加双引号	<p>他说：<q>坚持就是胜利</q></p>
abbr	缩略语	标记缩写/简称，鼠标悬停时显示完整含义（通过title属性）	<abbr title="超文本标记语言">HTML</abbr>
sup/sub	上标/下标	分别标记上标（如数学次方）、下标（如化学公式）文本	<p>2<sup>3</sup>=8，H<sub>2</sub>O（水）</p>
br/hr	换行/分割线	- br：空标签，插入换行符，仅用于文本行分隔 - hr：空标签，插入水平线，语义上表示内容主题转换	<p>北京市<br>朝阳区</p> <hr> <p>第二部分内容</p>
small	小字标记	语义化标记小号文本（如版权声明、法律提示、备注）	<footer><small>©2025 版权所有</small></footer>

代码与数据类

标签	作用	说明	示例
code/pre	代码展示	- pre：预格式化文本容器，保留空格、换行等空白符 - code：标记行内/块级代码片段	<pre><code>function fn() { return 1; }</code></pre>
var/kbd/samp	变量/键盘输入/程序输出	- var：数学/编程变量 - kbd：用户键盘输入 - samp：程序输出结果	<p>按下<kbd>Enter</kbd>键，输出<samp>操作成功</samp></p>
data	机器可读数据	标记人类可读文本+机器可读的数值/标识	<data value="12">中国</data>
time	时间标记	语义化标记时间/日期，通过datetime属性提供机器可读的标准格式	<time datetime="2016-01-20">2016 年 1 月 20 日</time>

🎨 多媒体与图像标签

标签	作用	说明	示例
figure/figcaption	图文组合	- figure：容器，包裹图像、图表、代码片段等独立内容块 - figcaption：为figure内容添加标题/说明	<figure><img src="img.jpg"><figcaption>这是一张示例图片</figcaption></figure>
map/area	图像映射	为图片定义可点击的区域链接	<img src="map.jpg" usemap="#mymap"><map name="mymap"><area shape="rect" coords="0,0,100,100" href="xxx.html"></map>
track	媒体字幕	为video/audio标签添加字幕/字幕轨道	<video src="video.mp4"><track src="sub.vtt" kind="subtitles" label="中文字幕"></video>

📊 表格与表单标签

表格相关

标签	作用	说明	示例
col/colgroup	表格列控制	配合table使用，批量设置表格列的样式/属性	<table><colgroup><col span="2" style="background:#eee"></colgroup><tr><td>1</td><td>2</td></tr></table>

表单相关

标签	作用	说明	示例
datalist	输入选项列表	为input标签提供预设下拉选项	<input list="city"><datalist id="city"><option value="北京"><option value="上海"></datalist>
fieldset/legend	表单分组	结构化表单内容，提升可读性和可访问性	<fieldset><legend>用户信息</legend><input type="text" placeholder="姓名"></fieldset>
optgroup	下拉选项分组	为select标签的option分组，提升下拉列表可读性	<select><optgroup label="一线城市"><option>北京</option><option>上海</option></optgroup></select>
output	计算结果输出	展示JS计算/表单交互的结果	<input id="num1" type="number">+<input id="num2" type="number">=<output for="num1 num2"></output>
meter	进度/比例展示	标记已知范围的标量值（如使用率、评分）	<meter min="0" max="100" value="50">50%</meter>
progress	进度条	标记任务的完成进度（如文件上传、加载）	<progress min="0" max="100" value="70">70%</progress>

🔧 交互与布局标签

标签	作用	说明	示例
details/summary	折叠面板	交互式可展开/折叠容器	<details><summary>点击查看详情</summary>展开后的内容</details>
menu	语义化菜单	标记导航/操作菜单，语义上强于ul	<menu><li><a href="/home">首页</a></li><li><a href="/about">关于</a></li></menu>
search	搜索容器	语义化标记搜索区域	<search><input type="text" placeholder="搜索"><button>提交</button></search>
hgroup	标题组合	语义化组合主副标题	<hgroup><h1>HTML教程</h1><h2>语义化标签篇</h2></hgroup>
address	联系方式	语义化标记联系信息	<address>联系我们：<a href="mailto:xxx@example.com">xxx@example.com</a></address>

💻 Web组件相关标签

标签	作用	说明	示例
slot	Web组件插槽	用于Web Component开发，定义组件的可替换内容插槽	<template id="myComp"><slot name="title">默认标题</slot><slot>默认内容</slot></template>
template	内容模板	存储供JS动态渲染的HTML模板，默认隐藏	<template id="tpl"><div class="item">模板内容</div></template>

📌 重要说明

语义化原则

• 语义优先：以上标签均为HTML5语义化标签，核心价值是「赋予内容明确的语义」，而非仅依赖样式
• SEO优化：语义化标签利于搜索引擎理解和索引内容
• 无障碍访问：提升网站对辅助技术的友好度

配套使用规则

• col 必须嵌套在 colgroup 内
• area 必须嵌套在 map 内
• optgroup 必须嵌套在 select 内
• figcaption 必须嵌套在 figure 内

易混淆标签对比

对比项	标签A	标签B	区别说明
比例展示	meter	progress	meter用于静态比例（如使用率），progress用于动态进度（如上传进度）
代码展示	pre	code	pre是容器（保留空白），code是内容（标记代码）
分隔符	br	hr	br用于文本换行，hr用于内容主题分隔

使用建议

1. 按功能选择：根据内容语义选择合适的标签
2. 保持简洁：避免过度嵌套，保持代码可读性
3. 渐进增强：在不支持新标签的浏览器中确保内容可访问
4. 样式分离：语义化标签主要负责结构，样式通过CSS控制

---

最后更新：2025年
本文档将持续更新，欢迎补充和指正