All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

How To Add Horizontal Line In HTML

Last Updated : Mar 11, 2024

How To Add Horizontal Line In HTML

In this tutorial we will show you how to add horizontal line in HTML, a horizontal line is a line which is used to display division in your HTML webpage and also, its draw under any heading and paragraph to make a webpage content better aligned.

So, there are many CSS properties with you can use on your horizontal line for its better looks.

Step By Step Guide On How To Add Horizontal Line In HTML :-

1. By using HTML <hr> tag

As we know, HTML horizontal line tag is used to insert a horizontal line within a webpage. It is a singular tag and have no closing tag.

Everything like it’s CSS and its properties and changes what we want to do with it, is written in only hr tag. Generally, it places a single line of width 1px in webpage. You are also able to change the color with its width and size.

<!DOCTYPE html>
          <title> Title of the document<title>
         <hr style="width: 50%;border-color: red;" size="50px">
     			<hr style=”border-color: blue;" >
    			 <hr style="width: 50%;border-color: red;">

  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Now, here we will write three hr tags but with different CSS properties.
  5. In first code, we write about its width that is fifty percent then its size in 50px which means that horizontal line turns into a box with height 50px and the last is to give red color, with color: red property.
  6. In second code, we write about color, which is blue. So, it turns into blue color and there is no width and size property, so there are no changes occurred regarding these. They remain as default.
  7. At last, we write about its width that is again fifty percent then its red color again, but here no size is used to display how it shows on web browser. You can also change alignment from center to left or right. By giving a property like Align=”left/right”.
  8. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

At last, we can say that we are able to add horizontal line with hr tag, which is the easiest way and the most efficient method to add a horizontal line to a webpage.

Now, it’s about you that how you can edit your properties and modify them to give line a better look. I hope this tutorial on how to add horizontal line in HTML helps you.