Open In App

Container and Empty Tags in HTML

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:

Table of Content

Container 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 are 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 done 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.

Empty Tags

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. Some commonly used empty tags are as:

Syntax:

<tag_name>

Empty Tags

Description

<br>

Inserts 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>
        Geeks For Geeks
    </a>
    <!--For ordered lists-->
    <ol>
        <li> Item1</li>
        <li> Item2 </li>
        <li> Item3 </li>
        <li> Item4</li>
    </ol>
 
</body>
 
</html>


Output:

Example 2: This example demonstrates the use of empty tags with an example.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Empty Tags Example</title>
 
    <!-- External CSS Link -->
    <link rel="stylesheet"
          href="styles.css">
 
    <!-- Metadata -->
    <meta name="description"
          content="A webpage with examples of empty tags">
 
</head>
 
<body>
 
    <!-- Line Break (br) -->
    <p>This is a line of text.<br>Here is a new line.</p>
 
    <!-- Horizontal Line (hr) -->
    <hr>
 
    <!-- Image (img) -->
         alt="An example image">
 
    <!-- Input (input) -->
    <label for="username">Username:</label>
    <input type="text" id="username" name="username"
           placeholder="Enter your username">
 
    <!-- External Media Source (source) -->
    <audio controls>
        <source src="audio.mp3" type="audio/mp3">
        Your browser does not support the audio tag.
    </audio>
 
</body>
 
</html>


Output:

Screenshot-2023-12-20-222827



Last Updated : 16 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads