How to Create Horizontal and Vertical Lines in HTML (+Image)

Steps on how to create horizontal and vertical lines in HTML along with examples

Website makers certainly want to see the website they build looks neat and easy to read by visitors. One way that can make a website look neat is to separate each content in it by using a dividing line such as a horizontal or vertical line. Then, how to make vertical and horizontal lines in HTML?

How to Create Horizontal and Vertical Lines in HTML

Creating horizontal and vertical lines in HTML is actually very easy. You only need to use some HTML tags that can create straight horizontal and vertical lines. Here are the steps.

1. Creating Horizontal Lines in HTML

In the HTML programming language, creating a horizontal line is quite easy. Because you only need to enter one HTML tag and tadaa be the horizontal line. The tag is the tag

or commonly referred to as the horizontal ruler. The following is an example of using a script or code

Membuat Garis Horizontal di HTML/title></head><body><p>Ini contoh konten pertama</p><hr><p>Ini contoh konten kedua</p></body></html></code></span></pre><p>And the image below is an example display of the results of the script or code above.</p><p><img loading="lazy" class="aligncenter size-full wp-image-102526" src="https://i1.wp.com/www.nesabamedia.com/wp-content/uploads/2021/03/Image-1-1.png?resize=670%2C670&ssl=1" alt="make a horizontal line" width="670" height="670" data-recalc-dims="1"/></p><p>Very easy, isn’t it.  Then, for example, you are bored with straight horizontal lines like only black, you can color the lines.  You just enter the attributes <strong>color</strong> only in tags </p><hr><p> the.  The following is an example of using the script.</p><pre><span style="color: #ffffff;"><code><!DOCTYPE html><html><head><title>Membuat Garis Horizontal Berwarna di HTML

Well, you just need to enter the name of the color you want, such as red, yellow, green, and so on. And you can also set the line length by using the width attribute, as in the script or code above. Below you can see the results of the script or code above.

How to Create Horizontal Lines in HTML

2. Creating Vertical Lines in HTML

Unlike horizontal lines which only require one tag to create, vertical lines in HTML are a bit more difficult than horizontal lines because you need CSS code and tags.

. This div tag is then used to create vertical lines that are manipulated using CSS code. The following is an example of using a script or vertical line code in HTML.

Membuat Garis Vertikal Pada HTML

And below is the result of the script above.

make a vertical line

CSS script explanation:

.vertical_line on tags
Membuat Garis Vertikal Pada HTML Dengan Beberapa Border Dan Warna
And this is the result of the code above. You can see the difference, guys.
In the script or CSS code above, there are additional 2 properties, namely display with an inline-block value which aims to align the rows to the right. And 5px padding-left which aims for each line to have a left distance of 5px.
So this article discusses how to make horizontal and vertical lines in HTML very easily. You can create it according to your wishes with the existing CSS code. Hopefully this article can be helpful and useful for you. Thank you. Good luck
The rain lover and coffee connoisseur who likes to sit in daydream while dreaming of his dreams that will come true.