Pregunta ¿Las etiquetas de cierre automático (no válidas) son válidas en HTML5?


los Validador W3C no le gustan las etiquetas de cierre automático (las que terminan con "/>") en no válido elementos. (Los elementos vacíos son aquellos que quizás nunca contengan ningún contenido.) ¿Siguen siendo válidos en HTML5?

Algunos ejemplos de aceptado elementos vacíos:

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

Algunos ejemplos de rechazado elementos no vacíos:

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

Nota:  el validador W3C en realidad acepta etiquetas de cierre automático anómalas: el autor originalmente tenía un problema debido a un simple error tipográfico (\> en lugar de />) Sin embargo, las etiquetas de cierre automático no son 100% válidas en HTML5 en general, y las respuestas se desarrollan sobre el tema de las etiquetas de cierre automático en varios sabores de HTML.


564
2017-08-24 15:37


origen


Respuestas:


  • En HTML 4, <foo / (sí, sin > en absoluto) significa <foo> (lo que lleva a <br /> sentido <br>> (es decir. <br>&gt;) y <title/hello/ sentido <title>hello</title>) Los navegadores hicieron un trabajo muy pobre de apoyar esto y la especificación aconseja a los autores evitar la sintaxis.

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

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

    • En los elementos HTML que se designan como elementos vacíos (En esencia, "Un elemento que existía antes de HTML5 y que tenía prohibido tener contenido"), las etiquetas de cierre están simplemente prohibidas. La barra al final de la etiqueta de inicio está permitida, pero no tiene ningún significado. Es solo azúcar sintáctico para personas (y marcadores de sintaxis) que son adictos a XML.
    • En otros elementos HTML, la barra inclinada es un error, pero la recuperación de errores hará que los navegadores lo ignoren y traten la etiqueta como una etiqueta de inicio normal. Esto generalmente terminará con una etiqueta de final faltante que causa que los elementos subsiguientes sean hijos en lugar de hermanos.
    • Los elementos externos (importados de aplicaciones XML como SVG) lo tratan como sintaxis de cierre automático.

1143
2017-10-21 20:36



Como señaló Nikita Skvortsov, un div de cierre automático no validará. Esto es porque un div es un elemento normal, No un elemento vacío. De acuerdo a la especificación de HTML5, etiquetas que no pueden tener ningún contenido (conocido como elementos vacíos) puede ser de cierre automático *. Esto incluye las siguientes etiquetas:

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

La "/" es completamente opcional en las etiquetas anteriores, sin embargo, por lo <img/> no es diferente de <img>, pero <img></img> es inválido.

*Nota: elementos extraños también puede ser de cierre automático, pero no creo que esté dentro del alcance de esta respuesta.


372
2018-02-18 22:11



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

Lo más probable es que sus páginas se publiquen como text/html, 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 termine>. En estos casos, el / es opcional e ignorado, por lo <hr> y <hr /> Son identicos. La especificación HTML llama a estos "elementos vacíos" y proporciona una lista de los válidos. Estrictamente hablando, el / opcional es solo válido dentro de las etiquetas de inicio de estos elementos vacíos; por ejemplo, <br /> y <hr /> son HTML5 válidos, pero <p /> no es.

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 el segundo grupo debe aceptar todo tipo de sintaxis "heredada" no válida. En este caso, significa que los navegadores compatibles con HTML5 aceptarán etiquetas ilegales auto cerradas, como <p />y renderízalos como probablemente esperas. Pero para un autor, esa página no ser válido HTML5. (Más importante aún, el árbol DOM que obtienes al usar este tipo de sintaxis ilegal puede arruinarse seriamente; auto cerrado <span /> las etiquetas, por ejemplo, tienden a ensuciar 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 las etiquetas de cierre automático son necesario para aquellos elementos definidos como tales.)


58
2017-08-24 16:16



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

  • Etiquetas de cierre automático en no válido elementos como <p/>, <div/> no funcionará en absoluto. La barra inclinada final se ignorará y se tratarán como etiquetas de apertura. Es probable que esto genere problemas de anidamiento.

    Esto es cierto independientemente de si hay espacios en blanco delante de 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=""/>  será funciona, pero solo porque se ignora la barra diagonal, y en este caso resulta que se produce el comportamiento correcto.

El resultado es que todo lo que funcionó en su antiguo "XHTML 1.0 servido como texto / html" seguirá funcionando como lo hacía antes: las barras diagonales en etiquetas no vacías tampoco fueron aceptadas, mientras que la barra final 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 XML mime.


7



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

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


3



Sería muy cuidadoso con las etiquetas de cierre automático como lo demuestra este ejemplo:

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 lugar


0