Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Add a horizontal rule in HTML
The <hr> tag in HTML creates a horizontal rule that defines a thematic break in an HTML page. It is commonly used to visually separate content sections or indicate a change in topic within a document. The <hr> tag is a self-closing element that requires no closing tag.
Syntax
Following is the basic syntax for the <hr> tag −
<hr>
In modern HTML5, the <hr> tag is styled using CSS rather than HTML attributes. However, for compatibility, some legacy attributes are still recognized −
<hr style="width: 50%; height: 3px; background-color: blue;">
Legacy Attributes
The following attributes were used in older HTML versions but are now deprecated. Use CSS styling instead −
| Attribute | Value | Description |
|---|---|---|
| align | left, center, right | Specifies the alignment of the horizontal rule (deprecated - use CSS text-align instead). |
| noshade | noshade | Removes the usual shading effect (deprecated - use CSS border and background instead). |
| size | pixels | Specifies the height of the horizontal rule (deprecated - use CSS height instead). |
| width | pixels or % | Specifies the width of the horizontal rule (deprecated - use CSS width instead). |
Basic Horizontal Rule
Example
Following example demonstrates the basic usage of the <hr> tag −
<!DOCTYPE html> <html> <head> <title>HTML hr Tag</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Section One</h2> <p>This is the first section of content.</p> <hr> <h2>Section Two</h2> <p>This is the second section, separated by a horizontal rule.</p> <hr> <h2>Section Three</h2> <p>This is the third section with another horizontal rule above.</p> </body> </html>
The output displays content sections separated by horizontal lines −
Section One This is the first section of content. _________________________ (horizontal line) Section Two This is the second section, separated by a horizontal rule. _________________________ (horizontal line) Section Three This is the third section with another horizontal rule above.
Styling with CSS Width
Example
Following example shows how to control the width of the horizontal rule using CSS −
<!DOCTYPE html> <html> <head> <title>HR Width Styling</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <p>Full-width horizontal line:</p> <hr> <p>A horizontal line with 50% width:</p> <hr style="width: 50%;"> <p>A horizontal line with 200px width:</p> <hr style="width: 200px;"> </body> </html>
The output shows horizontal rules of different widths −
Full-width horizontal line: _________________________________________ (full width) A horizontal line with 50% width: __________________ (half width, centered) A horizontal line with 200px width: ____________ (200px width, centered)
Styling with CSS Height and Color
Example
Following example demonstrates how to customize the height and color of horizontal rules −
<!DOCTYPE html> <html> <head> <title>HR Height and Color</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <p>Default horizontal line:</p> <hr> <p>Thick red horizontal line (5px height):</p> <hr style="height: 5px; background-color: red; border: none;"> <p>Blue horizontal line with custom styling:</p> <hr style="height: 3px; background-color: blue; border: none; width: 60%;"> <p>Dotted horizontal line:</p> <hr style="border: none; border-top: 3px dotted green; width: 80%;"> </body> </html>
The output displays various styled horizontal rules −
Default horizontal line: _________________________ (gray, thin) Thick red horizontal line (5px height): _________________________ (red, thick) Blue horizontal line with custom styling: __________________ (blue, medium thickness) Dotted horizontal line: . . . . . . . . . . . . . . . . . . . . (green dotted)
Advanced Styling Options
Example
Following example shows creative styling options for the <hr> element −
<!DOCTYPE html>
<html>
<head>
<title>Advanced HR Styling</title>
<style>
.gradient-hr {
height: 4px;
border: none;
background: linear-gradient(to right, red, orange, yellow, green, blue);
margin: 20px 0;
}
.shadow-hr {
height: 2px;
border: none;
background-color: #333;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
width: 70%;
margin: 20px auto;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<p>Gradient horizontal rule:</p>
<hr class="gradient-hr">
<p>Horizontal rule with shadow effect:</p>
<hr class="shadow-hr">
<p>Dashed horizontal rule:</p>
<hr style="border: none; border-top: 2px dashed #666; width: 50%;">
</body>
</html>
This produces stylized horizontal rules with gradient colors, shadows, and dashed patterns.
Semantic Usage
The <hr> element represents a thematic break between content sections. It is commonly used in the following scenarios −
Topic transitions − Separating different topics within an article
Section breaks − Dividing content into distinct sections
Visual separation − Creating clear visual boundaries between content blocks
Page layout − Organizing content structure in documents
Browser Compatibility
The <hr> element is supported by all modern browsers and has been part of HTML since the early versions. CSS styling provides consistent cross-browser appearance compared to the deprecated HTML attributes.
Conclusion
The <hr> tag creates horizontal rules to separate content sections thematically. While legacy attributes exist, modern web development uses CSS for styling horizontal rules with properties like width, height, color, and border effects. The element remains essential for document structure and visual content organization.
858 Views
