Get the code of HTML horizontal ruler and watch video tutorials. You can practice using our code editor. Our practical guide will make your learning journey much easier. You can explore the tutorial and learn.

<h1>I am ok...</h1>
<hr>
<hr>
<h1>I am ok...</h1>
<hr>
<hr>
<h1>I am ok...</h1>
<hr>
<hr>

HTML Horizontal Rule Tag | How to Use the HR Element in HTML with Examples

Want to add a horizontal line to separate content on your webpage? In this tutorial, you’ll learn how to use the HTML <hr> tag to create horizontal rules and visually divide different sections of your content.

The <hr> tag is a simple but useful HTML element that represents a thematic break between paragraphs or sections of a webpage. It helps separate related content and makes your page structure easier for visitors to understand.

Unlike many HTML elements, the <hr> tag is an empty element, which means it doesn’t require a closing tag. You can simply write <hr> wherever you want to add a thematic break in your HTML document.

In this step-by-step tutorial, I’ll show you how to add a horizontal rule using HTML, customize its appearance with CSS, and change its width, height, color, alignment, and border style to match your website design.

You’ll also learn the difference between the HTML <hr> element and a simple decorative border, along with practical examples to help you understand when to use each one.

Whether you’re a beginner learning HTML or improving your frontend development skills, understanding the horizontal rule element will help you organize webpage content more effectively.

Watch the tutorial and follow along to learn how to use the HTML horizontal rule tag with practical examples!

Ready to become a better coder? Don’t miss this tutorial!   Animation Direction in CSS