✖

All TalkersCode Topics

Follow TalkersCode On Social Media

How To Add A Line In HTML

Last Updated : Jan 1, 2023

IN - HTML

How To Add A Line In HTML

In this tutorial we will show you the solution of how to add a line in HTML, sometimes in some webpages we see that there is a line between two sections to show division.

And there is a line after some headings to give styles in html. So, let us discuss how we are able to add a line in html.

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

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

You can use hr tag anywhere in body and can also apply with the help of CSS. hr tag can be used inside any tag used in body also.

Note: You can customize you hr tag with the help of CSS and style tag. By default, the color of hr i.e. horizontal line is black and its height/thickness is 1px. 

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
        </head>
          <body>
 <hr style="background-color: blue; height: 2px; border-width: 0ch;">
<hr style="width: 50%;background-color: red;border-width: 0; height: 1px;" >
 <hr style="width: 100%;background-color: red;border-width: 0;" size="10">
</body>
      </html>
  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. Here, in body we create three hr tags, each with different style. Let us discuss them one by one.
  5. In first hr tag, we use width, background color, border-width, height. Here, width is used to specify the width of hr, background-color is used to give color to hr, border-width is used to hide extra border and height is used for thickness of horizontal line.
  6. In this we use width 50%, means only half line shows according to size of webpage, whereas its color is red, and we disappears extra border with help of border-width. At last, the height given here is 1px which is thickness of line.
  7. In second, all the content is same as first, but no width is used here. So, uses 100% of its width and color used is blue whereas the height is 2px for thickness of line.
  8. In last, we use here size not height, you can use any one from them, and both are same. The size is inbuilt property of hr tag for thickness of hr line.
  9. 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 help of hr tag. In next sessions, we will discuss about its different heights/ thickness and about its different colors.

I hope this tutorial on how to add a line in HTML helps you.

Latest Tutorials