文本类语义化标签包括–、、+、，它们精准表达文字含义、角色或用途，而非划分页面区块。
哪些标签属于文本类语义化标签
文本类语义化标签不是用来划分页面区块的，而是用来精准表达一段文字的**含义、角色或用途**。它们和 <header></header>、<main></main> 这类结构标签不在一个层级，不能互相替代，但常嵌套在其中使用。
最核心的文本类语义标签有：<h1></h1>–<h6></h6>、<p></p>、<figure></figure> + <figcaption></figcaption>、<time></time>。它们都自带明确的语义，浏览器、屏幕阅读器和搜索引擎能直接理解其作用。
<h1></h1>–<h6></h6> 的层级与误用风险
标题标签的本质是表达内容重要性与大纲层级，不是“加粗大字”。错误当成样式工具用，会破坏可访问性和 SEO。
- 一个页面应有且仅有一个
<h1></h1>，代表页面主题（如文章标题、产品主名称） - 必须按顺序嵌套：出现
<h3></h3>前，应有<h2></h2>；跳级（如<h1></h1>→<h3></h3>）会让屏幕阅读器丢失结构线索 -
<h2></h2>通常对应<section></section>或<article></article>的子标题，不是随便用来“分段”的 - 避免用
<h2></h2>包裹按钮、链接等交互元素——标题不是容器，它只描述内容
<p></p>、<figure></figure> 和 <time></time> 的典型搭配场景
这三个标签解决的是不同维度的“文本意图”问题：段落强调逻辑分隔，<figure></figure> 把图文/音视频和说明绑定为一个语义单元，<time></time> 则把人类可读时间转为机器可解析数据。
-
<p></p>必须包裹完整语义段落，不能只包半句话；连续多个<p></p>比用<br>换行更语义清晰 -
<figure></figure>内容不一定是图片——<pre class="brush:php;toolbar:false;"><code></code> 块、SVG 图表、甚至短视频都适用；配套的 <code><figcaption></figcaption></code> 应放在内部首尾任一位置，不可脱离</pre> -
<time datetime="2026-08-25">今天</time>中的datetime属性值必须是合法机器可读格式（如 ISO 8601），否则辅助技术无法提取时间信息
容易被忽略的边界情况
语义标签不是贴标签比赛，关键看是否真实反映内容关系。很多项目在线上仍混用 <div class="title"> 替代 <code><h2></h2>，或把发布时间写成纯文本而不套 <time></time> —— 这些看似省事，实则让屏幕阅读器只能读“2026年8月25日”，而无法告知用户“这是发布日期”。真正起作用的，永远是标签本身 + 正确的嵌套上下文。
