Void elements in HTML
Void elements in HTML are an important feature of web development. These tags assist in organizing HTML documents well without needing closing tags. People use them a lot on web pages to add content that doesn’t wrap around other things.
Quick answer: what is a void element?
A void element in HTML is a tag that has no closing tag and cannot hold any content or child elements. It only has a start tag, like <br> or <img src=”photo.jpg”>. There are 14 void elements in HTMNL5: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track>, <wbr>, and the deprecated <param>. They are sometimes called empty elements because they hold no text content.
Full List of Void Elements in HTML5
| Tag | Purpose |
| <area> | Defines a clickable area inside an image map |
| <base> | Sets the base URL for all relative URLs in the document |
| <br> | Inserts a line break inside text |
| <col> | Specifies column properties inside a <colgroup> |
| <embed> | Embeds external content like a plugin or media |
| <hr> | Adds a horizontal rule (thematic break) |
| <img> | Displays an image |
| <input> | Creates a form input field |
| <link> | Links external resources, usually stylesheets, in <head> |
| <meta> | Provides metadata about the document |
| <param> | Defines parameters for <object> (deprecated in HTML5) |
| <source> | Specifies media sources for <audio>, <video>, or <picture>. |
| <track> | Adds text tracks (subtitles, captions) for <video> and <audio> |
| <wbr> | Marks a possible line-break opportunity in text |
All other HTML elements (like <div>,<p>,<span>) require both a start and end tag. If you try to use an end tag with a void element, like <input></input>, the browser will treat it as invalid HTML.
Are these void elements?
Is <img>,<input>,<img><img> or a Void Element?
Many developers run into the same questions when learning HTML. Here are the short answers, all four are void elements in HTML5.
Is <img> a void element?
Yes. The <img> tag has no closing tag and cannot wrap any content. Use it as <img src=”photo.jpg” alt=”A photo”>.
Is <input> a void element?
Yes. Writing <input></input> is invalid HTML, the parser will still render the field, but the closing tag is ignored. Correct form is <input type=”text” name=”email”>.
Is <link> a void element?
Yes. The <link> tag connects external resources like stylesheets and is always self-contained: <link rel=”stylesheet” href=”styles.css”>
Is <meta> a void element?
Yes. Metadata tags like <meta charset=”UTF-8″>, <meta name=”viewport” content=”width=device-width”> never have content or a closing tag.
Are <audio> and <video> void elements?
No. Both are not void, they wrap <source> and <track> elements (which are void) and require closing tags.
Void Elements and Self-Closing Tags: Difference Between Them
This is one of the most common points of confusion. Technically, self-closing tags do not exist in HTML5. In XML, XHTML, and SVG, a self-closing tag uses a trailing slash like <circle r=”10″ /> and the slash is required. In HTML, the parser simply ignores that slash on void elements.
That means <br> and <br /> are treated identically by the browser. Many code formatters still add the slash to make HTML look XHTML-compatible, and it’s harmless, but it’s not what makes the element “void”. An element is void because the HTML specification says so, not because of a slash.
The one trap to watch for: never put a slash directly after an unquoted attribute value. Markup like <img src=https://example.com/logo.svg/> makes the src alue end with />, which breaks the URL. Always quote your attributes, or use a space before the slash.
See self-closing tags for a deeper look at how the trailing slash actually behaves.
Common Mistakes with Void Elements
Even experienced developers slip up on void elements. The most frequent mistakes look like this:
- Adding a closing tag. Writing <input type=”text”></input> or <br></br> is invalid HTML. The browser will render the element but the closing tag is silently ignored. Use only the start tag.
- Trying to nest content inside. Code like <img src=”photo.jpg”>caption</img> will not produce a caption — the text “caption” becomes a sibling, not a child. Use <figure> and <figcaption> instead.
- Confusing <input> with form elements that aren’t void. <input> is void, but <select>, <textarea>, and <button> all require closing tags. They look similiar but follow different rules.
- Assuming an element is void because it “looks empty”. Tags like <div></div> or <span></span> can render as empty, but they are not void, they always require a closing tag. Void status comes from the HTML5 spec, not from whether the element has content on the page.
Void Elements in React and JSX
If you’ve worked with React, you’ve probably seen this error:
img is a void element tag and must neither have ‘children’ nor use ‘dangerouslySetInnerHTML’.
React enforces the HTML spec strictly. You cannot pass children or ‘dangerouslySetInnerHTML’ to a void element like <img>, <input>, <br>, <hr>, or <link>. The same error happens with <input> and <link>, anything that’s void in HTML is void in JSX too.
In JSX, void elements must be written with a trailing slash: <img src=”photo.jpg” />, <br />, <input type=”text” />. JSX is closer to XML than HTML, so the slash is required even though plain HTML doesn’t need it.
If you hit the “void element tag” error, check whether you accidentally wrapped content inside the tag or passed it as a child via a component prop.
Void Element Examples in Practice
Here’s how the most common void elements look in real HTML:
html<!-- Line break inside a paragraph -->
<p>First line.<br>Second line.</p>
<!-- Horizontal rule between sections -->
<hr>
<!-- Image with alt text -->
<img src="logo.png" alt="Company logo" width="120" height="40">
<!-- Form input -->
<input type="email" name="user_email" placeholder="you@example.com" required>
<!-- Stylesheet link in <head> -->
<link rel="stylesheet" href="/styles/main.css">
<!-- Metadata in <head> -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">Each of these tags ends without a slash and without a separate closing tag. Attributes (src, alt, type, href, etc.) carry all the information the browser needs to render the element.
Void Elements Example
Some common void elements are— <br>, <hr>, <img>, <input>, <meta>, and <link>. They are a quick way to add text nodes, line breaks, images, forms, and other attribute values to HTML documents. Using void elements of HTML makes certain that web pages load quickly and look right. HTML tags must be written correctly and are very important for elements that don’t have contents.
FAQs
How many void elements are in HTML5?
There are 14 void elements in HTML5, including the deprecated <param>. The full list is: area, base, br, col, embed, hr, img, input, link, meta, param, source, track, and wbr.
Are void elements the same as empty elements?
Yes, in HTML terminology “void elements” and “empty elements” describe the same thing, tags that cannot hold any content. The HTML5 specification officially uses the term “void elements”, but many tutorials and older docs still use “empty elements”.
Do void elements need a slash before the closing bracket?
No. In HTML5, the slash in <br /> is optional and ignored by the parser. In XHTML, JSX, and SVG, the slash is required.
Can void elements have attributes?
Yes. Void elements have no content, but they can have any number of attributes, for example <img> accepts src, alt, width, height, loading, and many more.
Why don’t void elements need a closing tag?
Because the HTML5 specification defines them as having no possible content. There is nothing to wrap, so a closing tag would have no meaning. Trying to add one results in invalid HTML.