In a longer article or story, there comes a point where the subject genuinely changes: a new scene begins, a blog post moves from one example to another with no natural transition. An extra blank space between two paragraphs says nothing in particular, it looks like any other bit of layout spacing.
<hr> marks that exact moment: a thematic break between two sections that still belong to the same context, not just a line dropped in to look tidy.
Definition
<hr> represents a thematic break within the same piece of content: a change of subject, scene, or angle, without needing to open a whole new section with its own heading. Browsers display it by default as a plain horizontal line, but that rendering is only a visual convention: the real meaning of the element is the break it marks, not the line itself.
Syntax
<hr> is a void element: it holds nothing, has no closing tag, and accepts only the global attributes. Older presentational attributes like size, width, or noshade have long been obsolete, an <hr>'s style is now handled entirely through CSS.
You will sometimes come across the form <hr />, with a forward slash before the closing bracket, a habit carried over from XHTML. In HTML, that slash is entirely optional: <hr> and <hr /> produce exactly the same result, the browser makes no difference between the two, and neither one needs a separate closing tag.
<p>The project started from a simple idea: a personal recipe notebook.</p>
<hr />
<p>
Three years later, that same notebook has two hundred thousand active members.
</p>Semantics and accessibility
Assistive technology exposes <hr> with the separator role, letting a screen reader announce the break instead of silently passing over it as mere visual whitespace. That announcement only makes sense when the break is real: dropped between two paragraphs that continue the same idea, <hr> only delivers misleading information, a change of subject that does not actually exist.
A use that goes beyond plain articles
The thematic break shows up most often in an article or a story, but the standard also allows <hr> as a descendant of a <select> element, to visually separate two groups of options, somewhat like the lines separating sections in an operating system's context menu.
Best practices
A single <hr> is enough to mark a break, never several in a row to create more visual space: that is CSS's job, not a repeated semantic element's. In the same way, it is best to reserve <hr> for genuine changes of subject rather than adding it systematically between every paragraph of a long page, which risks stripping it of any signal value.
<hr> purely for its visual look, with no real change of subject, misuses the element. If the need is purely decorative, a CSS border (border-top) is a better fit: it separates content visually without announcing a break that does not actually exist to assistive technology.hr have an alt attribute like images do?No, <hr> has no attribute of its own. It shows no fallback content because it holds no content at all: it is a purely structural element, limited to global attributes like id or class.
hr be used just to add a decorative line, with no real change of subject?It is not technically forbidden, but it is not its role. If the need is purely visual, a CSS border fits much better: it separates two blocks without announcing a thematic break to assistive technology that does not actually exist.
hr be added between every paragraph of an article?No, only between passages that truly deal with a different subject. Overusing it between every paragraph strips the element of any meaning and needlessly clutters the page; for a simple visual breather between two related ideas, a CSS margin is enough.