It is easy enough to insert or draw a horizontal line in html. But how do you draw a vertical line in html? Unlike for the horizontal line, there is no single tag in html that will draw the vertical line. But that does not mean it is impossible to do so.
One way to do this is to use the HTML tags with cascading style sheets or CSS.
We will use the
div tag in HTML to draw a block on the page. On the
div tag, you can use the
border-left or the
border-right property to draw the borders of the block. Combined with the
height property of the
div, you will end up drawing a vertical line of the desired length.
height: the height can be used to specify the length of the line on the page.
border-left: this is the specify what kind of line you like. the example is a solid black line of 2-pixel thickness. You can have dashed lines or a much thicker line.
- position and left: these two together specify where on the page you need the line aligned horizontally. Any of the attributes that will place the
divappropriately can be used to position the line on the page
The output of the above code will display as a solid black vertical line in the middle of the page.
There are several different combinations that are possible. For example, you can use both the
border-left and the
border-right properties together to draw two vertical lines side by side. Be sure to specify the
width of the
div if you are drawing two lines. That will determine the distance between the two vertical lines.
You can vary the size or thickness of the line using the pixel count. Almost all variations that you can use to draw a horizontal line can be used to draw the vertical line as well.
Using the hr tag
The HTML tag for inserting horizontal line is the
hr tag. You can use the same tag for inserting the vertical line as well, but you still will need to specify the
size to format the line. So, all you probably doing is using the
hr tag in lieu of the
div tag in the earlier example.
Still, it can be quite simple to use if you don’t need any fancy formatting. You specify the
width attribute to set the thickness of the line and the
size attribute to specify the length or height of the line.
div will give you a lot more flexibility in controlling the size and type of line that you want to draw as well as for drawing multiple lines. Well, you could draw the horizontal line just the same way, using the
border-bottom properties instead of the left and right we had used.