Horizontal Rule or Horizontal Break
Horizontal Rule in HTML Programming is used for creating a Horizontal Line or we can say clear separation between two section, Lines, Paragraph or even Diversion Section.
Horizontal Rule also called Horizontal Break is basically used where separation is needed between two topics in a Web Page.
In HTML Programming we use the <hr> tag for Horizontal Rule or Horizontal Break. <hr> tag is also an Open tag means it does not have ending tag like other tags.
Let us take an Example of <hr> tag-
<HTML
<HEAD>
<TITLE> Use of Horizontal Rule Tag </TITLE>
</HEAD>
<BODY>
<p>
Hello all this is an Example of Horizontal Rule tag where we are understanding about the
basic meaning or Horizontal Rule tag practically.
</p>
<hr>
<p>
Hello Learner we must try to learn web design course because this skill is required now a
days.
</p>
</BODY>
</HTML>
Output-
 |
| Horizontal Rule Output |
Default Style of <hr> Tag given below-
<style>
hr
{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0.5em;
margin-bottom: 0.5em;
border-style: inset;
border-width: 1px;
}
</style>
Let us check output of same above code with this style-
<HTML
<HEAD>
<TITLE> Use of Horizontal Rule Tag </TITLE>
<STYLE>
hr
{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0.5em;
margin-bottom: 0.5em;
border-style: inset;
border-width: 1px;
}
</STYLE>
</HEAD>
<BODY>
<p>
Hello all this is an Example of Horizontal Rule tag where we are understanding about the
basic meaning or Horizontal Rule tag practically.
</p>
<hr>
<p>
Hello Learner we must try to learn web design course because this skill is required now a
days.
</p>
</BODY>
</HTML>
Output-
 |
| Horizontal Rule Output with Default Style |
We can use different CSS styles on Horizontal Rule given below-
1. width - this will set the width of line created by <hr> tag.
2. Height - This ill set the Height of line created by <hr> tag.
3. Border-width - This will set the Border width of line created by <hr> tag.
4. Border-color - This ill set the Border Color of Line created by <hr> tag.
5. Background-color - This ill set the Background color of line created by <hr> tag.
6. Text-align- This will align the line created by <hr> tag if you set width less than 100%.
7. Margin-left - This ill set the margin or shift the line towards right side from left side created by <hr>
tag.
Let us take another example to apply these styles on <hr> tag-
<HTML
<HEAD>
<TITLE> Use of Horizontal Rule Tag with different styles </TITLE>
</HEAD>
<BODY>
<p>
Hello all this is an Example of Horizontal Rule tag where we are understanding about the
basic meaning or Horizontal Rule tag practically.
</p>
<hr style="width:75%; height:50px; margin-left:0px; text-align:left; border-width:10px; border-color: green; background-color:
blue;">
<p>
Hello Learner we must try to learn web design course because this skill is required now a
days.
</p>
</BODY>
</HTML>
Output-
 |
| Horizontal Rule Output with different style |
No comments:
Post a Comment