In this tutorial we will show you the solution of rectangular box in HTML, in HTML there are many ways with the help of which you are able to make a rectangular box.
Rectangular box in html can also be made with the help of CSS, JavaScript, and with the help of SVG also.
But today, here we will show you how you are able to make a rectangular box with the help of html only.
Step By Step Guide On Rectangular Box In HTML :-
As, there are many ways with the help of which you are able to make a rectangular box in html.
As, we want to say that mostly all the tags that are used in html acquire some space.
If not, then you also able to make a rectangular box from both of them. It’s not important that it may be a singular tag or paired tag.
You are able to make a box from all types of tags in html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.division{
width: 100px;
height: 100px;
background-color: red;
}
.para{
width: 500px;
height: 150px;
background-color: green;
}
.img{
width: 200px;
height: 350px;
background-color: black;
}
</style>
</head>
<body>
<div class="division">
</div>
<p class="para">
</p>
<img src="" alt="" class="img">
</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. Hence, here are some ways with the help of which you are able to make a rectangular box in html.
- The tag which is used here is division tag and the next one is paragraph tag. In both of tags we give class to them and after this in CSS we give them first width and height to specify some area.
- And then background color to show you them that the box with width and height is actually present there.
- The next one is by using image tag which is a singular tag, you can also use hr tag.
- In this the process is same, here we again specify a class and in CSS we provide it dimensions by giving width and height and then background color to show you that the box is actually present there.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last, here we can say that with the help of this article you are able to make a rectangular box.
You can also use border-radius property to make circle and I hope this tutorial on rectangular box in HTML helps you
About Riya
