Table of contents

Introduction

Pre-Requisites

How to draw a Vertical Line HTML?

3.1.

Example 1 : Using CSS Border Property

3.2.

Example 2 : Using Height Width Tag

3.3.

Example 3 :Using the hr Tag

Uses of Vertical Line in HTML

Frequently Asked Questions

5.1.

How do you type a vertical line?

5.2.

How does a vertical line look?

5.3.

What is the HTML code for the divider line?

5.4.

What is the vertical line symbol called?

5.5.

Can we change the color and thickness of the vertical line?

5.6.

Can we extend a vertical line to full height of the page?

Conclusion

Last Updated: Sep 5, 2024

Easy

How to make a Vertical Line in HTML

Author Tashmit

Introduction

Vertical lines can enhance the visual structure of a webpage, often used to separate content or create distinct sections. You can create a vertical line using HTML and CSS by setting the height, width, and background color of an element like a div. Alternatively, CSS properties like border-left or transform can be used to generate a vertical line, depending on the desired design.

In this article, we will study about vertical line in HTML. We will also study various methods by which we can add a vertical line in our HTML webpage.

Pre-Requisites

In this article, we will study how to create a vertical line in HTML using CSS. In order to better understand it, we must know below topics.

How to draw a Vertical Line HTML?

While creating an HTML file, we may need to add a verticle line in out webpage. We can do that by three methods:

Using CSS Border Property
Using Height Width Tag
Using the hr Tag

Example 1 : Using CSS Border Property

With the help of CSS border property, we can add a vertical line to our web page. Let us see an example to understand it better.

Code

<html>
<head>
 <title> Vertical line in HTML</title>
 <style>
   .vertical {
     border-left: 6px solid orange;
     height: 200px;
     position: absolute;
     left: 50%;
   }
 </style>
</head>
<body style = "text-align: center;">
 <h1>Coding Ninjas</h1>
 <div class = "vertical"></div>
</body>
</html>

Output

Example 2 : Using Height Width Tag

With the help of height and width tag of CSS, we can add a vertical line in our HTML page. Let us see a code snippet to understand it

Code

<html>
<head>
 <title> Vertical line using CSS </title>
 <style>
   .vertical {
     margin-left: 100px;
     border-left: 6px solid blue;
     height: 200px;
   }
 </style>
</head>
<body>
 <h1> Coding Ninjas </h1>
 <div class = "vertical" ></div>
</body>
</html>

Output

Example 3 :Using the hr Tag

We can create a vertical line using the inbuilt hr tag of HTML. Let us see a sample code of that.

Code

<html>
<head>
 <title> Vertical line using hr tag</title>
 <style>
   .vertical {
     border-left: 6px solid orange;
     height: 200px;
     position:absolute;
     left: 50%;
   }
 </style>
</head>
<body style = "text-align: center;">
 <h1>Coding Ninjas</h1>
 <div class = "vertical"></div>

</body>
</html>

Output

Uses of Vertical Line in HTML

There are various uses of vertical line HTML. A few of them are as follows.

The most common use of vertical line is it can be used to represent data in well structured way.
It can be used to represent tables, or other separators to divide the content in sections.
Vertical lines are also used in menu bars to navigate different items.

Check this out, indexOf in JavaScript

Frequently Asked Questions

How do you type a vertical line?

To type a vertical line, use the "Pipe" key located above the Enter key on most keyboards, represented as ( | ).

How does a vertical line look?

A vertical line looks like a straight, upright mark ( | ) representing a mathematical or design element in HTML.

What is the HTML code for the divider line?

In HTML, the divider line is created using the <hr> tag, which stands for horizontal rule and creates a horizontal line.

What is the vertical line symbol called?

The vertical line symbol is called a "pipe" or "vertical bar," denoted as ( | ). It is used in mathematics, programming, and typography.

Can we change the color and thickness of the vertical line?

Yes, we can customize the color and thickness of the vertical line by modifying the CSS properties. With the help of height and color tags we can set the thicknes and color according to us.

Can we extend a vertical line to full height of the page?

We can use CSS properties to make a vertical line extend to the full height of the page. We can set the size of the line. One of the approaches is to set the line height to 100vh; it represents 100% of the viewport height.

Conclusion

In this article we studied about adding a vertical line in our HTML page. We understood three methods of adding a line and studied some examples. For more understanding, you can refer to below-mentioned articles.

You may refer to our Guided Path on Coding Ninjas Studio for enhancing your skill set on DSA, Competitive Programming, System Design, etc. Check out essential interview questions, practice our available mock tests, look at the interview bundle for interview preparations, and so much more!

Happy learning, Ninja!

Live masterclass

Switch from non tech to high paying data analytics profile

by Alka Pandey, Data Scientist @ Hindustan Unilever

09 Oct, 2024

01:30 PM

117+ registered

Master PowerBI using Netflix Data

by Ashwin Goyal, Product @ HRS Group, Ex - Udaan, OYO

08 Oct, 2024

01:30 PM

584+ registered

Switch from non tech to high paying data analytics profile

by Alka Pandey, Data Scientist @ Hindustan Unilever

09 Oct, 2024

01:30 PM

117+ registered

Master PowerBI using Netflix Data

by Ashwin Goyal, Product @ HRS Group, Ex - Udaan, OYO

08 Oct, 2024

01:30 PM

584+ registered

View more events