HTML Horizontal Line (hr) Tag: A Complete Guide with Examples

Introduction to the HTML Horizontal Line (hr) Tag

In HTML, the horizontal line (hr) tag is used to create a horizontal line or divider on a web page. It is a self-closing tag, meaning it doesn’t require a closing tag. The hr tag is commonly used to visually separate sections or content within a webpage, providing a clear visual break. In this comprehensive guide, we will explore the various aspects of the hr tag and provide examples to demonstrate its usage and customization.

Basic Usage of the hr Tag

To create a basic horizontal line using the hr tag, simply insert the following code in your HTML document:

<hr>

By default, the hr tag creates a horizontal line that spans the entire width of its container. The line is usually displayed as a thin, solid line. However, the appearance of the line can be modified using CSS.

Customizing the hr Tag

Changing the Appearance of the Line

The appearance of the horizontal line created by the hr tag can be customized using CSS. Here are some common properties that can be used to modify the line:

• Color: You can change the color of the line using the color property. For example, to make the line red, you can use the following CSS:

hr {
  color: red;
}

• Thickness: The height or border-width property can be used to control the thickness of the line. For example, to make the line thicker, you can use the following CSS:

hr {
  border-width: 2px;
}

• Style: The border-style property allows you to change the style of the line. Some common styles include solid, dotted, dashed, and double. For example:

hr {
  border-style: dashed;
}

Adding Classes and IDs

You can add classes or IDs to the hr tag to apply specific styles or target it with JavaScript. This allows for greater flexibility and control over the appearance and behavior of the horizontal line. For example:

<hr class="my-line" id="section-divider">

Additional Attributes

The hr tag supports several additional attributes that can enhance its functionality and accessibility. Some of the commonly used attributes include:

• title: Specifies a tooltip that is displayed when the user hovers over the line.
• align: Specifies the alignment of the line relative to its container. Possible values include left, center, and right.

Accessibility Considerations

When using the hr tag, it’s important to consider accessibility. Ensure that the purpose of the horizontal line is clear to screen readers and other assistive technologies. You can achieve this by adding descriptive text using the aria-label attribute. For example:

<hr aria-label="Section Divider">

Examples of Using the hr Tag

Let’s explore some practical examples to illustrate the usage of the hr tag:

Basic Horizontal Line

<section>
  <h2>Section 1</h2>
  <p>Content goes here.</p>
  <hr>
</section>

Customized Horizontal Line

<section>
  <h2>Section 2</h2>
  <p>Content goes here.</p>
  <hr class="dashed-line">
</section>

Conclusion

The hr tag is a simple yet powerful element in HTML that allows you to create horizontal lines to visually separate content within a webpage. By leveraging CSS and additional attributes, you can customize the appearance and behavior of the line to suit your design needs. Remember to consider accessibility when using the hr tag and provide appropriate descriptions for screen readers. With the knowledge gained from this guide, you can confidently incorporate the hr tag into your HTML documents and create visually appealing and well-structured webpages.