HTML Void Elements Table
| Element | What it embeds | Field note |
|---|---|---|
<br> | Line break | For line-meaningful text - poems, addresses; not for spacing |
<hr> | Thematic break | A paragraph-level topic shift, not a decorative line |
<img> | Image | Always with alt - the attribute IS the accessibility contract |
<input> | Form control | The type attribute picks the control; no closing tag ever |
<meta> | Document metadata | Lives in head; charset, viewport, description |
<link> | External resource link | Stylesheets, icons, preloads |
<source> | Media alternative | Multiple sources: browser takes the first it supports |
<track> | Text track for media | Captions and chapters for video |
<area> | Image-map region | Clickable zones on one image |
<base> | Base URL for relative links | One per document, before any URL-using element |
<col> | Table column | Inside colgroup; styles whole columns |
<embed>, <param> | Plugin content (legacy) | Prefer modern elements; param is obsolete |
<wbr> | Word break opportunity | Long unbreakable strings - URLs, IDs |
Most HTML elements wrap content: an opening tag, children, a closing tag. Void elements are the exception - thirteen of them that can never have children, which is why they have no closing tag at all. The table below lists all thirteen with what each embeds and the rule that keeps it accessible and valid.
Bottom line: a void element cannot have children - writing <br>text</br> is invalid, and the self-closing form <br/> is legal only because HTML parsers ignore the slash; it does not close anything. The syntax freedom causes real bugs in one place: XHTML-style muscle memory produces <img/> in templates, and JSX - where the slash is REQUIRED - sends developers back the other way. Know which language you are writing.
The honest part: two void elements carry the heaviest accessibility weight on the whole web. Every img needs its alt attribute (the alternative text IS the contract with screen readers; empty alt for decorative images is itself a deliberate statement), and every input needs a label connected via for/id. The void form is unforgiving: there is no inner text to read, so the attributes do all the talking.
How to use
- Check the table before inventing a closing tag - if the element is here, it has no closing form and cannot take children.
- Carry the two accessibility contracts: alt on every img (empty string for decorative), label connected to every input.
- Write void elements bare (<br>, <img ...>) in HTML; reserve the self-closing slash for JSX and other XML-flavored syntaxes where it is mandatory.
Frequently asked questions
What exactly is a void element?
An element that can never have any content or children - its model is empty by definition, so HTML gives it no closing tag. Thirteen exist: br, hr, img, input, embed, source, track, area, base, col, meta, link, wbr (plus the obsolete param). Everything else in HTML - including elements you never text inside, like canvas - takes content and a closing tag.
Is <br/> wrong? What does the slash do?
In HTML, nothing - the parser ignores the slash before the angle bracket, so <br/> and <br> are identical. The slash is a habit from XHTML (where it was required) and is mandatory in JSX. Writing it in plain HTML is harmless but misleading: it suggests the slash closes the element, when void elements have no close. The valid-but-meaningless slash is the table's honest footnote.
Why is <br> considered bad for spacing?
Because br means 'the line break is part of the content' - poems, postal addresses, song lyrics. Using consecutive br elements to push content down the page is layout done in content markup: it breaks at unpredictable points on small screens, screen readers announce each break, and responsive redesign cannot undo it. Margins and padding do spacing; br does meaning. The same logic makes hr a thematic break between paragraphs, not a decorative divider line.
What accessibility rules apply to void elements?
The two biggest on the web: img must carry alt (a description for meaningful images, alt="" for purely decorative ones - an explicit empty statement that screen readers should skip it), and input must have a programmatic label, usually via <label for> matching the input's id. Void elements have no inner text, so screen readers have nothing to announce unless the attributes provide it. That is why audits flag every unlabeled input and every alt-less img - the element model gives them no second chance.