Introduction

If you are working on a page and want to add a horizontal line, there is a simple trick to do so. While working on web pages, you may want to add a horizontal line to indicate a thematic change between different sections. To create a horizontal line in HTML, you will need to use the HTML hr tag. HR is a block-level element that moves all the elements after it to another line. Here’s  how to add lines in HTML:

What is an HR Tag in HTML?

The horizontal rule is an HTML tag that enables us to add a thematic break to an HTML page. Using the html add line <hr> tag, we can divide document sections. This can be done by typing <hr> in front of the area we want to divide. Here’s how the syntax of an HTML hr tag looks like:

<hr> ...

It's a good idea to insert horizontal lines or other elements of human resources into web pages to add visual value. In earlier versions of HTML, the <hr> tag was used for this purpose. Since HTML5, however, the <hr> tag provides semantic meaning to page layouts and can be customized using CSS to create various layout effects. In HTML, you can use the <hr> tag to create a thematic break and separate different topics on a page. Here’s an example html add a line (hr) tag:

<!DOCTYPE html>

<html><head>    

   <title>Horizontal Line Tag</title>

</head>

              <body>

<p> This is an example of horizontal rule. It is used below this paragraph</p>                                  

                            <hr>

<p>We have used the horizontal rule above this paragraph.</p> 

</body>    

</html>

CSS Properties for hr Tag

To create the horizontal line, we will use the border-style Property. This property can be used to set the style of the top border or bottom border of an element. Both properties can be used to add a horizontal line.

<!DOCTYPE html>
<html>

<head>
    <title>Horizontal line using CSS Properties</title>
<style>
        .horizontal_line {
            background-color: green;
        width: 90%;
        height: 5px;
            border-top: 5px dotted black;
            line-height: 80%;
    }

    .line {
            border-bottom: 5px solid red;
            margin-top: 5px;
        width: 90%;
    }
</style>
</head>

<body>
    <h2>Horizontal line using CSS Properties</h2>
<div class="horizontal_line"></div>
<div class="line"></div>
</body>
</html>

write your code here: Coding Playground

Conclusion

A horizontal line (or horizontal rule) is a line that separates sections of text. There are different ways to draw this line through HTML, depending on the level of customization you want with your element. Now you know how to show a horizontal line in HTML.