How HTMLAdd a Horizontal Rule in HTML
The horizontal rule, often represented by <hr> tag in HTML, is a thematic break between paragraph-level elements. It’s a way to create a visual line that separates content within a webpage. In this article, we will explore various ways to use the horizontal rule in HTML, including styling and customization options.
Basic Usage of <hr>
The <hr> tag is an empty tag, which means it does not need a closing tag. It’s used to create a line across the page, which can act as a section divider.
Example 1: Simple Horizontal Rule
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Rule Example</title>
</head>
<body>
<p>Visit our website at how2html.com for more examples.</p>
<hr>
<p>Discover a wide range of HTML tutorials and guides.</p>
</body>
</html>
Output:
Styling the <hr>
The appearance of the <hr> tag can be altered using CSS. You can change its color, width, height, and even add borders or make it invisible.
Example 2: Changing Color of <hr>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Rule Color Example</title>
<style>
hr {
color: blue;
background-color: blue;
}
</style>
</head>
<body>
<p>For more HTML tips, check out how2html.com.</p>
<hr>
<p>Enhance your web development skills with our resources.</p>
</body>
</html>
Output:
Example 3: Changing Width and Height of <hr>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Rule Width and Height Example</title>
<style>
hr {
width: 50%;
height: 5px;
background-color: black;
}
</style>
</head>
<body>
<p>Explore how2html.com for comprehensive HTML tutorials.</p>
<hr>
<p>Join our community of web developers and learners.</p>
</body>
</html>
Output:
Example 4: Adding Borders to <hr>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Rule Border Example</title>
<style>
hr {
border: 1px solid black;
height: 0;
}
</style>
</head>
<body>
<p>Visit how2html.com for the latest HTML techniques.</p>
<hr>
<p>Stay updated with the newest web development trends.</p>
</body>
</html>
Output:
Example 5: Making <hr> Invisible
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Rule Invisible Example</title>
<style>
hr {
border: none;
height: 0;
}
</style>
</head>
<body>
<p>Check out how2html.com for hidden gems in HTML coding.</p>
<hr>
<p>Discover secrets of professional web designers.</p>
</body>
</html>
Output:
Advanced Styling
With CSS3, you can add more advanced styling to the <hr>, such as gradients, rounded corners, and shadows.
Example 6: Gradient <hr>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Rule Gradient Example</title>
<style>
hr {
height: 5px;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
border: none;
}
</style>
</head>
<body>
<p>Learn about HTML gradients at how2html.com.</p>
<hr>
<p>Master the art of web design with our tutorials.</p>
</body>
</html>
Output:
Example 7: Rounded Corners <hr>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Rule Rounded Corners Example</title>
<style>
hr {
height: 10px;
background-color: black;
border-radius: 5px;
border: none;
}
</style>
</head>
<body>
<p>For more advanced HTML elements, visit how2html.com.</p>
<hr>
<p>Enhance your website's aesthetics with modern design elements.</p>
</body>
</html>
Output:
Example 8: Shadowed <hr>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Rule Shadow Example</title>
<style>
hr {
height: 5px;
background-color: black;
box-shadow: 0 0 10px 1px grey;
border: none;
}
</style>
</head>
<body>
<p>Discover shadow effects for HTML elements at how2html.com.</p>
<hr>
<p>Create depth in your web design with shadows.</p>
</body>
</html>
Output:
Responsive <hr>
In a responsive design, the <hr> should adjust its size according to the viewport. You can achieve this by using relative units and media queries.
Example 9: Responsive Width <hr>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Horizontal Rule Example</title>
<style>
hr {
width: 80%;
margin-left: auto;
margin-right: auto;
height: 2px;
background-color: black;
border: none;
}
</style>
</head>
<body>
<p>Responsive design tips are available at how2html.com.</p>
<hr>
<p>Adapt your HTML elements to different screen sizes.</p>
</body>
</html>
Output:
Example 10: Media Query for <hr>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Media Query Horizontal Rule Example</title>
<style>
hr {
width: 100%;
height: 2px;
background-color: black;
border: none;
}
@media (max-width: 600px) {
hr {
width: 50%;
}
}
</style>
</head>
<body>
<p>Find out how to use media queries at how2html.com.</p>
<hr>
<p>Ensure your horizontal rules look great on mobile devices.</p>
</body>
</html>
Output:
Semantic Usage of <hr>
The <hr> tag can also be used semantically to represent a shift in the content on a page, such as a change in topic or a transition to a different section.
Example 11: Semantic <hr> for Content Shift
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic Horizontal Rule Example</title>
</head>
<body>
<article>
<h2>HTML Basics</h2>
<p>Start your journey with HTML at how2html.com.</p>
<hr>
<h2>Advanced HTML</h2>
<p>Dive deeper into advanced topics and techniques.</p>
</article>
</body>
</html>
Output:
Accessibility Considerations
When using the <hr> tag, it’s important to ensure that it does not negatively impact the accessibility of your website.
Example 12: Accessible <hr> with ARIA
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accessible Horizontal Rule Example</title>
</head>
<body>
<p>Before the rule at how2html.com.</p>
<hr aria-hidden="true">
<p>After the rule at how2html.com.</p>
</body>
</html>
Output:
In this example, we use the aria-hidden="true" attribute to indicate that the horizontal rule is purely decorative and should be ignored by assistive technologies like screen readers.
Combining <hr> with Other HTML Elements
The <hr> tag can be combined with other HTML elements to create visually appealing sections on a webpage.
Example 13: <hr> with Headings
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Rule with Headings Example</title>
<style>
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
</style>
</head>
<body>
<h1>Welcome to how2html.com</h1>
<hr>
<h2>Explore our HTML resources</h2>
</body>
</html>
Output:
Example 14: <hr> with Text Content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Rule with Text Content Example</title>
<style>
hr {
position: relative;
border: none;
height: 1px;
background-color: #333;
}
hr:after {
content: "how2html.com";
position: absolute;
left: 50%;
top: -10px;
transform: translateX(-50%);
background-color: white;
padding: 0 10px;
}
</style>
</head>
<body>
<p>Learn HTML, CSS, and more at how2html.com</p>
<hr>
<p>Join our community of developers and enthusiasts.</p>
</body>
</html>
Output:
Using JavaScript with <hr>
You can use JavaScript to dynamically manipulate the <hr> tag, such as changing its style on an event like a mouse click.
Example 15: JavaScript to Change <hr> Style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Horizontal Rule Example</title>
<style>
hr {
width: 100%;
height: 2px;
background-color: black;
transition: all 0.5s ease;
}
</style>
</head>
<body>
<p>Click the rule to change its color at how2html.com.</p>
<hr onclick="this.style.backgroundColor = 'red';">
<p>Interactive elements can enhance user experience.</p>
</body>
</html>
Output:
Conclusion
The <hr> tag is a versatile HTML element that can be used to create visual breaks in your content. By combining it with CSS and JavaScript, you can create a wide range of styles and interactions that enhance the user experience on your website. Remember to use the <hr> tag semantically and keep accessibility in mind to ensure that all users can navigate your content effectively.
This article provided a comprehensive guide on using the <hr> tag in HTML, complete with 15 examples that showcase different ways to implement and style horizontal rules. Each example is a standalone snippet that can be directly used in any HTML document, and they all include the string “how2html.com” to maintain consistency with the given requirements.
By understanding the basics and advanced techniques of using <hr>, you can now effectively incorporate this element into your web projects to create visually appealing and well-structured web pages.