HTML <hr> Tag

The <hr> element represents a thematic break in an HTML page. It is typically used to separate content into distinct sections, signaling a change in topic or a shift in the narrative flow. Visually, browsers usually render <hr> as a horizontal line, but the exact appearance - thickness, style, or color - can vary depending on the browser’s default styling or custom CSS applied by the developer.

Semantically, <hr> is more than just a decorative line; it conveys meaning about the document’s structure. It helps users and assistive technologies, such as screen readers, understand that the content is divided into separate thematic areas. For example, in an article, <hr> might indicate a shift from the main content to a sidebar or a transition between different sections of a story.

The <hr> element is a void element, meaning it has no closing tag and cannot contain any content. Its primary purpose is structural rather than content-driven, and it is commonly used in combination with CSS to create visually distinct breaks, including solid lines, dashed lines, or even custom gradients.