Validación HTML: Sintaxis de autocierre ("/>") usada en un elemento HTML no vacío. Ignorando la barra y tratando como etiqueta de apertura.

Acerca de este problema HTML

En HTML, los elementos se dividen en dos categorías según su modelo de contenido: elementos vacíos y elementos no vacíos. Los elementos vacíos como <img>, <br>, <hr>, <input>, <meta>, y <link> no pueden tener contenido y nunca necesitan una etiqueta de cierre. Los elementos no vacíos como <div>, <p>, <span>, <select>, <textarea>, y <script> pueden (o deben) contener contenido y requieren tanto una etiqueta de apertura como una de cierre.

Cuando escribes <div /> o <select />, podrías esperar que el navegador lo trate como un elemento completo y autónomo — similar a como XML o XHTML lo interpretaría. Sin embargo, el analizador HTML no funciona de esta manera. Según el WHATWG HTML Living Standard, el /> en un elemento no vacío simplemente se ignora. El navegador trata <div /> como simplemente <div> — una etiqueta de apertura sin su correspondiente etiqueta de cierre. Esto puede llevar a problemas estructurales serios en tu documento, ya que el navegador seguirá buscando contenido y una etiqueta de cierre, potencialmente consumiendo elementos posteriores como hijos.

Este problema comúnmente surge cuando los desarrolladores están acostumbrados a frameworks como React (JSX), donde la sintaxis <Component /> es estándar, o cuando vienen de un contexto XML/XHTML donde cualquier elemento puede ser autocerrado. También aparece cuando los desarrolladores creen erróneamente que un elemento sin contenido previsto puede ser autocerrado en HTML.

Las consecuencias pueden ser significativas. El árbol DOM del navegador puede terminar siendo drásticamente diferente de lo que pretendías, causando problemas de diseño, funcionalidad rota y problemas de accesibilidad. Por ejemplo, una etiqueta <script /> autocerrada no se comportará como se espera — el navegador tratará todo después de ella como el contenido del script hasta que encuentre una etiqueta de cierre </script> en algún otro lugar del documento, efectivamente ocultando el contenido visible de tu página.

Cómo solucionarlo

Elimina la barra final de la etiqueta de apertura del elemento no vacío.
Añade una etiqueta de cierre adecuada inmediatamente después de la etiqueta de apertura si el elemento debe estar vacío, o después de su contenido.

La lista completa de elementos vacíos en HTML es: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track>, y <wbr>. Solo estos elementos pueden usar la sintaxis de autocierre (e incluso para estos, el / es opcional en HTML).

Ejemplos

Incorrecto: Sintaxis de autocierre en elementos no vacíos

<div />

<select />
  <option value="1">one</option>
</select>

<span />

<textarea />

<script src="app.js" />

Cada uno de estos activará la advertencia. El validador ignora la barra y los trata como etiquetas de apertura, lo que significa que el navegador espera contenido y una etiqueta de cierre a continuación.

Correcto: Usando etiquetas de cierre adecuadas

<div></div>

<select>
  <option value="1">one</option>
</select>

<span></span>

<textarea></textarea>

<script src="app.js"></script>

Correcto: Sintaxis de autocierre en elementos vacíos

Los elementos vacíos pueden usar opcionalmente la barra final. Ambas formas a continuación son válidas:

<!-- Con barra final opcional -->

<img src="photo.jpg" alt="A photo" />
<br />
<input type="text" name="username" />

<!-- Sin barra final (igualmente válido) -->

<img src="photo.jpg" alt="A photo">
<br>
<input type="text" name="username">

Una trampa sutil: `<script />`

Este ejemplo demuestra uno de los casos más peligrosos de este problema:

<!-- Incorrecto: el navegador trata todo después de esto como contenido del script -->

<script src="app.js" />
<p>Este párrafo no se renderizará — se consume como texto del script.</p>

<!-- Correcto -->

<script src="app.js"></script>
<p>Este párrafo se renderiza normalmente.</p>

El navegador interpreta la versión incorrecta como una etiqueta <script> de apertura y lee todo el marcado subsecuente como contenido del script hasta que encuentra </script>, efectivamente ocultando el contenido de tu página y probablemente produciendo errores de JavaScript.