What Is a Void Element in HTML5?

What is a void element in HTML5?

“What is a void element in HTML5?” is one of the most common IT interview questions. Let us tell you all about how to answer this one! In HTML5, not all elements are required to have content. While some elements may have content, other cannot have any content included. These elements are called void elements precisely to point this out. The best possible example is an image because it cannot include any type of content. To clarify that this in HTML5 and to point out that you are adding an image, all you need to do is add the <img> tag.

What is a void element and how is it different from an element without any content?

As we mentioned above, in HTML there are two types of elements:

• Those that CAN have content ? that MAY or MAY NOT have content.
• Those that CANNOT have content.

To expand on our example, an image required the <img> tag and it cannot have any content. However, if we take a paragraph, which is an element that can have content, and we add the <p> and </p> tags, we will have an empty paragraph. This an element that does not have content because we chose it so. Therefore, it cannot be a void element because we can add content between the <p> tags and it will not be void of content any longer.

The Long List of Void Elements in HTML5

• <base> – This HTML5 void element tag defines the base URL for the document.
• <area> – This HTML5 void element tag is used to define the hyperlink area. It usually features text in an image map.
• <br> – This HTML5 void element tag is used for line breaks.
• <command> – This HTML5 void element tag is used to define commands that the users can invoke.
• <col> – This HTML5 void element tag defines the description attributed to a column. It will be a part of a <colgroup> element.
• <hr> – This HTML5 void element tag defines a thematic change in content.
• <link> – This HTML5 void element tag is used to describe a document and its external resource.
• <keygen> – This HTML5 void element tag is used to define a key-pair generator tool that is used in forms to encrypt data, which will then be passed to the server.
• <img> – As we mentioned in our example, this HTML5 void element tag describes an image.
• <input> – This HTML5 void element tag defines a type of data field that allows users to edit the data.
• <meta> – This HTML5 void element tag is used to describe the metadata for a HTML document.

Image Source:?Wikimedia