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
Which HTML tags are self-closing?
HTML contains specific tags that are self-closing, meaning they do not require a separate closing tag. These tags represent elements that contain no content between opening and closing tags, such as line breaks, images, and form inputs. Self-closing tags end with a slash before the closing angle bracket (<tag />) in XHTML, though the slash is optional in HTML5.
Complete List of Self-Closing Tags
HTML5 defines the following self-closing (void) elements
<area> - Image map clickable areas <base> - Base URL for relative links <br> - Line breaks <col> - Table column properties <embed> - External content embedding <hr> - Horizontal rule/divider <img> - Images <input> - Form input fields <link> - External resource links <meta> - Document metadata <param> - Parameters for objects <source> - Media resource alternatives <track> - Text tracks for media <wbr> - Word break opportunities
Line Break Tag
The <br> tag creates a line break within text content. It forces the following content to appear on a new line without creating a new paragraph block.
Example
<!DOCTYPE html> <html> <head> <title>Line Break Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Contact Information</h2> <p>John Smith<br> 123 Main Street<br> New York, NY 10001<br> Phone: (555) 123-4567</p> </body> </html>
The output displays each line on a separate row
Contact Information John Smith 123 Main Street New York, NY 10001 Phone: (555) 123-4567
Horizontal Rule Tag
The <hr> tag creates a horizontal line across the page, typically used to separate content sections visually.
Example
<!DOCTYPE html> <html> <head> <title>Horizontal Rule Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Section One</h2> <p>This is content in the first section.</p> <hr> <h2>Section Two</h2> <p>This is content in the second section.</p> </body> </html>
The horizontal rule creates a clear visual separation between sections
Section One This is content in the first section. _________________________________ (horizontal line) Section Two This is content in the second section.
Form Input Fields
The <input> tag creates various types of form controls for user interaction. Each input type serves a specific data collection purpose, from text entry to file uploads.
Example
<!DOCTYPE html>
<html>
<head>
<title>Form Input Fields Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Registration Form</h2>
<form>
<label for="name">Full Name:</label><br>
<input type="text" id="name" name="name" placeholder="Enter your name"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" placeholder="Enter your email"><br><br>
<label for="age">Age:</label><br>
<input type="number" id="age" name="age" min="18" max="99"><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
The form displays three input fields and a submit button for user interaction.
Image Tag
The <img> tag displays images on web pages. It requires the src attribute to specify the image source and should include alt text for accessibility.
Example
<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Sample Image</h2>
<img src="https://via.placeholder.com/300x200/4CAF50/white?text=Sample+Image"
alt="Sample placeholder image"
width="300"
height="200">
<p>This is a placeholder image demonstrating the img tag.</p>
</body>
</html>
The image appears with the specified dimensions and alternative text for accessibility.
Table Column Styling
The <col> tag defines properties for table columns. It must be used within a <colgroup> element and allows styling of entire columns efficiently.
Example
<!DOCTYPE html>
<html>
<head>
<title>Table Column Styling</title>
<style>
table { border-collapse: collapse; width: 100%; }
td { padding: 10px; border: 1px solid #ccc; }
col:first-child { background-color: lightblue; }
col:nth-child(2) { background-color: lightgreen; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Styled Table Columns</h2>
<table>
<colgroup>
<col>
<col>
</colgroup>
<tr>
<td>Name</td>
<td>Department</td>
</tr>
<tr>
<td>Alice Johnson</td>
<td>Marketing</td>
</tr>
<tr>
<td>Bob Wilson</td>
<td>Development</td>
</tr>
</table>
</body>
</html>
The first column appears with a light blue background, and the second column has a light green background.
Base URL Tag
The <base> tag specifies the base URL for all relative links within a document. It should be placed in the document head and can only appear once per page.
Example
<!DOCTYPE html> <html> <head> <title>Base URL Example</title> <base href="https://www.example.com/"> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Navigation Links</h2> <p><a href="about">About Us</a> (resolves to https://www.example.com/about)</p> <p><a href="contact">Contact</a> (resolves to https://www.example.com/contact)</p> <p><a href="products/laptops">Laptops</a> (resolves to https://www.example.com/products/laptops)</p> </body> </html>
All relative links automatically resolve using the base URL as their foundation.
Metadata Tag
The <meta> tag provides metadata about the HTML document, such as character encoding, viewport settings, author information, and search engine directives.
Example
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Learn about HTML self-closing tags and their usage"> <meta name="keywords" content="HTML, self-closing, void elements"> <meta name="author" content="TutorialsPoint"> <title>Meta Tag Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Page with Metadata</h2> <p>This page includes various meta tags for SEO and browser optimization.</p> </body> </html>
Meta tags provide essential information to browsers and search engines for proper page handling and indexing.
External Resource Link
The <link> tag connects external resources like stylesheets, fonts, and icons to the HTML document. It establishes relationships between the current document and external files.
Example
<!DOCTYPE html> <html> <head> <title>External Resource Link</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <link rel="icon" href="/favicon.ico" type="image/x-icon"> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>External Resources Demo</h2> <p><i class="fas fa-home"></i> Home Icon (from Font Awesome)</p> <p><i class="fas fa-user"></i> User Icon</p> <p><i class="fas fa-envelope"></i> Email Icon</p> </body> </html>
The linked Font Awesome stylesheet provides icon fonts displayed throughout the page.
3K+ Views
