How to Work with Containers in HTML


HTML container elements are the most important part when designing a webpage. Containers are the building blocks of HTML structure. HTML tags have a property to nest inside each other. This property is generally called nesting or a container. By using this property in a correct order, HTML tags can be placed in proper places. This will then create a more structured source code of a web page. Here,
we will teach you how to work with containers in HTML.

Step # 1 – Making a Container in the Head Tag

In this tutorial, we will guide you on how to work with container in html. In HTML, containers are said to be an area which is enclosed by opening and closing tags. It is also called an area or a component which has other components placed in it. In order to understand it more clearly, open up the HTML code of any webpage that you have recently created.
Now enter “<head>” before the “Title” tag and enter the closing tag which is “</head>” after the “Closing Title” tag.
This will serve as a container as the “Head” tag contains the “Title” tag in it.

Creating a container in Head tag

Step # 2 – Making a Container in the Body Tag

Once you have created a container in the Head Tag, similarly after the “Body” tag, insert “<h1>” and put the heading in it. Once you are done, then enter “</h1>” which will create a heading on your page. Now insert “<p>” and “</p>” on both sides of your main body text to create a paragraph.

Creating a container in Body tag

Step # 3 – Display the HTML Page

In the final step after creating container tags in the source code, go to the “File” menu and save your settings. Now double click on its icon to open the page in your windows default web browser. Here you can view that all your settings have been applied successfully. In this manner, you can work with HTML container elements.

Viewing the HTML page