Open In App

What are empty elements in HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

An empty element is a component that doesn’t have any embedded elements or text elements. Empty tags contain only the opening tag but they perform some action in the webpage. For example, <br> tag is an empty tag.

In this article, we will see the empty tags in HTML & we will also focus on the purpose of using an empty tag.

Syntax:

<tag_name>

List of Empty Elements used in HTML:

Empty Elements  

Description

<area>

It maps clickable zones in an image, guiding users to different links. It’s a child of <map>, enabling interactive image navigation. 

<base>

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.

<br>

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.

<col>

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.

<embed>

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.

<hr>

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.

<img>

The <img> element is used to embed an image into the document.

<input>

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.

<link>

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.

<meta>

The <meta> HTML element represents metadata i.e., information of a information.

<param>

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.

<source>

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.

<track>

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.

<wbr>

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.

Example: The implementation of empty elements

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=
         height="119" />
    <h2>input tag</h2>
    <form action="page.html" method="post">
        <input type="submit" />
    </form>
</body>
  
</html>


Output:



Last Updated : 10 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads