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
What is horizontal rule in HTML Page?
The <hr> tag in HTML creates a horizontal rule that serves as a visual separator between content sections on a web page. It displays as a horizontal line and is most commonly used to divide content thematically, making the page structure clearer and more readable.
The <hr> tag is a self-closing element in HTML, meaning it doesn't require a closing tag. It creates a thematic break in the content flow and is rendered as a horizontal line by default.
Syntax
Following is the syntax for the <hr> tag −
<hr>
The <hr> tag can also include optional attributes for styling −
<hr style="height: 5px; background-color: blue;">
Basic Usage Example
Following example demonstrates how to use the <hr> tag to separate content sections −
<!DOCTYPE html> <html> <head> <title>Horizontal Rule Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h3>LOK SABHA</h3> <p>Lok Sabha is composed of representatives of the people chosen by direct election. The maximum strength of the House of the Constitution is 552, which is made up by election of upto 530 members to represent the States, upto 20 members to represent the Union Territories and not more than two members of the Anglo-Indian Community to be nominated by the Hon'ble President.</p> <hr> <p>After coming into effect of The Constitution Act, 2019, the provision of special representation of the Anglo-Indian community in the House of the People by nomination has not been extended further.</p> <hr> <p>The total elective membership is distributed among the States in such a way that the ratio between the number of seats allotted to each State and the population of the State is, so far as practicable, the same for all States.</p> </body> </html>
The output shows three text sections separated by horizontal lines −
LOK SABHA Lok Sabha is composed of representatives of the people chosen by direct election. The maximum strength of the House of the Constitution is 552, which is made up by election of upto 530 members to represent the States, upto 20 members to represent the Union Territories and not more than two members of the Anglo-Indian Community to be nominated by the Hon'ble President. _________________________________________________________________ After coming into effect of The Constitution Act, 2019, the provision of special representation of the Anglo-Indian community in the House of the People by nomination has not been extended further. _________________________________________________________________ The total elective membership is distributed among the States in such a way that the ratio between the number of seats allotted to each State and the population of the State is, so far as practicable, the same for all States.
Styling the Horizontal Rule
The <hr> tag can be customized using CSS to change its appearance, including height, color, width, and border properties.
Example − Custom Height and Color
Following example shows how to style the <hr> tag with custom height and background color −
<!DOCTYPE html> <html> <head> <title>Styled Horizontal Rule</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h3>Section One</h3> <p>This is the first section of content. Here we demonstrate how horizontal rules can visually separate different sections.</p> <hr style="height: 8px; background-color: gray; border: none;"> <h3>Section Two</h3> <p>This is the second section, separated by a thick gray horizontal rule.</p> </body> </html>
The output displays a thicker, gray horizontal rule between the sections −
Section One This is the first section of content. Here we demonstrate how horizontal rules can visually separate different sections. ???????????????????????????????????????????????? (thick gray bar) Section Two This is the second section, separated by a thick gray horizontal rule.
Example − Multiple Styling Options
Following example demonstrates various styling techniques for horizontal rules −
<!DOCTYPE html> <html> <head> <title>Various HR Styles</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h3>Default Horizontal Rule</h3> <p>This uses the default browser styling.</p> <hr> <h3>Colored Horizontal Rule</h3> <p>This uses a blue background with custom height.</p> <hr style="height: 4px; background-color: blue; border: none;"> <h3>Dashed Horizontal Rule</h3> <p>This creates a dashed line effect.</p> <hr style="border: none; border-top: 3px dashed red; height: 0;"> <h3>Dotted Horizontal Rule</h3> <p>This creates a dotted line effect.</p> <hr style="border: none; border-top: 2px dotted green; height: 0;"> </body> </html>
This example shows multiple horizontal rule styles including default, colored, dashed, and dotted variations.
Common Use Cases
The <hr> tag is commonly used in the following scenarios −
Section separation − Dividing content into logical sections within articles or blog posts.
Thematic breaks − Indicating a change in topic or context within the same document.
Visual organization − Creating clear visual breaks in forms, lists, or navigation menus.
Content grouping − Separating different types of information like testimonials, features, or FAQ items.
CSS Styling Properties
The horizontal rule can be customized using various CSS properties −
| Property | Description | Example Value |
|---|---|---|
height |
Sets the thickness of the horizontal rule | 5px |
background-color |
Changes the color of the rule |
blue, #ff0000
|
border |
Removes default border or adds custom border |
none, 2px solid red
|
width |
Controls the width of the rule |
50%, 300px
|
margin |
Sets spacing around the horizontal rule | 20px 0 |
Conclusion
The <hr> tag is a simple yet effective HTML element for creating visual separation between content sections. While it renders as a basic horizontal line by default, it can be extensively customized with CSS to match your design requirements and improve document structure and readability.
2K+ Views
