HTML Empty Elements - List of Singleton HTML5 Tags

1. Empty HTML Elements or Singleton Tags

1.1. What are Empty HTML Tags?

In HTML language, we write markup as a singular tag or a pair of tags i.e the opening and closing tag. The usual practice is to write the HTML5 tag as starting and the ending tag to form an HTML element. However, certain HTML elements have no ending tag, and therefore, we include them as the opening tags only. These types of HTML5 tags are known as empty HTML elements or singleton tags. Further, the empty HTML elements are also known as void elements.

1.2. Syntax of Empty HTML Elements

The syntax of empty HTML tags is not so much different from the ordinary HTML5 elements. Usually, the singleton HTML tags have below syntax representation.

<tag-name attribute="attribute-value" />

2. Background of Empty HTML Tags

Since HTML language is derived and has a strong influence from SGML, therefore, the concept of empty tags also came from this language.

• As the HTML documentation says, the allowed content for an element is known as the content model.
• Also, the types of HTML elements that are defined to have no content model are known as empty tags.
• As HTML4 specs say, the content model for such elements is declared using the keyword EMPTY.
• This keyword EMPTY forces HTML not to accept any content for that specific element.
• Moreover, the O letter in the below instance indicates that the closing tag can be omitted.
• But, the inclusion of the EMPTY keyword makes it a must to omit the ending tag.

<!ELEMENT IMG - O EMPTY>

3. Basics of Empty HTML5 Elements

3.1. Syntax Basics

• The syntax of an empty HTML element has only a single tag.
• Typically, this single tag is a self-closing tag and hence, no ending tag is included.
• Moreover, we include the data of an empty HTML element within the single tag i.e between the < and > as attributes.
• Further, we can insert any suitable and valid attributes as required.

3.2. Is it Necessary to Add Closing Slash for Empty HTML5 Elements?

• Usually, when we can write an empty HTML element as <br> tag.
• But, we include a forward slash / at the end of the singleton HTML tags to meet the XHTML requirements.
• Moreover, the WC3 HTML5 spec says that the terminating slash and space are optional for singleton tags.
• Hence, <br>, <br />, and <br/> all tag varients are valid HTML empty elements
• Also, we call these elements self-closing tags due to the trailing slash /.

3.3. Can we Define Our Own Singleton HTML Elements?

In a single word, we can say no to this question.

• The reason is that the custom HTML tags must always contain a hyphen - as <my-custom-element>
• Also, a custom HTML5 element must have an opening tag and a closing tag like <my-custom-element> and </my-custom-element>.
• Therefore, any self-closing custom element i.e. <custom-element / will be considered invalid in XML, XHTML, and even in HTML also.

4. List of All Empty HTML5 Elements

Following are all the empty HTML5 elements that we can include in our HTML documents.

1. HTML <area> Tag

It denotes the area inside an image map.

2. HTML <base> Tag

The base tag creates a base URL in the head section of the document and it must be in the head section. This URL is then interpreted by the subsequent URLs as their base path.

3. HTML <basefont> Tag

In HTML 4, the base font tag was utilized to set the base properties of text like font size, font color, font-family, etc. This tag is now deprecated and is not useable in HTML 5.

4. HTML <bgsound> Tag

We were able to attach some sound track to the current document that would paly in background. Currently, this HTML singleton tag is obsolete or deprecated.

5. HTML <br> Tag

This is a line break tag and is often used to create a single line break in the paragraph. Importantly, we should not use this to make a visual separation between different sections or paragraphs.

6. HTML <col> Tag

A <colgroup> has this tag and defines the column's properties for every column in an HTML table.

7. HTML <command> Tag

The command tag creates a command for a user to invoke.

8. HTML <!-- Comment --> Tag

It is the comment tag in HTML. This tag has this sort of representation with an exclamation mark and dashes. Also, it does not display on the screen. Rather it creates comments in the document for the developer.

9. HTML <!Doctype HTML> Tag

This is the very first tag in every HTML document. It tells the browser how to interpret the subsequent tags or markup. Also, the different versions of HTML have different values.

10. HTML <embed> Tag

It defines a container for an external application or interactive content.

11. HTML <hr> Tag

It creates a horizontal rule to separate two sections on the screen. But we mainly get this result using CSS borders.

12. HTML <img> Tag

Fortunately, when there is a need to enhance the aesthetics of the document, HTML facilitates us with HTML <img> tag.

13. HTML <input> Tag

We utilize the <input> tag in conjunction with HTML <form> element. Its main use is to create a button, text input, checkbox, etc.

14. HTML <isindex> Tag

It is a deprecated HTML tag. Its previous use was putting a text field on the page to query the document.

15. HTML <keygen> Tag

In HTML forms, this tag creates a key-pair generator field.

16. HTML <link> Tag

It creates a linkage between the current document and an external CSS stylesheet. It has nothing to do with the HTML anchor links or hyperlinks.

17. HTML <meta> Tag

The meta tag has information about the document that is useful for Search Engines. Also, there are many meta tags and we add them in the HTML head section.

18. HTML <param> Tag

A plugin defines its parameters with this tag.

19. HTML <plaintext> Tag

When we incorporate this element in our markup, all other text and elements after this singleton tag will render as a plain text. However, the use of this element is now dropped and hence deprecated.

20. HTML <source> Tag

It allows us to add alternative file paths for media files like HTML videos, audio, or images.

21. HTML <track> Tag

This tag sets a track for media files.

22. HTML <wbr> Tag

Likewise <br> it tells the browser to add a word break/line break in a text or a paragraph.