Markdown Horizontal Rules to HTML hr Tags

Horizontal Rules in Markdown

Horizontal rules (thematic breaks) create a visual separator between sections of content. They convert to the HTML <hr> (horizontal rule) element.

Three Syntaxes

Markdown accepts three characters for horizontal rules, each repeated three or more times on a line by itself:

---

***

___

All three produce the same HTML:

<hr>

You can also use more than three characters or include spaces between them:

- - - - -

*   *   *

_____________________

These all produce a single <hr> tag.

Spacing Requirements

A horizontal rule must be preceded and followed by a blank line to avoid being interpreted as a Setext-style heading underline. Without a blank line above:

Some text
---

This is interpreted as a level-2 heading, not a horizontal rule. Always add blank lines:

Some text

---

More text

Semantic Meaning

The <hr> element represents a thematic break — a shift in topic or section. Screen readers announce it as a separator, so it carries semantic weight. Avoid using it purely for decoration; use CSS borders instead when you need a visual line without semantic meaning.

Styling the hr Element

The default browser rendering of <hr> is a thin horizontal line. With CSS, you can customize it extensively — changing color, thickness, width, margin, and even adding gradients or decorative styles. Since Markdown produces a plain <hr> tag, all styling is handled through your stylesheet.