Is container tag same as the empty tag in HTML? If not, why ?
Last Updated :
02 Feb, 2022
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.
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.
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=
"https://media.geeksforgeeks.org/wp-content/uploads/20220125210128/gfglogo.png"
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.
Eg.: <p><br></p>.
| Empty tags do not contains any tag, it use only attributes inside in it.
Eg: <img src="" alt="">.
|
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.
|
Similar Reads
Non-linear Components In electrical circuits, Non-linear Components are electronic devices that need an external power source to operate actively. Non-Linear Components are those that are changed with respect to the voltage and current. Elements that do not follow ohm's law are called Non-linear Components. Non-linear Co
11 min read
HTML Tutorial HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It tells the web browser how to display text, links, images, and other forms of multimedia on a webpage. HTML sets up the basic structure of a website, and then CSS and JavaScript
11 min read
Spring Boot Tutorial Spring Boot is a Java framework that makes it easier to create and run Java applications. It simplifies the configuration and setup process, allowing developers to focus more on writing code for their applications. This Spring Boot Tutorial is a comprehensive guide that covers both basic and advance
10 min read
Class Diagram | Unified Modeling Language (UML) A UML class diagram is a visual tool that represents the structure of a system by showing its classes, attributes, methods, and the relationships between them. It helps everyone involved in a project—like developers and designers—understand how the system is organized and how its components interact
12 min read
3-Phase Inverter An inverter is a fundamental electrical device designed primarily for the conversion of direct current into alternating current . This versatile device , also known as a variable frequency drive , plays a vital role in a wide range of applications , including variable frequency drives and high power
13 min read
Backpropagation in Neural Network Back Propagation is also known as "Backward Propagation of Errors" is a method used to train neural network . Its goal is to reduce the difference between the model’s predicted output and the actual output by adjusting the weights and biases in the network.It works iteratively to adjust weights and
9 min read
What is Vacuum Circuit Breaker? A vacuum circuit breaker is a type of breaker that utilizes a vacuum as the medium to extinguish electrical arcs. Within this circuit breaker, there is a vacuum interrupter that houses the stationary and mobile contacts in a permanently sealed enclosure. When the contacts are separated in a high vac
13 min read
Polymorphism in Java Polymorphism in Java is one of the core concepts in object-oriented programming (OOP) that allows objects to behave differently based on their specific class type. The word polymorphism means having many forms, and it comes from the Greek words poly (many) and morph (forms), this means one entity ca
7 min read
CTE in SQL In SQL, a Common Table Expression (CTE) is an essential tool for simplifying complex queries and making them more readable. By defining temporary result sets that can be referenced multiple times, a CTE in SQL allows developers to break down complicated logic into manageable parts. CTEs help with hi
6 min read
Python Variables In Python, variables are used to store data that can be referenced and manipulated during program execution. A variable is essentially a name that is assigned to a value. Unlike many other programming languages, Python variables do not require explicit declaration of type. The type of the variable i
6 min read