Horizontal line

In this article we are going to learn about horizontal line in html, how to create horizontal line to separate sections in webpages and style horizontal line.

We learnt about html in general, learning the structure of hypertext markup language, text in html, lists in html, links in html, inputs in html, buttons in html, forms in html, html elements, tables in html and marquee in html so, now we are going to learn about horizontal line in html.

Horizontal line

Horizontal line is used in html to create horizontal lines in webpages to separate sections and can be customized with size and color.

Default horizontal line

Default horizontal line is a horizontal line which does not have any customized color or size its default color is gray.

Let us create a default horizontal line, copy and paste below code.

<!DOCTYPE html>

<body>

<hr/>

</body>

</html>


So, we should have the following results and this is a default horizontal line.


Horizontal line color

Horizontal line color can be customized and specifies the color of the horizontal line, we can set any color of our choice according to the design we want.

Let us create horizontal line with a color specified, copy and paste below code.

<!DOCTYPE html>

<body>

<hr color="orange"/>

</body>

</html>


So, we should have the following results and the horizontal line color is orange.


Horizontal line size

Horizontal line size can be customized and specifies the height of the horizontal line, we can set any size of our choice according to the design we want.

Let us create horizontal line with a size specified, copy and paste below code.

<!DOCTYPE html>

<body>

<hr size="15px"/>

</body>

</html>


So, we should have the following results and we can see that the height of horizontal line has increased.


Horizontal line width

Horizontal line width can be customized and specifies the width of the horizontal line, we can set any width size of our choice according to the design we want.

Let us create horizontal line with a width specified, copy and paste below code.

<!DOCTYPE html>

<body>

<hr width="160px"/>

</body>

</html>


So, we should have the following results and we can see that the width of horizontal line has decreased.


Conclusion

In this article we learnt about horizontal line in html with examples, how to create horizontal line to separate sections in webpages and style horizontal line.