HTML Void Elements

The article explains the concept of void elements in HTML and how they differ from self-closing tags in XML, XHTML, and SVG, highlighting the syntax and parsing differences between them.

HTML, XML, XHTML, and SVG are markup languages used to structure web documents. They define a set of rules for creating elements [1] that describe the content of the document. In this context, elements are entities that can have attributes and may contain other elements or text. Some elements can be either void or non-void, and this distinction is essential for understanding how these languages work.

Void Elements in HTML

A void element [3] is an element in HTML that doesn't have a closing tag. It is marked up by a start tag only. Void elements are used to represent elements that have no content (a void elements content model [2] never allows it to have contents under any circumstances), and they cannot have any child elements. Void elements can have attributes. They are self-contained, and they don't require any additional information to be rendered correctly.

List of (non-deprecated) void elements in HTML

<area>
<base>
 
<col>
<embed>
<hr>
<img>
<input>
<link>
<meta>
<source>
<track>

Self-Closing Tags in XML, XHTML, and SVG

In XML, XHTML, and SVG, self-closing tags are used to represent empty elements. Unlike void elements in HTML, self-closing tags have both a start tag and an end tag, but the end tag is written with a slash before the closing angle bracket. For example, <img src="image.jpg"/> is a self-closing tag that represents an empty <img> element in XML, XHTML, and SVG.

Difference between Void Elements and Self-Closing Tags:

The main difference between void elements in HTML and self-closing tags in XML, XHTML, and SVG is that void elements are defined as a separate category of elements, while self-closing tags are used to represent empty elements. Void elements in HTML cannot have any child elements, whereas self-closing tags can represent both empty elements and elements with content. For example,  represents an empty paragraph in XML, XHTML, and SVG, while Some text represents a paragraph with content.

Another difference between void elements and self-closing tags is how they are parsed by the browser. In HTML, void elements are parsed as standalone elements, and their closing tags are not required. In contrast, self-closing tags in XML, XHTML, and SVG are parsed as regular elements, and their closing tags are required. This means that omitting the closing tag in a self-closing tag in XML, XHTML, or SVG is considered a syntax error.

Conclusion

In conclusion, void elements in HTML are a special category of elements that are defined as having no content and no closing tag. They are used to represent elements that are self-contained and require no additional information to be rendered correctly. In contrast, self-closing tags in XML, XHTML, and SVG are used to represent both empty elements and elements with content. They have both a start tag and an end tag, but the end tag is written with a slash before the closing angle bracket. Understanding the differences between void elements and self-closing tags is essential for writing valid and well-formed markup in HTML, XML, XHTML, and SVG.

Self-closing tags (<tag />) do not exist in HTML! [4]