How to Add Horizontal Rule to Your Webpage
Working with Text
In this lesson, we will learn how to use the <hr> tag in HTML to add horizontal lines and enhance the layout of our website.
What is Horizontal Rule Tag in HTML
The horizontal rule tag or <hr> tag, is an HTML element used to create a horizontal line across the width of a web page. It is typically used to separate content sections, such as between two paragraphs or headings. The horizontal rule tag is a self-closing tag, which means it does not require a closing tag.
The syntax for the horizontal rule tag is straightforward. You need to use <hr> at the point where you want to insert a horizontal line on your web page.
Here's an example of how to use <hr> tag in HTML:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Horizontal Rule Tag Example</title>
</head>
<body>
<p>This is first paragraph of text.</p>
<hr>
<p>This is second paragraph of text.</p>
<hr>
<p>This is third paragraph of text.</p>
</body>
</html>Attributes of Horizontal Rule Tag
Here are the attributes we can use with the horizontal rule tag:
- id
- class
- style
- color
- size
- width
- align
id
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the horizontal rule tag and use it to apply a specific style to that particular tag.
Example
<hr id="line1">In the above example, we assign an id attribute to the hr tag with a value line-1. In CSS and JavaScript, we can use the name line-1 to access the specific hr tag whose id value is set to the name line-1.
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
class
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the horizontal rule tags and use it to apply a specific style to all the horizontal rule tags that belong to a particular class.
Example
<p>This is a first paragraph of text.</p>
<hr class="rule-1">
<p>This is second paragraph of text.</p>
<hr class="rule-1">
<p>This is third paragraph of text.</p>In the above example, both hr tags have the same class name rule-1. If any CSS style is applied to the class name rule-1, it will be applied on both hr tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
style
The style attribute can be used to apply inline css styles to the hr tag. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<hr style="background-color: red; height: 5px">The style="background-color: red; height: 5px" will change the hr tag color to red and the height to 5 pixels.
color
This color attribute can be used to set a color for the hr tag.
Example
<hr color="red">size
This size attribute can be used to increase the height of the hr tag. The value of the size attribute is defined in pixels.
Example
<hr color="red" size="8">width
This width attribute can be used to adjust the width of the hr tag. The value of the width attribute is defined in pixels.
Example
<hr color="red" size="8" width="400">align
The align attribute can be used to align an hr tag horizontally left, right or center on the webpage. The default value of align attribute for hr tag is center.
Example
<hr color="red" size="8" width="200">
<hr color="green" size="8" width="200" align="left">
<hr color="blue" size="8" width="200" align="right">