How to Make a Box With the Text Inside HTML

Techwalla may earn compensation through affiliate links in this story.
Create a box containing a block of text using HTML.

HyperText Markup Language (HTML) is the language most commonly used to create the structure and content of webpages. HTML contains a wide range of elements that allow users to generate links, images, paragraphs, heading and much more. These elements are added to a page through the use of specific sets of characters, known as tags. Once you understand the combination of elements and tags required, creating a block of text surrounded by a box in HTML is a quick task.


Step 1

Open the webpage you want to edit and view its HTML code. If you use a text editor, simply open your page in the program and scroll down until you reach the section of the page where the box and text will appear. If you use a visual website program, such as Microsoft Expression Web or Adobe Dreamweaver, open your page and then click on the area where you want to add the box and text. After doing so, change your viewing mode to "Code View" to see the HTML that controls the behavior of the page.


Video of the Day

Step 2

Press the "Enter" key to create a blank line in your HTML code.

Step 3

Copy and paste the following three lines of code onto the blank line created in the previous step:

A block of paragraph text goes here

Step 4

Adjust the parameters of the code you added in the previous step, as needed. Change the width, border size, border style and border color by modifying the "500px," "2px," "solid" and "black" values in the first line of the code. Change the amount of space surrounding the text by modifying the "10px" value in the second line of the code. Modify the text located between the opening "

" and closing "

" tags to suit the needs of your page.



Step 5

Save the page and then open it in a web browser. The code you inserted and modified in the previous two steps adds a 500-pixel wide box with a black border, surrounding a block of paragraph text.