必须掌握的5个语义化文本标签是：①段落容器；②和强调重要性与语气；③用于次要文字；④高亮重点；⑤与记录内容变更，均不可用css替代语义功能。

哪些文本标签必须会写，且不能只靠CSS替代

语义化不是可选项，而是浏览器和辅助工具识别内容的基础。比如 <strong></strong> 和 <em></em> 不只是“加粗”“斜体”，它们传递的是「重要性」和「语气强调」；搜索引擎、读屏软件会据此调整权重或朗读方式。用 <b></b> 或 <i></i> 替代，等于主动放弃语义。

以下 5 个是日常开发中无法绕开的必学标签：

• <p></p>：段落容器，自带上下 margin，别用多个 <br> 模拟段落
• <strong></strong> 和 <em></em>：强调层级不同，<strong></strong> 嵌套 <em></em> 是合法且有意义的
• <small></small>：专用于免责声明、版权信息等次要文字，不是“调小字号”的万能工具
• <mark></mark>：高亮搜索关键词或重点句，有默认黄色背景，语义明确

<br> 和 <p></p> 混用时最常踩的坑

错误写法：<p>第一行<br>第二行<br>第三行</p> —— 这其实是一个段落，三行之间只有换行，没有段落间距，语义混乱，打印或屏幕阅读时体验差。

正确思路：先判断逻辑是否独立。诗句、地址、歌词等「视觉分行但语义一体」的内容用 <br>；每段表达一个完整意思（如一段说明、一句结论）就用 <p></p>。

• 地址展示适合：<p>北京市朝阳区建国路88号<br>SOHO现代城A座12层</p>
• 产品描述应拆成两个段落：<p>本产品支持USB-C快充。</p> <p>内置双电芯，续航提升40%。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a> <p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p> </div> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
• <br> 是单标签，写成 <br> 会导致 HTML 验证失败，部分旧浏览器可能渲染异常

<hr> 的实际用途远不止“画条线”

<hr> 在 HTML5 中语义已更新为「主题结束」，不是装饰性分割线。它的作用是标记前后内容属于不同主题或章节，比纯 CSS 的 border-bottom 更准确。

常见误用：在导航栏下方、卡片底部加 <hr> 做视觉分隔 —— 这里没有主题切换，应该用 CSS 边框或 margin。

• 适合场景：<p>上半部分讲安装步骤</p> <hr> <p>下半部分讲故障排查</p>
• 不推荐：<header>...</header><hr> <main>...</main> —— 用 <section></section> 或 CSS 更合理
• 它没有属性可设宽度/颜色，样式必须走 CSS：hr { border: none; height: 1px; background: #eee; }

<del></del> 和 <ins></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></s> 替代 <del></del>：前者仅表示“不再准确”，无删除动作含义；后者明确表示“已被移除”
• 辅助技术（如读屏器）会读出“已删除”“已插入”，这对视障用户理解版本变化很重要

真正容易被忽略的点在于：这些标签一旦写进 DOM，就参与了语义流和可访问性树。写错一个 <strong></strong> 可能影响 SEO 权重，多套一层 <p></p> 可能让屏幕阅读器多读一次“段落”，而少用一个 <hr> 可能让内容结构在无样式环境下彻底不可分辨。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！