HTML Horizontal Line | HTML HR Tag

The HTML horizontal line is used to draw a horizontal line in a web page. It is used to divide an HTML page into different horizontal sections. Horizontal lines are required when we need to display different types of content on the same HTML page in a distinct manner. The HR element is used to represent the horizontal line. It is an empty tag. Therefore, it does not contain any content.

How to Add a Horizontal Line to a Web Page

To add a horizontal line to a web page, use the HR tag as shown in the example given below:

<!DOCTYPE html>
<html>
   <body>
      
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <hr>
      <p>Lorem ipsum dolor sit amet.</p>

   </body>
</html>

Write the above HTML code in a text editor, say "Notepad," and save it with the ".html" extension. For example, "codescracker.html," and open the file in any web browser, say "Google Chrome." Here is the output you will see:

HTML HR Style

There are multiple styles that you can apply to the HR tag to change its default appearance; for example, you can change its color, size, etc.

Now let's briefly describe, with an example, some of the famous styles that can be applied to the HR tag in an HTML document.

Change the thickness of the horizontal line

Use the "style" attribute in the manner shown in the example given below to modify the width of a horizontal line produced by the HR tag. This will allow you to change the thickness of the line.

<!DOCTYPE html>
<html>
   <body>
      
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <hr style="height: 14px;">
      <p>Lorem ipsum dolor sit amet.</p>

   </body>
</html>

The output produced by the above HTML code should exactly be:

html horizontal line change thickness example

To make it a solid black horizontal line, unlike the above one with the same size, use the following HTML code:

HTML Code

<!DOCTYPE html>
<html>
   <body>
      
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <hr style="height: 14px; border-style: solid; background-color: black;">
      <p>Lorem ipsum dolor sit amet.</p>

   </body>
</html>

Output

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet.

Change the color of the horizontal line

To change the color of a horizontal line created using the HR tag, you can use the "style" attribute in a way as shown in the example given below:

HTML Code

<!DOCTYPE html>
<html>
   <body>
      
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <hr style="height: 14px; background-color: red;">
      <p>Lorem ipsum dolor sit amet.</p>

   </body>
</html>

Output

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet.

Create a dotted horizontal line in HTML

To create a dotted horizontal line in a web page, you need to style its border with "dotted size," in the same way as shown in the example given below:

HTML Code

<!DOCTYPE html>
<html>
   <body>
      
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <hr style="border: dotted 1px;">
      <p>Lorem ipsum dolor sit amet.</p>

   </body>
</html>

Output

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet.

HTML Online Test

« Previous Tutorial Next Tutorial »

Liked this article? Share it!

Like/follow us on social media for updates!