What are empty elements in HTML ?

20 Aug, 2021
In this article, we will see the empty tags in HTML & we will also focus on the purpose of using an empty tag. An empty element is a component that doesn’t have any embedded elements or text elements. Empty elements do not have successor nodes. In other words, the tags that do not contain any closing tags are empty tags. Empty tags contain only the opening tag but they perform some action in the webpage.
Syntax:
<tag_name>
An element that does not have an enclosing tag is called an empty element. Adding the closing tags to the empty elements will be invalid syntax. The empty elements don’t have any child nodes. In short, Empty elements are self-closing or void and not container tags. The empty elements are used to embed images, lists, breaks, horizontal lines, hyperlinks, for input, meta-data, area, etc. For instance, <p> tag had a closing tag hence it was not an empty element.
The below are the lists of empty elements using in HTML:
It is used to map a portion of an image to make it clickable by the end-user. It is used to direct the user to different links after the user clicks on the mapped portions of the image. It is used as a child tag of the <map> tag. 
For all relative URLs in a document, the base URL is specified to use with the <base> element. Only one <base> element can be used in a document.
The <br> element is used for a line break in a text (can also be called carriage-return). It is useful in the case of writing an address, story, blogs, etc where the long sentence needs to break for clear visibility.
The <col> tag in HTML is used to set the column properties for each column within a <colgroup> tag. This tag is used to set the style property to each column. This tag does not contain closing tags.
The <embed> tag in HTML is used for embedding external applications which are generally multimedia content like audio or video into an HTML document. It is used as a container for embedding plug-ins such as flash animations.
A thematic break between paragraph-level components is represented by the <hr> element. For instance, a change of shift in the topic within a section.
The <img> element is used to embed an image into the document.
This empty element is used to create interactive controls for web-based applications and forms, for accepting the information from the user such as an address, name, phone number, etc, depending on a variety of types of input data and control widgets are available. All the input types and attributes are used inside the <input> element.
The HTML element <link> is used to establish a connection between the current content and an external resource. For instance, we can use it to link the external stylesheet or javascript file, etc.
The <meta> HTML element represents metadata i.e., information of a information.
The <param> tag in HTML is used to define a parameter for plug-ins which is associated with <object> element. It does not contain the end tag.
The <source> element is an empty element that provides various media resources for the <image>, <audio>, or <video> elements.  It provides the same media material in several file formats to ensure compatibility with a wide variety of browsers, as image and media file formats are supported by the browsers differently.
The <track> tag specifies text tracks for media components audio and video. This part is employed to specify subtitles, caption files, or different files containing text, that ought to be visible once the media is taking part in. The <track> element is an empty HTML element that is used as a child of the audio and video media components. It allows you to define timed text tracks (or time-based data), for example, to handle subtitles automatically. WebVTT format (.vtt files) — Web Video Text Tracks — is used for the tracks.
The <wbr> tag in HTML stands for word break opportunity and is used to define the position within the text which is treated as a line break by the browser. It is mostly used when the used word is too long and there are chances that the browser may break lines at the wrong place for fitting the text.
The below code example illustrates the use of empty elements. We have used only a few of them here.
Example:
HTML
<!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" />    <title>Empty Element</title>  </head>      <body>    <base href="https://www.geeksforgeeks.org/" />    <h2>br tag</h2>    5th Floor, A-118,<br />    Sector-136, Noida,<br />    Uttar Pradesh - 201305<br />    <h2>hr tag</h2>    <hr />    <h2>col tag</h2>    <table>      <colgroup>        <col span="2" style="background-color: green" />        <col style="background-color: red" />      </colgroup>      <tr>        <th>Sr. no</th>        <th>Title</th>        <th>Price</th>      </tr>      <tr>        <td>1234</td>        <td>GeeksForGeeks</td>        <td>$10</td>      </tr>    </table>    <h2>img tag</h2>    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png"      width="300"      height="119"/>    <h2>input tag</h2>    <form action="page.html" method="post">      <input type="submit" />    </form>  </body></html>
Output:
HTML-Basics
HTML-Questions
HTML-Tags
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
REST API (Introduction)
CSS to put icon inside an input element in a form
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array