1. html
  2. /tags
  3. /hr

<hr>

Definition

The HTML <hr> element is a self-closing tag that is used to create a horizontal rule or line in a web page. The "hr" stands for "horizontal rule," and the element is used to visually separate sections or content on a page.

When used without any attributes, the <hr> element will create a single, solid line that stretches across the width of its container.

Examples

Here's an example of how the <hr> element can be used in an HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>Example Page</title>
  </head>
  <body>
    <h1>Welcome to my page</h1>
    <p>This is some introductory text.</p>
    <hr>
    <h2>Section One</h2>
    <p>This is some content in section one.</p>
    <hr size="2" color="blue">
    <h2>Section Two</h2>
    <p>This is some content in section two.</p>
    <hr width="50%">
    <h2>Section Three</h2>
    <p>This is some content in section three.</p>
  </body>
</html>

In this example, we have used the <hr> element to create horizontal lines between sections of content. The first <hr> element creates a standard solid line, while the second <hr> element has a larger size and a blue color. The third <hr> element has a width of 50%, which means it will be half as wide as its container.

Attributes

This element's attributes include the global attributes.

AttributeDescriptionDeprecated?
alignSpecifies the horizontal alignment of the line. It can be set to "left", "center", "right", or "justify"Yes
colorSpecifies the color of the line. It can be set to a color name, a hexadecimal color code, or an RGB valueYes
sizeSpecifies the height of the line in pixels. It can be set to a number between 1 and 100Yes
widthSpecifies the width of the line as a percentage of its container. It can be set to a percentage value between 1% and 100%Yes
noshadeSpecifies whether or not the line should have a shadow. If this attribute is present, the line will not have a shadowYes

Best Practices

  • Use <hr> to separate content that has a clear division or break, such as different sections of an article or different topics on a page.
  • Avoid using <hr> too frequently, as it can make the page look cluttered and difficult to read. Use it sparingly and only when necessary to separate content.
  • Always provide alternative ways of distinguishing between sections or content for users who may not be able to see the line. This can be achieved through the use of headings, spacing, or other visual cues.
  • Use CSS to style the <hr> element, rather than relying on the deprecated size, width, and color attributes.
  • When using the align attribute, be aware that it may not be supported in all browsers, and use CSS instead if possible.
  • Avoid using the noshade attribute, as it is deprecated and no longer supported in HTML5.
  • Use semantic HTML to clearly indicate the purpose of the line. For example, you could use an <hr> element with an aria-label attribute to indicate that it is a "divider" or "separator".

Accessibility Considerations

  • Provide alternative ways of distinguishing between sections or content for users who may not be able to see the line. This can be achieved through the use of headings, spacing, or other visual cues.
  • Use semantic HTML to clearly indicate the purpose of the line. For example, you could use an <hr> element with an aria-label attribute to indicate that it is a "divider" or "separator".
  • Ensure that the contrast between the line and the background color is sufficient to be visible for users with low vision.
  • Consider using a different element or approach if the use of <hr> would be confusing or unclear to users of assistive technologies. For example, you could use a heading or a list to indicate different sections of content.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes