Elementos vacíos en HTML

Respuesta rápida: ¿qué es un elemento vacío?

Un elemento vacío en HTML es una etiqueta que no tiene etiqueta de cierre y no puede contener ningún contenido ni elementos hijos. Solo tiene etiqueta de apertura, como <br> o <img src=”photo.jpg”>. En HTML5 hay 14 elementos vacíos: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track>, <wbr> y el obsoleto <param>. A veces se los llama «empty elements» porque no contienen texto.

Lista completa de elementos vacíos en HTML5

Todos los demás elementos HTML (como <div>,<p>,<span>) requieren etiqueta de apertura y de cierre. Si intenta usar una etiqueta de cierre con un elemento vacío, como <input></input>, el navegador lo tratará como HTML no válido.

¿Son estos elementos vacíos?

¿Es <img>,<input>,<img><img> un elemento vacío?

Muchos desarrolladores se topan con las mismas preguntas cuando aprenden HTML. Estas son las respuestas breves: los cuatro son elementos vacíos en HTML5.

¿Es <img> un elemento vacío?

Sí. La etiqueta <img> no tiene etiqueta de cierre y no puede envolver ningún contenido. Úsela así: <img src=”photo.jpg” alt=”A photo”>.

¿Es <input> un elemento vacío?

Sí. Escribir <input></input> es HTML no válido; el analizador seguirá mostrando el campo, pero la etiqueta de cierre se ignora. La forma correcta es <input type=”text” name=”email”>.

¿Es <link> un elemento vacío?

Sí. La etiqueta <link> conecta recursos externos como hojas de estilo y siempre es autónoma: <link rel=”stylesheet” href=”styles.css”>

¿Es <meta> un elemento vacío?

Sí. Las etiquetas de metadatos como <meta charset=”UTF-8″>, <meta name=”viewport” content=”width=device-width”> nunca tienen contenido ni etiqueta de cierre.

¿Son <audio> y <video> elementos vacíos?

No. Ninguno de los dos es vacío: envuelven elementos <source> y <track> (que sí son vacíos) y requieren etiquetas de cierre.

Elementos vacíos y etiquetas autocerradas: diferencia entre ellos

Este es uno de los puntos de confusión más habituales. Técnicamente, las etiquetas autocerradas no existen en HTML5. En XML, XHTML y SVG, una etiqueta autocerrada usa una barra final, como <circle r=”10″ />, y esa barra es obligatoria. En HTML, el analizador simplemente ignora esa barra en los elementos vacíos.

Esto significa que el navegador trata <br> y <br /> de forma idéntica. Muchos formateadores de código siguen añadiendo la barra para que el HTML parezca compatible con XHTML, y es inofensivo, pero no es lo que convierte al elemento en «vacío». Un elemento es vacío porque así lo establece la especificación HTML, no por una barra.

La única trampa que hay que vigilar: nunca ponga una barra justo después de un valor de atributo sin comillas. Un marcado como <img src=https://example.com/logo.svg/> hace que el valor de src termine en />, lo que rompe la URL. Ponga siempre comillas en los atributos o deje un espacio antes de la barra.

Consulte etiquetas autocerradas para ver en detalle cómo se comporta realmente la barra final.

Errores habituales con los elementos vacíos

Incluso los desarrolladores con experiencia cometen errores con los elementos vacíos. Los fallos más frecuentes son estos:

• Añadir una etiqueta de cierre. Escribir <input type=”text”></input> o <br></br> es HTML no válido. El navegador mostrará el elemento, pero la etiqueta de cierre se ignora en silencio. Use solo la etiqueta de apertura.
• Intentar anidar contenido dentro. Un código como <img src=”photo.jpg”>caption</img> no producirá ningún pie de imagen — el texto «caption» se convierte en un hermano, no en un hijo. Use <figure> y <figcaption> en su lugar.
• Confundir <input> con elementos de formulario que no son vacíos. <input> es vacío, pero <select>, <textarea> y <button> requieren etiquetas de cierre. Se parecen, pero siguen reglas distintas.
• Suponer que un elemento es vacío porque «parece vacío». Etiquetas como <div></div> o <span></span> pueden mostrarse vacías, pero no son elementos vacíos: siempre requieren una etiqueta de cierre. La condición de elemento vacío procede de la especificación de HTML5, no de si el elemento tiene contenido en la página.

Elementos vacíos en React y JSX

Si ha trabajado con React, probablemente haya visto este error:

img is a void element tag and must neither have ‘children’ nor use ‘dangerouslySetInnerHTML’.

React aplica la especificación HTML de forma estricta. No puede pasar children ni «dangerouslySetInnerHTML» a un elemento vacío como <img>, <input>, <br>, <hr> o <link>. El mismo error se produce con <input> y <link>: todo lo que es vacío en HTML también lo es en JSX.

En JSX, los elementos vacíos deben escribirse con una barra final: <img src=”photo.jpg” />, <br />, <input type=”text” />. JSX está más cerca de XML que de HTML, por lo que la barra es obligatoria aunque el HTML puro no la necesite.

Si aparece el error «void element tag», compruebe si ha envuelto contenido dentro de la etiqueta sin querer o si lo ha pasado como hijo a través de una prop del componente.

Ejemplos de elementos vacíos en la práctica

Así son los elementos vacíos más habituales en HTML real:

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">

Cada una de estas etiquetas termina sin barra y sin una etiqueta de cierre aparte. Los atributos (src, alt, type, href, etc.) contienen toda la información que el navegador necesita para renderizar el elemento.

Ejemplo de elementos vacíos

Algunos elementos vacíos habituales son— <br>, <hr>, <img>, <input>, <meta> y <link>. Son una forma rápida de añadir nodos de texto, saltos de línea, imágenes, formularios y otros valores de atributos a los documentos HTML. El uso de los elementos vacíos de HTML permite que las páginas web carguen rápido y se vean correctamente. Las etiquetas HTML deben escribirse correctamente y son muy importantes para los elementos que no tienen contenido.

Preguntas frecuentes

¿Cuántos elementos vacíos hay en HTML5?

En HTML5 hay 14 elementos vacíos, incluido el obsoleto <param>. La lista completa es: area, base, br, col, embed, hr, img, input, link, meta, param, source, track y wbr.

¿Son los «void elements» lo mismo que los «empty elements»?

Sí: en la terminología de HTML, «void elements» y «empty elements» describen lo mismo, etiquetas que no pueden contener ningún contenido. La especificación HTML5 usa oficialmente el término «void elements», pero muchos tutoriales y documentos antiguos siguen usando «empty elements».

¿Necesitan los elementos vacíos una barra antes del signo de cierre?

No. En HTML5, la barra de <br /> es opcional y el analizador la ignora. En XHTML, JSX y SVG, la barra es obligatoria.

¿Pueden los elementos vacíos tener atributos?

Sí. Los elementos vacíos no tienen contenido, pero pueden tener cualquier número de atributos; por ejemplo, <img> acepta src, alt, width, height, loading y muchos más.

¿Por qué no necesitan los elementos vacíos una etiqueta de cierre?

Porque la especificación HTML5 los define como elementos sin contenido posible. No hay nada que envolver, por lo que una etiqueta de cierre no tendría sentido. Intentar añadir una da como resultado HTML no válido.