Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add horizontal line in HTML?
In this article, we will show you how to add a horizontal line to your webpage using HTML. A horizontal line, also known as a horizontal rule, is a way to separate content on a webpage and can be used for visual appeal or to indicate a change in content.
There are multiple ways to add a horizontal line to your webpage in HTML, but the most common approach is by using the <hr> tag. The <hr> tag is a self-closing tag that creates a horizontal line on the webpage. This approach is simple and straightforward, and it requires minimal code. However, it does not provide much flexibility in terms of customization. The horizontal line created using the <hr> tag will have a default look and feel, and it may not blend well with the design of your webpage.
Another approach to adding a horizontal line in HTML is by using CSS. By using CSS, you can customize the appearance of the horizontal line to match the design of your webpage. You can change the color, width, height, and other properties of the horizontal line to make it fit seamlessly into your webpage.
We will be discussing both these approaches in detail in the later sections of this article with examples and code snippets.
Approaches
There are two main ways to add a horizontal line in HTML −
Using the <hr> tag
Using CSS
Approach 1: Using the <hr> tag
The first approach to adding a horizontal line in HTML is by using the <hr> tag. This approach is quick and easy to implement, making it perfect for situations where you need a simple horizontal line to separate content on your webpage. Additionally, the <hr> tag is supported by all major web browsers, so you can be sure that it will be rendered correctly on your webpage. However, the default appearance of the <hr> tag may not always match the design of your webpage.
If you need more control over the appearance of the horizontal line, you can use CSS to customize the <hr> tag or use the second approach of using CSS. With CSS you can change the color, width, height, and many more properties of the horizontal line to make it look more in sync with your webpage design.
Example
The following is an example of how to add a horizontal line using the <hr> tag −
Step 1 − Create an html file (index.html).
Step 2 − Add the <hr> tag where you want the horizontal line to appear.
<body> <h1>Welcome to Tutorials Point</h1> <hr> <p>This is some text that will appear below the horizontal line.</p> </body>
Step 3 − Save the file and view it by opening it in a web browser.
<!DOCTYPE html> <html> <body> <h1>Welcome to Tutorials Point</h1> <hr> <p>This is some text that will appear below the horizontal line.</p> </body> </html>
Approach 2: Using CSS
The second approach to adding a horizontal line in HTML is by using CSS. Using CSS to create a horizontal line allows you to have more control over the appearance of the line. You can change the color, and thickness, and even add a background color or an image to the line. Additionally, you can also use CSS animations and transitions to create interesting effects on the line.
By using CSS, you can create a line that stands out and adds a unique touch to your webpage. With CSS, you can also create multiple lines with different styles and apply them to different sections of your webpage, which can be useful for creating visual separations between different elements on your page.
Example
The following is an example of how to add a horizontal line using CSS −
Step 1 − Create an html file (index.html).
Step 2 − Add a <div> tag where you want the horizontal line to appear.
<body> <h1>Welcome to Tutorials Point</h1> <div class="horizontal-line"></div> <p>This is some text that will appear below the horizontal line.</p> </body>
Step 3 − In your CSS file (style.css), use the border-bottom property to create a horizontal line.
border-bottom: 2px solid black;
Step 4 − Apply the class to the <div> tag.
.horizontal-line {
border-bottom: 2px solid black;
}
Step 5 − Save the file and view it by opening it in a web browser.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.horizontal-line {
border-bottom: 2px solid black;
}
</style>
</head>
<body>
<h1>Welcome to Tutorials Point</h1>
<div class="horizontal-line"></div>
<p>This is some text that will appear below the horizontal line.</p>
</body>
</html>
Conclusion
In this article, we have shown you two ways to add a horizontal line to your webpage using HTML. The first approach is by using the <hr> tag, which is a simple and easy way to add a horizontal line to your webpage. The second approach is by using CSS, which allows you to customize the appearance of the horizontal line to match the design of your webpage. Both approaches are valid and can be used depending on the specific needs of your project.
3K+ Views
