必须掌握的5个语义化文本标签是：①<p>段落容器；②<strong>和<em>强调重要性与语气；③<small>用于次要文字；④<mark>高亮重点；⑤<del>与<ins>记录内容变更，均不可用CSS替代语义功能。
哪些文本标签必须会写，且不能只靠CSS替代
语义化不是可选项，而是浏览器和辅助工具识别内容的基础。比如 <strong> 和 <em> 不只是“加粗”“斜体”，它们传递的是「重要性」和「语气强调」；搜索引擎、读屏软件会据此调整权重或朗读方式。用 <b> 或 <i> 替代，等于主动放弃语义。
以下 5 个是日常开发中无法绕开的必学标签：
-
<p>：段落容器，自带上下 margin，别用多个<br>模拟段落 -
<strong>和<em>：强调层级不同，<strong>嵌套<em>是合法且有意义的 -
<small>：专用于免责声明、版权信息等次要文字，不是“调小字号”的万能工具 -
<mark>：高亮搜索关键词或重点句，有默认黄色背景，语义明确
<br> 和 <p> 混用时最常踩的坑
错误写法：<p>第一行<br>第二行<br>第三行</p> —— 这其实是一个段落，三行之间只有换行，没有段落间距，语义混乱，打印或屏幕阅读时体验差。
正确思路：先判断逻辑是否独立。诗句、地址、歌词等「视觉分行但语义一体」的内容用 <br>；每段表达一个完整意思（如一段说明、一句结论）就用 <p>。
立即学习“前端免费学习笔记（深入）”；
- 地址展示适合：
<p>北京市朝阳区建国路88号<br>SOHO现代城A座12层</p> - 产品描述应拆成两个段落：
<p>本产品支持USB-C快充。</p><p>内置双电芯，续航提升40%。</p> -
<br>是单标签，写成<br></br>会导致 HTML 验证失败，部分旧浏览器可能渲染异常
<hr> 的实际用途远不止“画条线”
<hr> 在 HTML5 中语义已更新为「主题结束」，不是装饰性分割线。它的作用是标记前后内容属于不同主题或章节，比纯 CSS 的 border-bottom 更准确。
常见误用：在导航栏下方、卡片底部加 <hr> 做视觉分隔 —— 这里没有主题切换，应该用 CSS 边框或 margin。
- 适合场景：
<p>上半部分讲安装步骤</p><hr><p>下半部分讲故障排查</p> - 不推荐：
<header>...</header><hr><main>...</main>—— 用<section>或 CSS 更合理 - 它没有属性可设宽度/颜色，样式必须走 CSS：
hr { border: none; height: 1px; background: #eee; }
<del> 和 <ins> 在内容迭代中很实用
这两个标签不是为了做“划掉再补一句”的视觉效果，而是记录内容变更。例如文档修订、价格变动、政策更新，它们自带语义，配合 datetime 属性可追溯时间。
示例场景：电商页面显示原价与现价
<p>售价：<del datetime="2026-08-01">¥299</del> <ins datetime="2026-08-20">¥199</ins></p>
-
datetime值必须是合法 ISO 8601 格式（如2026-08-20T14:30），否则无效 - 不要用
<s>替代<del>：前者仅表示“不再准确”，无删除动作含义；后者明确表示“已被移除” - 辅助技术（如读屏器）会读出“已删除”“已插入”，这对视障用户理解版本变化很重要
真正容易被忽略的点在于：这些标签一旦写进 DOM，就参与了语义流和可访问性树。写错一个 <strong> 可能影响 SEO 权重，多套一层 <p> 可能让屏幕阅读器多读一次“段落”，而少用一个 <hr> 可能让内容结构在无样式环境下彻底不可分辨。
