Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Container and Empty Tags in HTML
HTML uses predefined tags to instruct the browser on how to display content. Tags are instructions enclosed in angle brackets (< >). Understanding the difference between container and empty tags is crucial for writing proper HTML code. In HTML, there are two main categories of tags
Container Tags Require both opening and closing tags
Empty Tags Have only an opening tag with no closing tag
Let's explore both types of tags and understand their proper usage in HTML documents.
HTML Container Tags
Container tags have three components an opening tag, content, and a closing tag. They are also known as paired tags because they work in pairs. If you forget to close a container tag, the browser will apply the tag's effects to the rest of the page, which can break your layout.
Syntax
Following is the syntax for HTML container tags
<tagname>Content goes here</tagname>
The closing tag includes a forward slash (/) before the tag name to indicate the end of the element.
Categories of Container Tags
Essential Document Structure Tags
<html>...</html> Defines the entire HTML document
<head>...</head> Contains metadata about the document
<title>...</title> Sets the page title shown in browser tabs
<body>...</body> Contains all visible content on the webpage
Heading Tags
<h1>...</h1> to <h6>...</h6> Create headings from largest (h1) to smallest (h6)
Text Formatting Tags
<p>...</p> Defines paragraphs of text
<b>...</b> Makes text bold
<i>...</i> Makes text italic
<strong>...</strong> Indicates important text (bold by default)
<em>...</em> Emphasizes text (italic by default)
Other Common Container Tags
<a href="url">...</a> Creates hyperlinks to other pages or resources
<div>...</div> Defines sections or divisions in the document
<span>...</span> Groups inline elements for styling
<button>...</button> Creates clickable buttons
<script>...</script> Embeds JavaScript code
List Tags
<ul>...</ul> Creates unordered (bulleted) lists
<ol>...</ol> Creates ordered (numbered) lists
<li>...</li> Defines individual list items
Example Container Tags
Following example demonstrates various container tags in use
<!DOCTYPE html>
<html lang="en">
<head>
<title>Container Tags Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h1>Welcome to TutorialsPoint</h1>
<h2>HTML Tutorial</h2>
<p>This is a <b>paragraph</b> with <i>italic</i> and <strong>strong</strong> text.</p>
<h3>Navigation</h3>
<a href="https://www.tutorialspoint.com">Visit TutorialsPoint</a>
<h3>Course List</h3>
<ol>
<li>HTML Basics</li>
<li>CSS Styling</li>
<li>JavaScript Programming</li>
</ol>
<button>Click Here</button>
</body>
</html>
The output displays all container tag content properly formatted
Welcome to TutorialsPoint (large heading) HTML Tutorial (medium heading) This is a paragraph with italic and strong text. Navigation (smaller heading) Visit TutorialsPoint (hyperlink) Course List (smaller heading) 1. HTML Basics 2. CSS Styling 3. JavaScript Programming [Click Here] (button)
HTML Empty Tags
Empty tags (also called void elements or self-closing tags) contain no content and have no closing tag. They perform specific functions like inserting line breaks, displaying images, or linking external resources. In XHTML and XML, empty tags can be written with a slash before the closing bracket (<br />), but this is optional in HTML5.
Syntax
Following is the syntax for HTML empty tags
<tagname>
Alternatively, you can use the self-closing syntax (optional in HTML5)
<tagname />
Commonly Used Empty Tags
<br> Inserts a line break
<hr> Creates a horizontal rule (line separator)
<img> Displays images using the
srcattribute<input> Creates form input fields of various types
<link> Links external resources like CSS files
<meta> Provides metadata about the document
<source> Specifies media resources for audio/video elements
<area> Defines clickable areas in image maps
<base> Sets the base URL for relative links
<col> Defines column properties in tables
Example Empty Tags
Following example demonstrates various empty tags in action
<!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>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Welcome to TutorialsPoint</h2>
<hr>
<p>First line of text<br>Second line after line break</p>
<hr>
<img src="https://www.tutorialspoint.com/images/logo.png" alt="TutorialsPoint Logo" width="200" height="50">
<h3>Contact Form</h3>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The output displays all empty tag elements functioning correctly
Welcome to TutorialsPoint ___________________________ (horizontal line) First line of text Second line after line break ___________________________ (horizontal line) [TutorialsPoint Logo Image] Contact Form Name: [____________] Email: [____________] [Submit]
3K+ Views
