HTML Tags

HTML <hr> Tag

The <hr> tag in HTML defines a thematic break between paragraph-level elements.
It is typically displayed as a horizontal line and is used to visually separate content or sections within a page.
In HTML5, it represents a semantic break rather than just a visual divider.

Syntax

html

<hr>

Attributes

Attribute	Description
class	Assigns one or more class names for styling.
id	Assigns a unique identifier to the horizontal rule.
style	Adds inline CSS styles (e.g., color, width, height).
title	Provides additional information as a tooltip.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>HR Tag Example</title>
  <style>
    .styled-hr {
      border: 0;
      height: 4px;
      background: linear-gradient(to right, #29AB87, #2ecc71);
      border-radius: 2px;
    }
  </style>
</head>
<body>
  <h1>Horizontal Rule Example</h1>
  <p>This is the first section of text.</p>
  
  <!-- Horizontal line separating sections -->
  <hr class="styled-hr" title="Section Break">
  
  <p>This is the second section of text after the horizontal rule.</p>
</body>
</html>

Output

Browser Output

html

Use our TryIt Editor to see the output.

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Yes

The <hr> tag is rendered as a horizontal line that separates sections of content.
Its appearance can be customized using CSS for color, thickness, and style.

Notes

The <hr> tag is self-closing; it does not require an end tag.
It can be styled with CSS to match your website’s design (e.g., gradient lines, dashed styles).
In HTML5, <hr> indicates a semantic thematic break, not just a visual one.
It helps improve content readability by visually dividing topics or sections.

Conclusion

The <hr> tag adds a horizontal divider to web pages to separate content sections visually and semantically.
It’s a simple yet effective way to improve structure and readability in web design.

PreviousHTML <br> Tag NextHTML <pre> Tag