In HTML, the <hr> tag is used to create a horizontal line or rule on a webpage. It's a simple yet effective way to visually separate content sections, add a decorative element, or indicate a thematic break in the document's flow. The <hr> tag is an empty element, meaning it doesn't require a closing tag. By default, the browser renders the <hr> tag as a thin, gray horizontal line that spans the width of its containing element. However, you can customize its appearance using CSS to match your website's design.
In this article, we'll talk about the attributes of the <hr> tag with examples of its usage, & discuss browser support.
Attributes
The <hr> tag supports several attributes that allow you to modify its behavior & appearance. While most of these attributes are now deprecated in HTML5 & should be styled using CSS instead, it's still useful to understand their purpose. Here are some commonly used attributes:
align (deprecated): Specifies the alignment of the horizontal line. Possible values are "left", "center", or "right". For example, <hr align="center"> would center-align the line.
size (deprecated): Sets the height of the horizontal line in pixels. For example, <hr size="5"> would create a line with a height of 5 pixels.
width (deprecated): Specifies the width of the horizontal line. It can be set in pixels or as a percentage of its containing element. For example, <hr width="50%"> would create a line that spans half the width of its container.
color (deprecated): Sets the color of the horizontal line. You can use color names, hexadecimal values, or RGB values. For example, <hr color="blue"> would create a blue line.
noshade (deprecated): When present, this attribute renders the horizontal line as a solid color without any shading effect.
While these attributes are still supported by browsers for backward compatibility, it's recommended to use CSS to style the <hr> tag for better flexibility & control over its appearance.
Examples of HTML <hr> Tag
Basic Usage
Here's a simple example that demonstrates the default behavior of the <hr> tag:
HTML
HTML
<html>
<head>
<title>Basic HR Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is the first section of my webpage.</p>
<hr>
<p>This is the second section of my webpage.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Output
In this example, the <hr> tag is used to create a horizontal line that separates the two sections of the webpage. The line appears as a thin, gray line that extends across the width of the page.
Customization
While the default appearance of the <hr> tag is suitable for most cases, you can customize its style using CSS to match your website's design. Here's an example that demonstrates how to modify the <hr> tag's appearance:
HTML
HTML
<html>
<head>
<title>Customized HR Example</title>
<style>
hr {
border: none;
height: 2px;
background-color: #FF0000;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is the first section of my webpage.</p>
<hr>
<p>This is the second section of my webpage.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Output
In this example, we use CSS to customize the <hr> tag's appearance. The CSS rules are defined within the <style> tag in the <head> section of the HTML document. Here's what each CSS property does:
border: none; removes the default border of the <hr> tag.
height: 2px; sets the height of the line to 2 pixels.
background-color: #FF0000; sets the color of the line to red using a hexadecimal value.
margin: 20px 0; adds a vertical margin of 20 pixels above & below the line.
You can adjust these CSS properties to achieve different visual effects, such as changing the color, thickness, or style of the line.
Styling with CSS
For more advanced styling, CSS is preferred over HTML attributes. It provides greater flexibility and control over the presentation of the <hr> tag. Here’s how you can style it with CSS:
</head> <body> <p>Text above the styled line.</p> <hr class="styled"> <p>Text below the styled line.</p>
</body> </html>
Output
This example uses CSS to create a 5-pixel high, dark grey horizontal line, demonstrating how CSS can enhance the <hr> tag beyond the basic HTML attributes.
Supported Browsers for the <hr> Tag
The <hr> tag is supported by all major web browsers, making it a reliable tool for developers aiming to create consistent designs across different platforms. Let’s see on which browser it works :
Google Chrome: Fully supports the <hr> tag, including all HTML attributes and extensive styling options through CSS.
Mozilla Firefox: Also provides full support for the <hr> tag, with capabilities similar to Chrome for both attributes and CSS customization.
Safari: Supports the <hr> tag without any known issues, allowing for both basic uses and advanced styling with CSS.
Microsoft Edge: Has excellent support for the <hr> tag, continuing its compatibility from its predecessor, Internet Explorer.
Opera: Like the other major browsers, Opera supports the <hr> tag fully, accommodating all standard attributes and CSS styles.
This wide-ranging support ensures that using the <hr> tag in your HTML content will consistently produce the same visual effect, regardless of the user’s browser choice. This universal compatibility is crucial for maintaining a uniform appearance and functionality across various devices and browsers.
Frequently Asked Questions
Can I use the <hr> tag for vertical lines?
No, the <hr> tag is specifically designed for horizontal rules only. For vertical lines, CSS styling on other elements like <div> is required.
Is it necessary to use CSS instead of attributes for styling the <hr> tag?
While not necessary, using CSS for styling is recommended as it offers more control & adheres to modern web standards, separating content from presentation.
Does the <hr> tag affect SEO?
The <hr> tag itself does not directly impact SEO, but it helps improve the content's structure & readability, which are important factors for SEO.
Conclusion
In this article, we have learned about the HTML <hr> tag, its attributes, customization options, and the broad browser support it enjoys. From adding a simple horizontal line to enhance the readability of your content to customizing it with CSS for a more sophisticated design, the <hr> tag remains a valuable and versatile tool in web development. Understanding its proper use and potential ensures that your web pages are not only visually appealing but also well-organized.
116+ registered 