hr标签用于表示内容主题转换而非视觉分隔，如场景切换或观点更替，应语义化使用以提升可访问性，纯装饰性线条需用CSS实现。

在HTML中，hr 标签用于表示段落级内容之间的主题分隔，而不是单纯为了视觉上的线条效果。正确语义化使用 hr 能提升页面的可访问性与结构清晰度。

hr标签的语义本质

hr 并不是“画一条线”的工具，而是代表内容主题的切换。根据HTML规范，它表示段落之间的一个主题转换，比如故事场景的转变、话题的更替或文章结构的分界。

• 适用于小说章节间的场景转换
• 可用于博客文章中不同观点段落之间
• 适合长文中的结构分隔，如引言与正文之间

何时使用hr而不是CSS边框

如果两个内容块属于不同的主题，但又不需要新的标题，这时应使用 hr。若只是视觉样式需求（如卡片间隔线），则应使用CSS实现。

• 语义分隔 → 使用 hr
• 纯装饰线条 → 使用CSS border 或伪元素

实际使用示例

以下是一个语义正确的 hr 使用场景：

那天雨下得很大，他站在车站等了很久。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

---

与此同时，她正收拾行李，准备离开这座城市。

这里 hr 表示视角或场景的切换，具有明确的语义作用。

辅助技术的支持

屏幕阅读器会将 hr 识别为“分隔线”并提示用户内容结构变化。滥用会导致阅读体验割裂，因此只在真正需要表达主题转换时才使用。

基本上就这些。合理使用 hr 能让HTML更有意义，不只是看起来像分隔，而是真正表达内容逻辑的断裂与过渡。

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