devnotes.

Void / Self-Closing Elements

Not every HTML element wraps around content. Some elements are void elements — they carry information through attributes alone and never have a closing tag or children.

Common void elements:

<img src="cat.jpg" alt="A sleeping cat">
<br>
<hr>
<input type="text" name="username">
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">

Notice none of these have a </img>, </br>, or </input> closing tag — that would actually be invalid HTML5. In older XHTML-style code you might see a trailing slash like <br />, which is harmless but unnecessary in modern HTML5.

Why do these elements exist without content? Because their entire purpose is described by their attributes:

  • <img> needs src (the image path) and alt (fallback text for accessibility/SEO).
  • <input> needs type and name to describe what kind of form field it is.
  • <meta> and <link> only carry metadata — there's nothing to "contain."

A quick way to remember: if an element can't logically hold text or other tags inside it, it's almost certainly a void element.