Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Container and Empty Tags in HTML
HTML employs predefined tags to instruct the browser on how to display the content. Tags are nothing more than a few instructions that are encased in angle brackets (i.e., <>). Although tags are utilized across a website, many visitors are frequently unclear as to whether a given tag is a container or empty tag. They are confused since they are unsure of which tags require an ending tag in addition to the opening tag. In HTML, there are two different categories of tags −
Empty
Container
Now, let's dive into the article for getting better understanding on container and empty tags in HTML. Let's discuss one by one
HTML Container Tags
Container tags typically have three components − an opening tag, content (which the browser will display), and a closing tag. They may also include some extra tags in the content section. These opening and closing tags, which are also known as ON and OFF tags, are used in pairs and are named start tag and end tag. If you neglect to close the container tag, the browser will continue to use the opening tag's effects all the way to the end of the page. So be careful when working with container tags. Container tags comprise the majority of the tags in HTML.
Syntax
Following the syntax for HTML container tags
<tagname>….</tagname>
Commonly Used Tags
Let's look into the commonly used container tags in HTML
Essential Tags
These tags are used for the formation of the structure of the webpage.
<html>…</html> − This indicates the beginning and finish of the webpage and indicates that it is an HTML document. This includes all other tags that are used to create a webpage and are in between these tags.
<head>..</head> − This tag is used to specify the document's head section, which includes data relating to the webpage.
<title>..</title> − This tag stores a description of the webpage; whatever information is provided in these tags is displayed on the tab name when the browser opens the tab. In the head tag, it is described.
<body>..</body> − This tag is used to show the viewer all of the information or data on the webpage, including text, images, hyperlinks, videos, etc.
Headings
This tags are used for the creation of the headings in the webpage.
<h1>…</h1> to <h6>…</h6> − This tag is used to include the headers from different sizes, ranging from 1 to 6.
Text Formatters
This tags are used for text formatting in the webpage.
<p>….</p> − This tag is used to include the paragraphs on the user requirement.
<b>….</b> − This tag is used to make the contained text bold.
<i>…</i> − This tag is used to make the contained text italic.
Hyperlinks
This tag is used to define a hyperlink in the webpage
<a href="link">…</a> − The <a...>...</a>tag is used to add hyperlinks to other webpages when linking to other webpages.
Button Tag
This tag is used to create a clickable button on the webpage.
<button>…</button> − The main application of this is manipulation, which is accomplished by adding events and many other methods.
Division Tag
This tag is used to create a division in the webpage.
<div>…</div> − This describes a section in a document. Using the <div>...</div> tag, the webpage can be separated into different sections.
Script Tag
This tag is used to add a JavaScript to the webpage.
<script>..</script> − specify the JavaScript code which acts interactivity to the webpage.
Lists
This tag is used to format the data in the form of ordered list or unordered list.
<ol>…</ol> − Is used to create ordered lists.
<ul>…</ul> − Is used to create unordered lists.
<li>…</li> − Is used to add list items.
Example
Following is the example, where we are going to use the container tags in the webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Containe Tags</title>
</head>
<body>
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
<p>Add the text of yor wish. which looks like a paragraph.</p>
<h4> Link </h4>
<a href="https://www.tutorialspoint.com/index.htm">TutorialsPoint</a>
<ol>
<li>ListItem1</li>
<li>ListItem2</li>
<li>ListItem3</li>
<li>ListItem4</li>
</ol>
</body>
</html>
When we execute the above code, the output window will pop up, displaying all the content that falls in between the tags on the webpage.
HTML Empty Tags
Empty tags are those that have no closing tags. Empty tags do something on the webpage despite only having the opening tag.
Syntax
Following is the syntax for the HTML empty tags
<tagname>
Now, let's have a look on some of the empty tags that are used frequently in the HTML.
<br> − It is used to insert a line break in a webpage wherever the user wants.
<hr> − It is used to insert a horizontal line wherever needed in the webpage.
<img> − This tag is used to show the images that were specified in the src property of the tag on the website.
<input> − This is primarily used with forms to collect user input, and we can specify the type of input as well.
<link> − It is primarily used to link CSS files when we store our CSS in an external file since it may be used to link other external files and documents to the webpage.
<meta> − Contains all the webpage's metadata. The head tag describes metadata, which is data about data.
<source> − when it is necessary to include an external media source on the webpage. Any media source, including audio, video, and so on, can be added to our website using the source tag.
Example
Consider the following example, where we are going to use empty tags in our webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<hr>
<p>Welcome To The TutorialsPoint</p>
<hr>
<p>Line <br>Break </p>
<img src="https://www.tutorialspoint.com/images/logo.png?v2" alt="Logo" width="150" height="20">
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<br>
</form>
<video width="320" height="240" controls>
<source src="https://player.vimeo.com/external/415068616.hd.mp4?s=e6dc106b7cccb956aa1d00d705e440977290df18&profile_id=174&oauth2_token_id=57447761.mp4" type="video/mp4">
</video>
</body>
</html>
On running the above code, the output window will pop up, displaying all the empty tag content on the webpage that we have used.
587 Views
