HTML格式化标签本质是语义声明而非样式工具：表内容重要性，表媒体与说明的语义单元，必须配；需绑定使用；误用替代语义标签会破坏SEO与可访问性；语义标签嵌套须符合上下文层级，且属性（如alt、datetime）不可缺失。

HTML格式化标签和语义化结构不是两套东西，而是同一层意图的两种表达

很多人把 <strong></strong>、<em></em>、<figure></figure> 这类标签当成“格式化工具”，其实它们首先是语义声明。比如 <strong></strong> 不是“加粗字体”，而是“这段内容对理解上下文至关重要”；<figure></figure> 不是“让图片居中”，而是“这个媒体元素和其说明构成一个独立语义单元”。

所以别问“怎么配合”，而要问：“这块内容想表达什么？”——答案直接决定该用哪个标签。

• <strong></strong> 和 <em></em> 必须用于强调语义，不是视觉样式替代品；用 <b></b> 或 <i></i> 只在纯样式需求时（如品牌名中的斜体、技术术语缩写）
• <figure></figure> 必须配 <figcaption></figcaption>，否则语义断裂；单独 <img> 没有上下文，搜索引擎和读屏器都当它不存在
• <pre class="brush:php;toolbar:false;"></pre> 和 <code> 是绑定使用的：前者保留换行与空格，后者声明内容为计算机代码；只用 <pre class="brush:php;toolbar:false;"></pre> 包一段文字，等于放弃语法识别能力

常见格式化标签误用场景及修复方式

错误不是出在“不会写”，而是“写了但破坏了语义链”。比如编辑器导出的 HTML 经常出现 <div class="paragraph"> 套 <code><span style="font-weight: bold"></span>，这等于主动屏蔽 SEO 和可访问性。

• 把“加粗标题”写成 <div><span style="font-weight:bold">标题</span></div> → 应该是 <h2>标题</h2>，标题层级比加粗更重要
• 用 <br> 模拟段落间距 → 该用 <p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html" class="overflowclass">Wechat Article Html</a> <p class="overflowclass">将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p> </div> <a rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>；<br> 只适用于地址、诗行等需要保留换行但不构成新段落的场景
• 图注写成 <p class="caption">这是图注</p> → 必须进 <figure></figure>，否则无法被识别为该图专属说明
• <hr> 放在两个 <section></section> 之间 → 它本身无语义，只是视觉分隔；若想表达“主题切换”，应靠 <section></section> 自身的语义+标题，而非靠线

格式化标签嵌套必须服从语义层级

语义不是扁平的，它有主次和归属。比如 <blockquote></blockquote> 表示引用他人内容，那它内部的 <footer></footer> 就只能是“引文出处”，不能是页面页脚；<article></article> 里的 <header></header> 是文章头，不是网站头。

• <blockquote></blockquote> 内可以有 <footer></footer>，但不能有 <nav></nav> 或 <main></main>
• <figure></figure> 可以包含 <img>、<video></video>、<table>，但不能塞 <code><aside></aside> 或 <section></section>
• <time></time> 必须出现在能表达时间语义的上下文中：比如 <article></article> 的 <header></header> 里，或 <footer></footer> 中；单独扔个 <time datetime="2026-10-01">今天</time> 没意义

团队落地时最容易被忽略的细节

格式化标签的语义效力，高度依赖上下文完整性和机器可解析性。很多项目写了 <figure></figure> 却没填 alt，或写了 <time></time> 却漏掉 datetime 属性，结果等于白写。

• <img> 在 <figure></figure> 里也必须带 alt；figcaption 是补充，不是替代
• <time></time> 的 datetime 值必须是机器可读格式（如 2026-10-01），不能是“昨天”“上周”
• <code> 标签内不要手动转义 HTML 字符（如把 写成 <code>）；应该用 <code><pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 组合，并确保原始字符未被二次编码</pre>
• CI 流程里加 htmlhint 规则：attr-req-alt、fig-req-figcaption、time-req-datetime —— 这些不是锦上添花，是防止语义失效的底线