Container and Empty Tags in HTML - GeeksforGeeks

06 Jun, 2021
HTML uses predefined tags that tell the browser how to display the content. Tags are nothing but some instructions that are enclosed in angle braces(i.e., <>). Tags are used in many places of the webpage but many users are often confused about some tags whether it is a container or an empty tag. They get this confusion because they don’t know for what tag there should be an ending tag along with the opening tag or not. There are two types of tags in HTML:
Empty
Container
Now, let us see the definitions and examples of the most commonly used HTML container and empty tags.
Container tags are generally divided into three parts, i.e., opening tag, content(which will display on the browser), and closing tag. In the content part, they can also contain some other tags. These opening and closing tags are used in pairs which are start tag and end tag, which is often called ON and OFF tags. If you forget to close the container tag, the browser applies the effect of the opening tag until the end of the page. So be careful while working with container tags. The majority of tags present in HTML are container tags. 
Syntax:
<tag_name> ...</tag_name> 
Some commonly used container tags are:
1. Essential Tags: Following tags are used to create the structure of the webpage:
<html>....</html>: This marks the beginning and ending of the webpage also it tells that the document is an HTML document. This contains all other tags in between these tags which are considered for making a webpage.
<head>...</head>: This tag is used to define the head part of the document which contains the information related to the webpage.
<title>...</title>: This tag stores the description of the web page, whatever given in these tags appears on the tab name while opened by the browser. It is described in the head tag.
<body>....</body>: This tag is used to display all the information or data, i.e, text, images, hyperlinks videos, etc., on the webpage to the user.
2. Headings: Following tags are used for headings:
<h1>....</h1> to <h6>...</h6>: It is used for including headings of different sizes ranging from 1 to 6.
3. Text formatters: Following tags are used for text formatting:
<p>....</p>: When paragraphs are needed to be included, this tag is used
<b>....</b>: Makes the contained text to bold.
<i>...</i>: Makes the contained text to italic.
4. HyperLinks: Following tag is used to define a hyperlink in the webpage:
<a href=”link.com”>...</a>: When we link some other webpages we add the hyper links to other webpages using this <a ...>...</a>tag.
5. Button tag: Following  tag is used to create a click button:
<button>...</button>: This is used in many ways but mainly used to manipulate dom by adding events and many more.
6. Division tag: Following tag is used to create a division:
<div>....</div>: This defines a section in a document. The webpage can be divided to different sections using the <div>....</div> tag.
7. Iframe tag: Following tag is used for inline framing:
<iframe src=”link.com> </iframe>: When some other document is to be embedded like some video or image into HTML we use this tag.
8. Navigation tag: Following tag is used to set a navigation link:
<nav>...</nav>: Defines a navigation bar that contains a set of menu or a menu of hyperlinks.
9. Script tag: Following  tag is used to add JavaScript code to the webpage:
<script>...</script> : This contains the javascript code that adds interactivity to the webpage.
10. Lists: Following tags are used to write data in the form of ordered and unordered lists:
<ol>...</ol>: This tag is used to create ordered lists.
<ul>...</ul>: This tag is used to create unordered lists.
<li>...</li>: This tag is used to add list items.
The tags that do not contain any closing tags are known as empty tags. Empty tags contain only the opening tag but they perform some action in the webpage.
Syntax:
<tag_name>
Some commonly used empty tags are:
<br>: Inerts a line break in a webpage wherever needed.<hr>: Inserts a horizontal line wherever needed in the webpage.<img>: This tag is used to display the images on the webpage which were given in the src attribute of the tag.<input>: This is mainly used with forms to take the input from the user and we can also define the type of the input.<link>: When we store our CSS in an external file this can be used to link external files and documents to the webpage and it is mainly used to link CSS files.<meta>: Contains all metadata of the webpage. Metadata is the data about data and is described in the head tag.<source>: When an external media source is needed to be included in the webpage. source tag is used to insert any media source like audio, video etc... in our webpage.
<br>: Inerts a line break in a webpage wherever needed.
<hr>: Inserts a horizontal line wherever needed in the webpage.
<img>: This tag is used to display the images on the webpage which were given in the src attribute of the tag.
<input>: This is mainly used with forms to take the input from the user and we can also define the type of the input.
<link>: When we store our CSS in an external file this can be used to link external files and documents to the webpage and it is mainly used to link CSS files.
<meta>: Contains all metadata of the webpage. Metadata is the data about data and is described in the head tag.
<source>: When an external media source is needed to be included in the webpage. source tag is used to insert any media source like audio, video etc... in our webpage.
Example:
This example demonstrates the use of container and empty tags:
HTML
<!DOCTYPE html><html lang="en"><head>    <!--Meta data-->    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">          <!--The description written on title tag get appeared as browser tab name-->    <title>Geeks For Geeks </title>  </head><!-- Whatever content in body tag appears on the webpage--><body>    <!--Headings-->    <h1> Geeks For Geeks </h1>    <h2> Geeks For Geeks </h2>    <h3> Geeks For Geeks </h3>    <h4>Geeks For Geeks </h4>    <h5> Geeks For Geeks</h5>    <h6> Geeks For Geeks </h6>      <p> This is a paragraph.</p>       <!--For horizontal line -->     <hr>     <!--For paragraphs -->      <p> Geeks for geeks is a computer science portal for geeks. </p>     <hr>      <p> This is a <br> line break </p>      <h4> Link </h4>    <a href="https://www.geeksforgeeks.org/"> Geeks For Geeks</a>    <!--For ordered lists-->    <ol>        <li> Item1</li>        <li> Item2 </li>        <li> Item3 </li>        <li> Item4</li>    </ol>      </body></html>
Output: 
HTML-Tags
Picked
class 6
HTML
School Learning
School Programming
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of Computers
What are Different Output Devices?
What is Computer Networking?
Software and its Types
What is Internet? Definition, Uses, Working, Advantages and Disadvantages
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property