How To Put A Box Around Text In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Dikshita
In this tutorial we will show you how to put a box around text in HTML, Generally, every element that is in html is in rectangular shape. So, we are able to create a box for every element. Tags like paragraphs, divisions, sections, all headings and also span, etc. are used for creating boxes.
We have to place text inside them and some CSS properties to tags provided by you, with the help to these we are able to create a box. The easy way to create or put a box is as:
Step By Step Guide On How To Put A Box Around Text In HTML :-
By using border property:
As we know, a box can be create for every HTML element and steps are same for all tags. We will provide an example in html to show you, how to put a box around a text.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body>
<p style="border: 1px solid black;">
this is a simple paragraph tag with 1px solid black border.
</p>
<div style="border: 1px solid black;">
this is a simple division tag with 1px solid black border.
</div>
<h1 style="border: 1px solid black;">
this is a simple heading_one tag with 1px solid black border.
</h1>
<h2 style="border: 1px solid black;">
this is a simple heading_two tag with 1px solid black border.
</h2>
<h3 style="border: 1px solid black;">
this is a simple heading_three tag with 1px solid black border.
</h3>
<h4 style="border: 1px solid black;">
this is a simple heading_four tag with 1px solid black border.
</h4>
<h5 style="border: 1px solid black;">
this is a simple heading_five tag with 1px solid black border.
</h5>
<h6 style="border: 1px solid black;">
this is a simple heading_six tag with 1px solid black border.
</h6>
<span style="border: 1px solid black;">
this is a simple span tag with 1px solid black border.
</span>
<section style="border: 1px solid black;">
this is a simple section tag with 1px solid black border.
</section>
</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 use different tags like paragraph, division, section, span, and headings also. In all of them a text is written as we genuinely do.
- Now, our job is to place a border around the text that we write here and for all tags, the method/ pattern or code is same.
- Here, just we have to give a style attribute to tag and write border:”1px solid black”, where 1px is width of border, solid is style of border and black is color of border. We can also change these values as we wish.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At result, now we are able to draw or create a border all the tags in HTML. The pattern is same for all tags, value are according to Editor’s choice.
Also, there are many other ways to do this, but this one is simplest and we do all other ways in next sessions. I hope this tutorial on how to put a box around text in HTML helps you.
About Dikshita
