Void (Self-Closing) Elements
Master the 14 special HTML5 elements that cannot hold content, understand why closing tags are prohibited, and demystify the XML trailing slash myth.
🎯 Learning Objectives
- Understand the technical definition of a Void Element in the WHATWG HTML5 specification.
- Memorize the complete canon of all 14 HTML5 Void Elements.
- Differentiate between an inherently Void Element and an Empty Container Element (such as an empty
<div></div>or<textarea></textarea>). - Understand the history of the trailing slash (
<img />vs<img>) and why HTML5 parsers treat them identically. - Avoid syntax violations such as
</img>,</input>, and</br>.
📖 Mental Model: Solid Bricks vs Open Cardboard Boxes
Think of standard HTML elements (like <p>, <div>, <section>) as cardboard boxes. They have an open top (start tag) and flaps you fold down to close them (end tag) because they are built to hold items inside.
A Void Element (like <img> or <input>) is a solid brick. A brick cannot hold anything inside it. It doesn't have flaps, lids, or an interior compartment. You place the brick down on the construction site (a single tag), and you are done! It cannot have a closing tag because there is literally nothing to close.
1. The 14 Void Elements of HTML5
According to the WHATWG HTML specification, Void Elements are elements that must not have any content (neither child elements nor text nodes) and must not have an end tag.
The Master Reference: All 14 Void Elements
| Tag | Primary Function | Common Attributes |
|---|---|---|
<area> |
Defines a clickable region inside an image map (<map>). |
shape, coords, href, alt |
<base> |
Specifies the document's base URL and default target window. | href, target |
<br> |
Inserts a semantic line break (for poems, postal addresses). | Global attributes |
<col> |
Defines column properties in an HTML table. | span |
<embed> |
Integrates external interactive content or plugin applications. | src, type, width, height |
<hr> |
Represents a thematic break / topic shift between paragraphs. | Global attributes |
<img> |
Embeds a bitmap or vector graphic image. | src, alt, loading, width, height |
<input> |
Creates interactive form data controls (text, checkbox, radio, date, etc.). | type, name, value, placeholder, required |
<link> |
Declares relationships with external resources (CSS, fonts, favicons). | rel, href, type, media |
<meta> |
Specifies document metadata (charset, viewport, description, OG tags). | charset, name, content, http-equiv |
<param> |
Defines parameters for plugins invoked by <object> (legacy). |
name, value |
<source> |
Specifies alternate media resources for <picture>, <video>, or <audio>. |
src, srcset, type, media |
<track> |
Embeds timed text subtitles / captions for <video> or <audio>. |
kind, src, srclang, label |
<wbr> |
Suggests an optional Word Break Opportunity for long unbroken words/URLs. | Global attributes |
2. The Trailing Slash Myth: <img /> vs <img>
In the era of XHTML 1.0 (early 2000s), strict XML syntax mandated that every single element have a closing slash: <img src="pic.jpg" />.
In modern HTML5, the parser does not use XML rules. When the HTML parser sees a void tag:
<img src="pic.jpg">is 100% valid HTML5.<img src="pic.jpg" />is also accepted by the parser, but the trailing slash/is completely ignored.
ℹ️ React / JSX Note
In React / JSX code, all tags must be closed according to JSX syntax (e.g., <img /> or <input />). However, in standard compiled HTML files, the trailing slash is entirely optional.
3. Void Elements vs Empty Containers
Do not confuse a Void Element with a Container Element that happens to be empty:
| Element Type | Example | Closing Tag Rule |
|---|---|---|
| Void Element | <input type="text"><img src="pic.jpg" alt=""> |
NEVER use a closing tag (</input> is invalid). |
| Empty Container | <textarea name="bio"></textarea><div id="map-target"></div> |
MUST have a closing tag! Writing <textarea /> in HTML will swallow the rest of your page. |
4. Interactive Code Playground
Observe how void elements embed rich media, create form controls, draw dividers, and suggest word-break opportunities without needing closing tags.
🏋️ Hands-On Exercise: Clean Media Profile Card
Construct a clean media profile card using at least 4 different void elements correctly without any illegal closing tags:
- Add an
<img>element withsrc="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100"and an appropriatealtdescription. - Add a heading with the user's name and use a
<br>tag to split their location on a new line. - Insert a thematic divider line using
<hr>. - Add a subscription form with a text
<input>and a checkbox<input>. - Ensure no closing tags exist for
img,br,hr, orinput.
⚠️ Common Pitfalls: Text Inside Void Elements & Illegal End Tags
Never place text inside a void tag or try to close it with an end tag:
- ❌
<img src="dog.jpg">My Dog</img>(Invalid! Usealt="My Dog"or a<figure><figcaption>). - ❌
<input type="button">Click Me</input>(Invalid! Usevalue="Click Me"or a<button>tag). - ❌
<br></br>(Invalid! Creates two accidental line breaks in some older rendering engines).
💡 Pro Tip: Responsive Long Words with <wbr>
When displaying ultra-long URLs or technical terms on mobile screens, they often cause ugly horizontal layout overflow. The <wbr> (Word Break Opportunity) void element tells the browser: "If you run out of screen space here, feel free to wrap the line at this exact spot without adding a hyphen."
📌 Key Takeaways
- There are exactly 14 Void Elements in HTML5 (including
img,input,br,hr,meta,link,source). - Void elements cannot have child content or closing end tags (
</img>is illegal). - In HTML5, trailing slashes (
<img />) are permitted for XHTML compatibility but completely ignored by parsers. - Empty container elements like
<textarea></textarea>are NOT void elements and must have closing tags. - Use the
<wbr>void element to provide clean mobile line break hints for long strings and URLs.