The HTML hr tag is used to create a horizontal line that separates content in a webpage. It stands for “horizontal rule” and is a self-closing tag, meaning it doesn’t require a closing tag.
Here’s an example of how to use the hr tag in HTML:
1 2 3 | <p>This is some text.</p> <hr> <p>This is some more text.</p> |
In this example, the hr tag is used to create a horizontal line that separates the two paragraphs of text.
Several attributes can be used with the hr tag to customize its appearance and behavior.
Attributes of HTML br tag
The size attribute sets the height of the line, which is displayed as a pixel value. For example:
1 | <hr size="2"> |
This code will create a horizontal line that is two pixels tall.
The width attribute sets the width of the line, which can also be displayed as a pixel value. For example:
1 | <hr width="50%"> |
This code will create a horizontal line that is 50% of the width of its container.
The align attribute sets the alignment of the line within its container. It can be set to left, center, or right. For example:
1 | <hr align="center"> |
This code will create a horizontal line that is centered within its container.
The color attribute sets the color of the line, which can be specified as a hex value, RGB value, or color name. For example:
1 | <hr color="#ff0000"> |
This code will create a horizontal line that is red in color.
The noshade attribute removes the shading effect from the line, which is enabled by default. For example:
1 | <hr noshade> |
This code will create a horizontal line without any shading.
Styling HTML br tag
The style attribute can be used to apply inline styles to the line, such as setting the background color or adding a border. For example:
1 | <hr style="background-color: #0000ff; border: 1px solid #ff0000;"> |
This code will create a horizontal line with a blue background color and a red border that is 1 pixel wide.
Creating different styles with the style attribute
A dashed line:
1 | <hr style="border-style: dashed;"> |
A dotted line:
1 | <hr style="border-style: dotted;"> |
A double line:
1 | <hr style="border-style: double;"> |
A solid line with a specific color:
1 | <hr style="border-style: solid; border-color: red;"> |
A line with a gradient effect:
1 | <hr style="border-style: solid; border-color: red;"> |
A line with a shadow effect:
1 | <hr style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); height: 2px; border: none;"> |
A line with a textured background:
1 | <hr style="background-image: url('texture.png'); height: 2px; border: none;"> |
It’s important to note that the hr tag should only be used to separate content within a page, not as a decorative element. If you want to create a decorative line, it’s better to use CSS to create a border or a background image.
In conclusion, the hr tag in HTML is a simple and useful way to create a horizontal line that separates content within a webpage. By using the various attributes available with the hr tag, you can customize the appearance and behavior of the line to suit your needs.
Learn More