Sometimes when creating the flow of your web page, you’ll want to find some way to section your content off into visually distinct parts. In this article, we’ll learn about the horizontal rule in HTML and how to put it in your markup so that you can visually make your web page more appealing and user-friendly.
The <hr> HTML element can be styled just as any other HTML element using CSS. Convention is for it to be a non-closing tag (<hr>) instead of a self-closing tag (<hr />), but the markup is read the same either way. It is displayed as a block-level element that has wide-level browser support and indicates a shift in topic on your web page.
I think it’s best just to experiment with the CSS to see what it does. The following code sandbox illustrates a very, very basic HTML page with some CSS that’s used to decorate the HTML <hr> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>hr</title>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400;700&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: 'Roboto Mono';
}
nav {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: 100%;
height: 50px;
margin-left: 20px;
}
nav > div {
display: flex;
justify-content: space-around;
align-items: center;
width: 40%;
}
nav > div > a {
text-decoration: none;
color: black;
}
nav > a {
text-decoration: none;
font-variant: small-caps;
align-self: center;
}
hr {
border: none;
border-top: 5px double black;
color: #333;
overflow: visible;
text-align: center;
height: 5px;
}
hr::after {
content: '😀😀😀😀';
padding: 0 4px;
position: relative;
top: -18px;
background: #fff;
}
section {
width: 100%;
display: flex;
align-items: center;
margin: 0 auto;
}
section > div {
width: 50%;
display: flex;
justify-content: center;
}
section > h1 {
width: 50%;
text-align: center;
}
section > div > img {
height: 350px;
object-fit:cover;
}
#diff-style-hr {
border: none;
border-top: 3px dotted black;color: #333;
overflow:visible;
text-align: center;
height: 5px;
}
#diff-style-hr::after {
content: "";
padding: 0;
}
.lower-container {
display: flex;
flex-flow: row wrap;
}
.lower-main {
display: flex;
flex-direction: column;
width: 40%;
margin: 0 auto;
}
h4 {
align-self: flex-start;
}
</style>
</head>
<body>
<nav>
<a href="#">
<div>
Logo Goes Here
</div>
</a>
<div>
<a href="">
About Us
</a>
<a href="">
Services
</a>
<a href="">
Contact Us
</a>
<a href="">
Login
</a>
</div>
</nav>
<hr />
<main>
<section>
<div>
<img src="https://images.unsplash.com/photo-1516259762381-22954d7d3ad2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2266&q=80" alt="code"/>
</div>
<h1>I'm a business name</h1>
</section>
<hr id="diff-style-hr">
<div class="lower-container">
<section class="lower-main">
<h4>I'm a headline</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
</section>
<section class="lower-main">
<h4>I'm a headline</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
</section>
<section class="lower-main">
<h4>I'm a headline</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
</section>
<section class="lower-main">
<h4>I'm a headline</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
</section>
</div>
</main>
</body>
</html>
Great job! You now have the tools you need to build a great-looking site using the <hr>.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
