In this tutorial we will show you how to make a box in HTML, in HTML, to make a box around an element is very easy. A box is generally used in html to differentiate particular content from another and sometimes for some specific reasons.
A box can be created around any element of HTML by using box-sizing property, and to see it more creative we add paddings, margin, background colors and height, width to the specific tag also.
Here we give an example to understand how we can make a box in html to any tag you want.
Step By Step Guide On How To Make A Box In HTML :-
As, we know every tag or element in HTML is occupied some space because it acts as a container in webpage.
And with the help of some attributes of html, we just have to make border creative and visible to others. Also, we can customize our border of an element by giving its width and height.
So for this, we add paddings to give insider margin, border with color, background color according to choice and box-sizing property.
Here we give an example to make a box in html with help of some codes.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body>
<p style="width:300px; height:50px; background-color: black; color: white; box-sizing: border-box;">
A box can be made around a paragraph
</p>
<h1 style="width:1000px;height:100px; background-color:red">
We can also able to make a box in heading tags
</h1>
<div style="width: 700px; height: 70px; background-color: aqua; color: darkgray; border: 1px solid black;">
</div>
</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, we create three different tags they are paragraph, heading and division.
- Mostly all of them have same properties like width, height which are mandatory to make a box, and other like border, background color, etc. are optional tags, if you don’t use these tag then box is also made. Whereas the background color is only here to show you that a box is created in website.
- You can also place text inside these boxes like paragraph and heading tags. Or if you wish to make an empty box, you can see codes of division tag.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, we can say that a box can be created around any text used in any tag. We have only to give height and width only to tag and have to use background color and border property to show that a box is created here.
Hence, after reading this article we are able to create a box anywhere in body of a webpage and with or without text also. I hope this tutorial on how to make a box in HTML helps you.
About Ashish
