Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Add Horizontal Rule in HTML
The <hr> tag in HTML is a horizontal rule, defines a thematic break in an HTML page. It is often used to display a horizontal rule to separate the content or to change the display of content in an HTML page. It consists of only opening tag in HTML.
Syntax
The usage of <hr> tag in HTML is shown below −
<hr>???
The HTML <hr> tag supports following additional attributes −
Attribute |
Value |
Description |
|---|---|---|
align |
left center right |
Specifies the alignment of the horizontal rule. |
noshade |
Noshade |
Removes the usual shading effect that most browsers display. |
size |
pixels or % |
Specifies the height of the horizontal rule. |
width |
pixels or % |
Specifies the width of the horizontal rule. |
Example
Following example demonstrates the usage of <hr> tag in HTML −
<!DOCTYPE html> <html> <head> <title>HTML hr Tag</title> </head> <body> <p>This text will be followed by a horizontal line</p> <hr> <p>Another horizontal line</p> <hr> </body> </html>
Example
Now, let us see an example by assigning values to the attribute of the <hr> tag -
<!DOCTYPE html> <html> <head> <title>HTML hr Tag</title> </head> <body> <p>This text will be followed by a horizontal line</p> <hr style="width:30%;text-align:left;margin-left:0"> <p>Continue another sentence here....</p> </body> </html>
Example
Following is the example, of the nonshaded <hr> element of CSS -
<!DOCTYPE html> <html> <body> <p>Demonstrating noshaded horizontal line:</p> <hr> <p>Applying styling sheet</p> <hr style="height:2px;border-width:0;color:grey;background-color:red"> </body> </html>
Example
Following is the example, demonstrate the height of <hr> element using CSS −
<!DOCTYPE html> <html> <body> <p>Height of horizontal line:</p> <hr> <p>A horizontal line with a height of 50 pixels:</p> <hr style="height:50px"> </body> </html>
Example
In the following example, we are changing the width of the <hr> element using CSS properties −
<!DOCTYPE html> <html> <body> <p>Normal horizontal line:</p> <hr> <p>A horizontal line with a width of 30 %:</p> <hr style="width:30%"> </body> </html>
664 Views
