¿Son válidas las etiquetas de cierre automático (no nulo) en HTML5?

Al validador del W3C no le gustan las etiquetas de cierre automático (las que terminan con "/> ") en elementos no vacíos . (Los elementos vacíos son aquellos que pueden no contener ningún contenido). ¿Siguen siendo válidos en HTML5?

Algunos ejemplos de elementos vacíos aceptados :

<br />
<img src="" />
<input type="text" name="username" />

Algunos ejemplos de elementos no vacíos rechazados :

<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />

_{Nota:
El validador W3C en realidad acepta etiquetas de cierre automático nulas: el autor originalmente tuvo un problema debido a un error tipográfico simple (en \>lugar de />); sin embargo, las etiquetas de cierre automático no son 100% válidas en HTML5 en general, y las respuestas explican el tema de las etiquetas de cierre automático en varios tipos de HTML.}

• En HTML 4 , <foo /(sí, con no >en absoluto) significa <foo>(que conduce a <br />significado <br>>(es decir <br>&gt;) y <title/hello/significado <title>hello</title>). Esta es una regla SGML que los navegadores hicieron un trabajo de soporte muy pobre, y la especificación aconseja a los autores que eviten la sintaxis .

• En XHTML , <foo />significa<foo></foo> . Esta es una regla XML que se aplica a todos los documentos XML. Dicho esto, XHTML a menudo se sirve como lo text/htmlque (históricamente al menos) es procesado por los navegadores que utilizan un analizador diferente al de los documentos servidos application/xhtml+xml. El W3C proporciona pautas de compatibilidad a seguir para XHTML como text/html. (Básicamente: utilice la sintaxis de etiqueta de cierre automático cuando el elemento se define como VACÍO (y la etiqueta final estaba prohibida en la especificación HTML)).

• En HTML5 , el significado de <foo /> depende del tipo de elemento .

  • En los elementos HTML que se designan como elementos vacíos (esencialmente "Un elemento que existía antes de HTML5 y que tenía prohibido tener contenido"), las etiquetas finales simplemente están prohibidas. La barra diagonal al final de la etiqueta de inicio está permitida, pero no tiene sentido. Es solo el azúcar sintáctico para las personas (y los resaltadores de sintaxis) que son adictos al XML.
  • En otros elementos HTML, la barra diagonal es un error, pero la recuperación del error hará que los navegadores lo ignoren y traten la etiqueta como una etiqueta de inicio normal. Por lo general, esto terminará con una etiqueta final faltante que hará que los elementos posteriores sean hijos en lugar de hermanos.
  • Los elementos extraños (importados de aplicaciones XML como SVG) lo tratan como una sintaxis de cierre automático.

Como señaló Nikita Skvortsov, un div de cierre automático no se validará. Esto se debe a que un div es un elemento normal , no un elemento vacío .

De acuerdo con la especificación HTML5 , las etiquetas que no pueden tener ningún contenido (conocidas como elementos vacíos ) pueden cerrarse automáticamente *. Esto incluye las siguientes etiquetas:

area, base, br, col, embed, hr, img, input, 
keygen, link, meta, param, source, track, wbr

Sin embargo, "/" es completamente opcional en las etiquetas anteriores, por lo <img/>que no es diferente de <img>, pero <img></img>no es válido.

* Nota: los elementos extraños también pueden cerrarse automáticamente, pero no creo que esté dentro del alcance de esta respuesta.

En la práctica, el uso de etiquetas de cierre automático en HTML debería funcionar como es de esperar. Pero si le preocupa escribir HTML5 válido , debe comprender cómo se comporta el uso de tales etiquetas dentro de los dos formularios de sintaxis diferentes que puede usar. HTML5 define una sintaxis HTML y una sintaxis XHTML, que son similares pero no idénticas. El que se use depende del tipo de medio enviado por el servidor web.

Lo más probable es que sus páginas se sirvan como text/html, lo que sigue la sintaxis HTML más indulgente. En estos casos, HTML5 permite que ciertas etiquetas de inicio tengan una opción / antes de que finalice>. En estos casos, el / es opcional y se ignora, de modo <hr>y <hr />son idénticos. La especificación HTML llama a estos "elementos nulos" y proporciona una lista de elementos válidos. Estrictamente hablando, el / opcional solo es válido dentro de las etiquetas de inicio de estos elementos vacíos; por ejemplo, <br />y <hr />son válidos HTML5, pero <p />no lo son.

La especificación HTML5 hace una clara distinción entre lo que es correcto para los autores HTML y para los desarrolladores de navegadores web, y se requiere que el segundo grupo acepte todo tipo de sintaxis "heredada" no válida. En este caso, significa que los navegadores compatibles con HTML5 aceptarán etiquetas ilegales de cierre automático, como me gusta <p />, y las representarán como probablemente espera. Pero para un autor, esa página no sería HTML5 válida. (Que es más importante, el árbol DOM que se obtiene de utilizar este tipo de sintaxis ilegal puede verse seriamente la pata; auto-cerrado <span />etiquetas, por ejemplo, tienden a echar las cosas mucho ).

(En el caso inusual de que su servidor sepa cómo enviar archivos XHTML como un tipo XML MIME, la página debe cumplir con la sintaxis XHTML DTD y XML. Eso significa que se requieren etiquetas de cierre automático para los elementos definidos como tales).

HTML5 básicamente se comporta como si la barra diagonal final no estuviera allí. No existe una etiqueta de cierre automático en la sintaxis HTML5.

• Las etiquetas de cierre automático en elementos no vacíos como <p/>, <div/>no funcionarán en absoluto. La barra diagonal final se ignorará y se tratará como etiquetas de apertura. Es probable que esto conduzca a problemas de anidación.

  Esto es cierto independientemente de si hay espacios en blanco frente a la barra inclinada: <p />y <div />tampoco funcionará por la misma razón.

• Etiquetas de cierre automático en vacío elementos como <br/>o <img src="" alt=""/> va a trabajar, pero sólo porque la barra final es ignorado, y en este caso lo que sucede a resultar en un comportamiento correcto.

El resultado es que todo lo que funcionó en su antiguo "XHTML 1.0 servido como texto / html" continuará funcionando como lo hacía antes: las barras inclinadas en etiquetas no vacías tampoco fueron aceptadas allí, mientras que la barra inclinada en elementos vacíos funcionó.

Una nota más: es posible representar un documento HTML5 como XML, y esto a veces se denomina "XHTML 5.0". En este caso, se aplicarán las reglas de XML y siempre se manejarán las etiquetas de cierre automático. Siempre necesitaría ser servido con un tipo mime XML.

Las etiquetas de cierre automático son válidas en HTML5, pero no son obligatorias.

<br>y <br />ambos están bien.

Sería muy cuidadoso con las etiquetas de cierre automático, ya que este ejemplo demuestra:

var a = '<span/><span/>';
var d = document.createElement('div');
d.innerHTML = a
console.log(d.innerHTML) // "<span><span></span></span>"

Mi instinto habría sido <span></span><span></span>en su lugar

Sin embargo, solo para el registro, esto no es válido:

<address class="vcard">
  <svg viewBox="0 0 800 400">
    <rect width="800" height="400" fill="#000">
  </svg>
</address>

Y una barra aquí lo haría válido nuevamente:

    <rect width="800" height="400" fill="#000"/>