What are Self Closing Tags in HTML?

Last Updated : 14 Oct, 2024

Self-closing tags, also known as void elements, are HTML elements that do not require a separate closing tag. These tags are self-contained and are typically used for elements that do not have any content between an opening and closing tag. Self-closing tags help keep the HTML structure clean and concise.

These are the following topics that we are going to discuss:

Table of Content

Self-Closing Tags
Common Self-Closing Tags
How to Use Self-Closing Tags?
Importance of Self-Closing Tags
Differences in HTML Versions
Conclusion

Self-Closing Tags

In HTML, a self-closing tag is an element that does not need an explicit closing tag. It is written in a single line, and the tag is "closed" by including a forward slash (/) before the closing angle bracket (>). While HTML5 does not strictly require the use of the forward slash in self-closing tags, it is still considered a good practice for compatibility with XML.

Common Self-Closing Tags

Some of the most common self-closing tags in HTML include:

<img>: Used to embed images.
<br>: Inserts a line break.
<hr>: Creates a horizontal rule (line).
<input>: Defines an input control.
<meta> tag: Provides metadata about the HTML document.
<link> tag: Used to link external resources like stylesheets.

How to Use Self-Closing Tags?

To use self-closing tags in HTML, simply write the tag followed by a forward slash before the closing angle bracket.

Syntax:

<img src="image.jpg" alt="Description of image" />

Example: This example demonstrates the use of various self-closing tags within an HTML document.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Self-Closing Tags Example</title>
</head>

<body>
    <h1>Self-Closing Tags in HTML</h1>

    <h2>Image Example</h2>
    <img src="https://media.geeksforgeeks.org/gfg-gg-logo.svg" 
         alt="Placeholder Image" />

    <h2>Line Break Example</h2>
    <p>This is a paragraph.<br>This line breaks.</p>

    <h2>Horizontal Rule Example</h2>
    <hr />

    <h2>Input Example</h2>
    <form>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" />
        <input type="submit" value="Submit" />
    </form>
</body>

</html>

Output:

Importance of Self-Closing Tags

Self-closing tags are important for several reasons:

Simplification: They reduce the amount of code written, making it cleaner and easier to maintain.
Performance: Less code can lead to faster parsing by browsers, improving overall performance.
Consistency: Using self-closing tags helps maintain a consistent and predictable structure in HTML documents.

Differences in HTML Versions

It's important to note that the rules regarding self-closing tags have evolved across different versions of HTML:

HTML5: In HTML5, self-closing tags do not require a forward slash. For example, <img src="image.jpg" alt="Description of image"> is valid.
XHTML: In XHTML, self-closing tags must include the forward slash, as it adheres to XML standards. For example, <img src="image.jpg" alt="Description of image" /> is necessary.

Conclusion

Self-closing tags are an essential part of HTML that simplify the markup structure and enhance code readability. Understanding their usage and the differences across HTML versions is crucial for web developers. By effectively using self-closing tags, developers can create cleaner and more efficient web pages.