HTML Horizontal Line Thickness
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Dikshita
In this tutorial we will show you the solution of HTML horizontal line thickness and we are going to understand the concept of horizontal line thickness.
In our previous session, we understand that how we are able to create a horizontal line and how to apply color on horizontal line in html.
Now, our today’s topic is about the thickness of horizontal line. Now, let us understand the concept.
Step By Step Guide On HTML Horizontal Line Thickness :-
As we know, HTML horizontal line tag is used to insert a horizontal line within a webpage.
It is a singular tag and have no closing tag. All the customization and done with in this tag.
As we know that our today’s concept is about how to change thickness of horizontal line in html.
A horizontal line in HTML has a default value of 1px. And also, we are able to change this according to our choice. Let us do it.
<!DOCTYPE html> <html> <head> <title> Title of the document<title> </head> <body> <p>A normal horizontal line is given below:</p> <hr> <p>With help of CSS in which we use different thickness:</p> <hr style="height:2px;background-color:black"> <!--hr with 2px height--> <hr style="height:8px;background-color:black"> <!--hr with 8px height--> <hr style="height:15px;background-color:black"> <!--hr with 15px height--> <hr style="height:23px;background-color:black"> <!--hr with 23px height--> <hr style="height:30px;background-color:black"> <!--hr with 30px height--> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- 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.
- 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 different hr tags for horizontal lines. In first one, that is a simple hr tag no any additional attribute and css used here.
- So, it is default view of horizontal line.
- After this next other lines are same, in all we use hr tag and under hr we use style attribute. In style, we use here two properties that are height and background color.
- Background color is used to give color to lines. Where the thickness depends upon height property.
- Here, we give different values in pixels to height and you can see that the thickness goes increasing with increase in height given in pixels and vice versa. We hope that you understand the concept of height.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last here in conclusion, here we can say that with the help of this article we are able to change the thickness of horizontal lines in html. I hope this tutorial on HTML horizontal line thickness helps you.
About Dikshita
