hr Tag in HTML


The `<hr>` tag in HTML5 is used to create a horizontal line or rule between sections of content. In this tutorial, we will discuss the `<hr>` tag in HTML5, its uses, and best practices for using it effectively.


The syntax for the `<hr>` tag in HTML5 is as follows:


The `<hr>` tag is a self-closing tag, which means it does not require a closing tag.


There are several attributes that can be used with the `<hr>` tag to customize its appearance:


The `size` attribute is used to set the height of the `<hr>` tag in pixels. For example, `<hr size=”5″>` creates a horizontal line that is 5 pixels tall.


The `width` attribute is used to set the width of the `<hr>` tag in pixels or as a percentage of the available width. For example, `<hr width=”50%”>` creates a horizontal line that is 50% of the available width.


The `color` attribute is used to set the color of the `<hr>` tag. It can be set to a color name, RGB value, or hexadecimal value. For example, `<hr color=”red”>` creates a red horizontal line.


The `align` attribute is used to align the `<hr>` tag horizontally. It can be set to `left`, `center`, or `right`. For example, `<hr align=”center”>` creates a horizontal line that is centered within its container.

Best Practices

Here are some best practices for using the `<hr>` tag effectively:

1. Use `<hr>` sparingly: Horizontal lines should be used sparingly to avoid cluttering the page and distracting from the main content.

2. Use CSS to style the `<hr>` tag: Use Cascading Style Sheets (CSS) to style the `<hr>` tag, including its height, width, color, and alignment. This separates the presentation of the page from its content, making it easier to maintain and update.

Also Read:  del Tag in HTML

3. Use the `role` attribute for accessibility: The `role` attribute can be used to indicate the purpose of the `<hr>` tag for screen readers and other assistive technologies. For example, `<hr role=”separator”>` indicates that the `<hr>` tag is used to separate content.


Here is an example of how to use the `<hr>` tag in HTML5:

<!DOCTYPE html>
<title>My Web Page</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”style.css”>
<h1>My Website</h1>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
<p>Welcome to my website. This is the main content of the page.</p>
<p>This is some additional content.</p>

In this example, we have a simple web page that includes a header section with a main heading and navigation links, and a main content section with some additional text. The `<hr>` tag is used to create a horizontal line between the two sections.


The `<hr>` tag in HTML5 is a simple but useful tool for creating horizontal lines between sections of content on a web page. By using the various attributes available, such as `size`, `width`, `color`, and `align`, you can customize the appearance of the `<hr>` tag to fit the design of your page. Remember to use the `<hr>` tag sparingly and to use CSS to style it effectively. This will ensure that your horizontal lines are clear, concise, and enhance the readability of your content.

Leave a Reply