HTML void elements
Summary
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.
Introduction #
HTML, XML, XHTML, and SVG are markup languages used to structure web documents. They define a set of rules for creating elements 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.
What are void elements in HTML? #
A void element is an element in HTML that does not have a closing tag (not written with a slash before the closing angle bracket). 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 never allows it to have contents under any circumstances).
While void elements can not have any child elements, they can have attributes. They are self-contained, and they do not require any additional information to be rendered correctly.
Example: #
A void img element in HTML:
<img src="image.jpg">
List of HTML void elements #
<area><base><br><col><embed><hr><img><input><link><meta><source><track><wbr>
What are 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. In XML, XHTML, and SVG, void elements are written with a slash before the first closing angle bracket.
Example: #
A self-closing <img/> tag in XML, XHTML, and SVG:
<img src="image.jpg"/>
If this looks like HTML to you, you are mistaken.
Self-closing tags (<tag/>) do not exist in HTML!
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, <p/> represents an empty paragraph in XML, XHTML, and SVG, while <p>Some text</p> represents a paragraph with content.
Parsing #
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. Their closing tags are not required. A slash before the closing angle bracket will be ignored by HTML parsers.
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.
Further readings #
Sources and recommended, further resources on the topic:
- W3C: Syntax of elements
- WHATWG: Tag omission in text/html
- WHATWG: HTML Void elements
- WHATWG: HTML end tags
- MDN: Definition of void element
- MDN: Self-closing tags
Author
Jonas Jared Jacek (J15k)
Jonas works as project manager, web designer, and web developer since 2001. On top of that, he is a Linux system administrator with a broad interest in things related to programming, architecture, and design. See: https://www.j15k.com/License
HTML void elements by Jonas Jared Jacek is licensed under CC BY-SA 4.0.
This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, for noncommercial purposes only. To give credit, provide a link back to the original source, the author, and the license e.g. like this:
<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.ditig.com/html-void-elements">HTML void elements</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0</a>.</p>For more information see the Ditig legal page.
