In this article, we will see the container tag & empty tag in HTML, along with knowing how they’re different from each other. The Container tag is not the same as the empty tag & these are two different categories of tags used in HTML.
Container tag: This tag contains 3 parts, namely, the opening tag, content that will be displayed in the browser & the closing tag. If we forget to add the closing tag then the browser will continue to implement the effect of that opening tag on the content inside of that tag. This will deform the structure of the overall webpage.
Syntax:
<Tag_Name> Content </Tag_Name>
List of commonly used Container Tags:
-
Root Tags of HTML Document: These are some root elements of every HTML document, without including these tags in HTML we can not create web pages.
- <html></html>: It is the root element of an HTML document that indicates the start & end of the webpage, along with rendering the content which is inside of it.
- <head></head>: This tag contains some abstract information related to the webpage, which is not directly displayed but utilized to enhance the overall webpage.
- <title></title>: This tag contains the title of the HTML document that is shown in the browser tab. It is described inside the head tag.
- <body></body>: The body tag contains all the data that will be visible on the webpage.
- Heading Tags: Heading tags are used to provide headings of different text sizes and styles to your web page. Heading tags vary from <h1> to <h6>.
-
Lists: There are 3 different list tags used for listing different items in a particular way, which is given below:
- <ol></ol>: This list tag is used to list the items in a particular order ie., numerical, alphabetical, or roman numerals. The <li> tag is used to add list items inside of it.
- <ul></ul>: This list tag is used to list the items in bulleted form. The shape of the bullet can be changed to disc, circle & square. It also uses the <li> tag to add list items.
- <dl></dl>: This is an definition list tag. It uses <dt> the data term tag and <dd> the data description tag to add items inside it.
-
Text Formatters: These tags define the way in which text will be shown on the web page.
- <p></p>: This is the paragraph tag used to add text on the webpage.
- <b></b>: The bold tag is used to display the boldened text that is important on the web page.
- <i></i>: The italic tag display the text in the tilted form.
These are also some container tags that are generally used inside an HTML document.
- <div></div>: This tag is used to create a separate container on the web page that also can use other tags inside it.
- <a href=””></a>: This tag is used to provide links for different pages on the web page.
- <button></button>: This is a button tag that is used to form an button on the web page to perform some actions.
- <nav></nav>: The nav tag is used to build the navigation bar on the website.
- <script src=””></script>: The script tag is mainly used to link an external JavaScript file using src attribute or you can write JavaScript code inside this tag directly in HTML document.
- <iframe src=””></iframe>: Iframe tag is used to display nested web pages. It represents a web page inside another web page.
Example: The example below demonstrates the use of container tags in HTML.
<!DOCTYPE html> <html lang="en">
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Container tag & Empty tag in HTML
</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<h3>
Here are some common container
tags used in this code:
</h3>
<p>Hey! This is a paragraph.</p>
<h3>Below is an description list:</h3>
<dl>
<dt>GeeksforGeeks</dt>
<dd>
GeeksforGeeks is an online learning
platform for geeks around the globe.
</dd>
<dt>Notebook</dt>
<dd>
Notebook is a collection of pages
(plane or linear) that is used to
make notes of some important things.
</dd>
</dl>
<button>Click Me!</button>
</body>
</html>
|
Output:
Empty Tags: Empty tags are the tags that only contain the opening tags, they do not have any closing tag. Hence they don’t affect the webpage if we forget to close any empty tag.
Syntax:
<Tag_Name>
Here are some empty tags that are generally used in HTML documents:
- <input>: This tag is used to take input from users. It is mainly used inside a form tag.
- <img>: It is an image tag that is used to insert an image on the web page.
- <br>: The break tag is used to break the line and skip to the next line.
- <link>: The link tag is used to link the external CSS file to the current HTML document.
- <hr>: It is used to insert a horizontal line on the web page whenever needed.
- <source>: The source tag is used to insert an external media file to the web page that can be an Audio or Video file.
- <meta>: It stores the meta-information about the web page that is information about data that we don’t want to show to users on the web page.
Example: The below example illustrates the use of the empty tags in HTML.
<!DOCTYPE html> <html lang="en">
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Container tag & Empty tag in HTML
</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<h3>
Here are some common empty
tags used in this code:
</h3>
<p>Hey! This is a paragraph.</p>
<br>
<hr>
<img src=
alt="GFG_logo"
height="300px" width="300px">
</body>
</html>
|
Output:
S. No. |
Container Tags |
Empty Tags |
|---|---|---|
|
1. |
It contains the opening tag, content, & the closing tag. |
It has only the opening tag, & do not have any end tag. |
|
2. |
Container tags may contain the empty tag inside in it. |
Empty tags do not contains any tag, it use only attributes inside in it. |
|
3. |
Container tags can be used to define the behavior of text inside in it. |
Empty tag do not have any text content inside in it. |
|
4. |
The nesting of the tags can be possible in this case. |
The nesting of tags is not possible. |