Scribd
Upload
1K views

Container and Empty Tags in HTML

The document discusses two types of tags in HTML - container tags and empty tags. Container tags have opening and closing tags that enclose content, like paragraphs <p>Content</p>. Empty tags only have an opening tag and are used for actions like line breaks <br>. Common container tags include headings, paragraphs, and lists. Common empty tags include line breaks, images, and inputs. The document provides examples of container and empty tags used to structure a basic HTML page.

Uploaded by

devendra
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1K views

Container and Empty Tags in HTML

The document discusses two types of tags in HTML - container tags and empty tags. Container tags have opening and closing tags that enclose content, like paragraphs <p>Content</p>. Empty tags only have an opening tag and are used for actions like line breaks <br>. Common container tags include headings, paragraphs, and lists. Common empty tags include line breaks, images, and inputs. The document provides examples of container and empty tags used to structure a basic HTML page.

Uploaded by

devendra
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Container and Empty Tags in HTML

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

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 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.

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.
Syntax:
<tag_name>
Some commonly used empty tags are:
1. <br>: Inerts a line break in a webpage wherever needed.
2. <hr>: Inserts a horizontal line wherever needed in the
webpage.
3. <img>: This tag is used to display the images on the
webpage which were given in the src attribute of the tag.
4. <input>: This is mainly used with forms to take the input
from the user and we can also define the type of the input.
5. <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.
6. <meta>: Contains all metadata of the webpage. Metadata is
the data about data and is described in the head tag.
7. <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:
<!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>web page</title>
</head>
<!-- Whatever content in body tag appears on the webpage-->
<body>
<!--Headings-->
<h1> Heading1</h1>
<h2> Heading2</h2>
<h3> Heading3</h3>
<h4> Heading4</h4>
<h5> Heading5</h5>
<h6> Heading6</h6>

<p> This is a paragraph.</p>


<!--For horizontal line -->
<hr>
<!--For paragraphs -->
<p>computer science portal</p>
<hr>
<p> This is a <br> line break </p>
<h4> Link </h4>
<a href=" https://www.google.com/"> Geeks For
Geeks</a>
<!--For ordered lists-->
<ol>
<li> Item1</li>
<li> Item2 </li>
<li> Item3 </li>
<li> Item4</li>
</ol>
</body>
</html>

You might also like