Do you think IIT Guwahati certified course can help you in your career?
Introduction
In HTML, a horizontal line is used to separate content or create visual divisions within a webpage. This can be achieved using the <hr> tag, which represents a thematic break. The <hr> tag is self-closing and does not require an end tag. It can be styled using CSS to change its color, width, or style.
In this article, you will learn how to add and customize horizontal lines in HTML.
Why <hr> Tag is Important?
The <hr> tag stands for horizontal rule and is used to create a break or division in a webpage. It is useful for:
Separating different sections of content.
Enhancing readability and layout structure.
Creating a clear distinction between different topics.
The <hr> tag is a self-closing tag, meaning it does not require an end tag.
When to Use the HTML <hr> Tag?
The <hr> tag is used in various scenarios, such as:
Dividing sections – To separate different topics within an article or blog post.
Creating visual breaks – When switching from one idea to another in the content.
Enhancing UI design – To create visually appealing content separation.
Structuring a resume or form – To separate sections like personal details, skills, and experience.
Example of HTML <hr> Tag
Let’s look at a simple example of the <hr> tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Line Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is the first section of content.</p>
<hr>
<p>This is the second section of content.</p>
</body>
</html>
Output:
A horizontal line appears between the two paragraphs, visually separating them.
Different Approaches to Add Horizontal Lines in HTML
There are two primary ways to add horizontal lines in HTML:
1. Using <hr> Tag
This is the simplest way to add a horizontal line in HTML. The <hr> tag can be styled using CSS for better customization.
Example
<!DOCTYPE html>
<html>
<head>
<title>Styled Horizontal Line</title>
<style>
hr {
border: 2px solid black;
width: 80%;
margin: 20px auto;
}
</style>
</head>
<body>
<h2>Section 1</h2>
<p>Some text here.</p>
<hr>
<h2>Section 2</h2>
<p>Some more text here.</p>
</body>
</html>
Output
Explanation:
The border property gives the <hr> a custom thickness and color.
The width property limits the horizontal line’s width to 80% of the page.
The margin property centers the line and adds spacing.
2. Using CSS Properties
Instead of using the <hr> tag, you can create horizontal lines using CSS properties like border, background-color, or height.
The .custom-line class creates a solid bar using background-color.
The height determines the thickness of the line.
The width and margin center it on the page.
Real-Life Examples of Using HTML Horizontal Lines
Horizontal lines in HTML are often used to divide content into sections. They make web pages easier to read by creating visual breaks between different parts of the text or design. Let’s look at some real-life examples where horizontal lines are commonly used.
Example 1: Separating Blog Posts
Imagine you’re designing a blog page. Each blog post needs to stand out individually. A horizontal line can separate one post from another, making it clear where one ends and the next begins. Let’s see how you can do it:
<!DOCTYPE html>
<html>
<head>
<title>Blog Page</title>
</head>
<body>
<h1>My Blog</h1>
<p>This is the first blog post. It talks about coding tips for beginners.</p>
<hr>
<p>This is the second blog post. It focuses on web development trends.</p>
<hr>
<p>This is the third blog post. It explains how to use HTML effectively.</p>
</body>
</html>
Output
In this code, `<hr>` is the tag used to create a horizontal line. It doesn’t require a closing tag. When you open this file in a browser, you’ll see lines separating each blog post.
Example 2: Highlighting a Footer
Another common use of horizontal lines is to separate the footer from the main content. This makes the footer visually distinct. For example:
Here, the `<hr>` tag creates a line above the footer, making it clear that the contact details belong to a separate section.
Example 3: Creating Section Dividers in Forms
Forms often have multiple sections like personal details, address, and preferences. Horizontal lines can help group these sections logically. For example:
<!DOCTYPE html>
<html>
<head>
<title>Form with Sections</title>
</head>
<body>
<h1>Registration Form</h1>
<p>Personal Details:</p>
<input type="text" placeholder="Enter your name">
<input type="email" placeholder="Enter your email">
<hr>
<p>Address Details:</p>
<input type="text" placeholder="Enter your street">
<input type="text" placeholder="Enter your city">
<hr>
<p>Preferences:</p>
<input type="checkbox"> I agree to receive updates.
</body>
</html>
Output
In this example, horizontal lines separate the form into three logical sections, improving readability.
These examples show how horizontal lines improve the structure of web pages. Whether you’re working on blogs, footers, or forms, `<hr>` is a simple yet powerful tool.
Best Practices for Using HTML Horizontal Lines
While adding horizontal lines in HTML is straightforward, using them effectively requires following some best practices. Overusing or misplacing horizontal lines can make your web page look cluttered. Let’s discuss some essential guidelines to ensure you use `<hr>` tags appropriately.
1. Use Horizontal Lines Sparingly
Horizontal lines should enhance the layout, not overwhelm it. Adding too many lines can confuse users and make the page look messy. For example, if a line separates every paragraph, it disrupts the flow of reading. Instead, use lines only where they add value, like separating major sections.
In this example, lines are used only twice—once to separate the introduction from the main content and once to separate the footer. This keeps the page clean and organized.
2. Customize Horizontal Lines with CSS
By default, horizontal lines appear as plain gray bars. However, you can style them using CSS to match your website’s design. Customizing the color, thickness, or width of the line makes it more visually appealing.
Below is an example of a styled horizontal line:
<!DOCTYPE html>
<html>
<head>
<title>Styled Horizontal Line</title>
<style>
hr {
border: none; / Removes the default border /
height: 2px; / Sets the thickness of the line /
background-color: blue; / Changes the line color /
width: 50%; / Adjusts the width of the line /
margin: 20px auto; / Centers the line with spacing /
}
</style>
</head>
<body>
<h1>Customized Horizontal Line</h1>
<p>This section explains how to style horizontal lines.</p>
<hr>
<p>Styling improves the appearance of your web page.</p>
</body>
</html>
Output
In this code, the `<hr>` tag is customized using CSS. The `border: none;` removes the default styling, while `background-color` changes the line’s color. Adjusting the `width` ensures the line doesn’t span the entire page, making it more balanced.
3. Avoid Using Horizontal Lines for Decoration Only
Horizontal lines should serve a functional purpose, such as separating content or grouping related items. Avoid using them purely for decorative reasons, as this can distract users. For example, don’t add lines around images unless they contribute to the layout’s clarity.
Here’s an incorrect example of overusing lines:
<!DOCTYPE html>
<html>
<head>
<title>Overuse of Horizontal Lines</title>
</head>
<body>
<h1>Why This is Wrong</h1>
<hr>
<p>This is a paragraph.</p>
<hr>
<img src="example.jpg" alt="Example Image">
<hr>
<p>This is another paragraph.</p>
<hr>
</body>
</html>
Output
In this case, the lines don’t add meaningful structure—they just clutter the page. Always ask yourself if a line serves a purpose before adding it.
4. Test Responsiveness on Different Devices
Horizontal lines should look good on all devices, including mobile phones and tablets. If a line spans the entire width of the screen, it might look fine on a desktop but overwhelm smaller screens. Use CSS to control the width and ensure responsiveness.
For example:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Horizontal Line</title>
<style>
hr {
border: none;
height: 1px;
background-color: black;
width: 80%; / Adjusts width for better responsiveness /
margin: 15px auto; / Centers the line with spacing /
}
</style>
</head>
<body>
<h1>Responsive Design</h1>
<p>This line adjusts its width based on the screen size.</p>
<hr>
<p>Testing on different devices ensures a consistent experience.</p>
</body>
</html>
Output
This code ensures the line adapts well to various screen sizes, maintaining a clean layout.
Frequently Asked Questions
What is the purpose of the <hr> tag in HTML?
The <hr> tag is used to create a horizontal rule, visually separating sections of content. It is a self-closing tag and is useful for improving content structure.
How can I style the <hr> tag?
You can style the <hr> tag using CSS properties like border, width, margin, and color.
Can I create a horizontal line without using the <hr> tag?
Yes, you can use CSS properties like border-top or background-color to create a horizontal line without the <hr> tag.
Conclusion
In this article, we learned how to add a horizontal line in HTML using the <hr> tag. The <hr> element is used to create a thematic break between content sections. It can be styled using CSS to adjust width, color, and thickness. Understanding horizontal lines helps in improving content structure and readability on web pages.
518+ registered 
