Void element / Elemento vacío
Anatomía y estructura
Un void element (elemento vacío) es un elemento HTML que no tiene contenido ni etiqueta de cierre; toda su información vive en sus atributos.
Un void element (también llamado elemento vacío) es un elemento HTML que no tiene contenido ni etiqueta de cierre. A diferencia de los elementos normales — que envuelven contenido entre una apertura y un cierre — los void elements son autocontenidos: toda su información vive en sus atributos.
La razón de su existencia es semántica: estos elementos no envuelven contenido, sino que insertan o incrustan algo (una imagen, un salto de línea, un campo de formulario, una instrucción al navegador). No tiene sentido hablar de “contenido” dentro de ellos.
Cómo funciona
Un elemento normal abre y cierra:
<p>Este texto es el contenido del párrafo.</p>Un void element no cierra — solo abre:
<img src="foto.jpg" alt="Una foto de ejemplo" />
<br />
<hr />
<input type="text" />La barra al final (/>) es opcional en HTML5. Estas dos formas son equivalentes:
<img src="foto.jpg" alt="Una foto" /> <!-- con barra -->
<img src="foto.jpg" alt="Una foto"> <!-- sin barra -->La barra es un vestigio de la época XHTML cuando era obligatoria. Hoy es una preferencia de estilo: incluirla hace visualmente obvio que el elemento no lleva cierre; omitirla es más conciso. Lo que importa es no escribir una etiqueta de cierre separada (</img> está mal y puede romper el parsing).
Los void elements más comunes
| Elemento | Para qué sirve |
|---|---|
<img> | Incrustar una imagen |
<br> | Salto de línea dentro de texto |
<hr> | Separador temático horizontal |
<input> | Campo de formulario |
<meta> | Metadatos del documento (en <head>) |
<link> | Vincular recursos externos (CSS, favicon) |
<area> | Zona clicable dentro de un mapa de imagen |
<base> | URL base para enlaces relativos |
<col> | Configuración de columna en tablas |
<embed> | Contenido multimedia externo |
<param> | Parámetro para <object> |
<source> | Fuente alternativa para <video>, <audio>, <picture> |
<track> | Subtítulos para <video> |
<wbr> | Oportunidad de quiebre de línea sugerido |
Los cuatro que vas a usar en el 90% de los casos mientras aprendés: <img>, <br>, <input> y <meta>.
Ejemplo realista
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="estilos.css" />
<title>Mi página</title>
</head>
<body>
<img src="logo.png" alt="Logo del sitio" width="120" height="40" />
<hr />
<p>Para contactarnos escribí a:<br />hola@ejemplo.com</p>
<input type="email" placeholder="Tu email" />
</body>
</html>En este fragmento, <meta>, <link>, <img>, <hr>, <br> e <input> son todos void elements. Ninguno tiene etiqueta de cierre.
Notas, gotchas e interacción
</img>,</br>,</input>son errores. Escribir una etiqueta de cierre para un void element no es HTML válido. Los navegadores modernos toleran algunos casos, pero el comportamiento puede ser inesperado.<br>tiene usos correctos e incorretos. Es correcto dentro de texto corrido donde el quiebre de línea es parte del contenido (una dirección postal, una letra de canción). Es incorrecto usarlo como herramienta de espaciado entre bloques — para eso existenmarginypaddingen CSS.<hr>es semántico, no visual. Representa una ruptura temática entre secciones. Si solo querés una línea decorativa, usá CSS (border-topen un elemento vacío) en lugar de<hr>.- Void elements en XHTML: en XHTML era obligatoria la barra de cierre:
<br />. En HTML5 es opcional. Si tu proyecto mezcla XHTML (raro hoy), verificá las reglas del doctype que uses.
Vigente / legacy
La categoría de void elements es parte de la especificación HTML desde sus primeras versiones y está completamente vigente. El cambio de XHTML a HTML5 relajó la exigencia de la barra final (/>), pero la lista de elementos vacíos es la misma. No hay void elements legacy: los que existen están todos en uso.