¿Todavía necesitamos barras finales en HTML5?


En HTML5, ¿todavía necesitamos la barra final como en XHTML?

<img src="some_image.png" />

Validator.w3.org no me quejé si se me cayó, ni siquiera una advertencia. Pero algunos documentos en línea parecen indicar que la barra final todavía es necesaria para etiquetas como img, link, meta, br, etc.

 103
Author: CaptSaltyJack, 2011-09-09

6 answers

img las etiquetas son elementos Vacíos por lo que no necesitan una etiqueta final.

Elementos vacíos área de la base, br, col, comando, incrustar, hr, img, input, keygen, enlace, meta, param, la fuente, la pista, wbr

...

Los elementos Void solo tienen una etiqueta de inicio; las etiquetas de fin no deben especificarse para los elementos void.

W3C | WHATWG

Dicho esto, no es un análisis estricto en HTML5, por lo que no hará ningún daño importante.

 74
Author: Brian R. Bondy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-09 19:30:41

En HTML 5, la barra de cierre es opcional en elementos void como img (estoy agregando esto porque la respuesta actualmente aceptada solo dice: "las etiquetas finales no deben especificarse para elementos void", y no aborda las barras de cierre en elementos void).

Citando de http://www.w3.org/TR/html5/syntax.html#start-tags (número 6):

Entonces, si el elemento es uno de los elementos vacíos, o si el elemento es un elemento extraño, entonces puede haber un solo elemento "/" (U+002F) carácter. Este carácter no tiene ningún efecto en los elementos vacíos, pero en los elementos extraños marca la etiqueta de inicio como de cierre automático.

 74
Author: Free Radical,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-21 04:44:25

De acuerdo con Las etiquetas de inicio son opcionales.

 2
Author: Josh Lee,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-09 19:18:05

No. HTML nunca lo ha requerido, incluso antes de HTML5. Si planea usar XHTML con funciones HTML, entonces sí, es necesario.

 1
Author: Ry-,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-09 19:11:05

DEL W3C:

Void elements: área, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

"Los elementos Void solo tienen una etiqueta de inicio; las etiquetas de fin no deben especificarse para los elementos void."

Http://www.w3.org/TR/html5/syntax.html#void-elements

 0
Author: Fabio Nolasco,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-28 18:29:53

TODAS las etiquetas deben estar cerradas (ya sea por cierre automático, o por una acción de cierre separada). Algunos se cierran automáticamente en HTML4 (como la etiqueta <img>), mientras que otros (como la etiqueta <p>) requieren etiquetas de cierre separadas. Recuerde que TODAS las etiquetas deben estar cerradas o el navegador (si está siendo estricto por su cumplimiento) tendrá errores. Esto significa que incluso las etiquetas que no tienen contenido entre la apertura y el cierre, DEBEN cerrarse de una manera u otra. A continuación examinaré la etiqueta <img> ya que no tiene ningún contenido entre la apertura y el cierre.

En HTML4 es de cierre automático. Esto no significa que no se cierre, ya que recuerda que TODAS las etiquetas deben estar cerradas. Simplemente se cierra por su misma presencia. Así que en HTML4 la etiqueta <img> es simplemente: <img>

En XHTML NO se cierra automáticamente. Esto significa que debe proporcionar una etiqueta de cierre separada como esta: <img></img>

Entonces en HTML5 alguien finalmente se puso inteligente y decidió hacer que cerrar una etiqueta que no tiene contenido entre la apertura y el cierre, un muy tarea sencilla. Use solo una etiqueta, pero tenga una barra antes del signo mayor que, como este: <img />

Esto también es totalmente compatible con HTML4. Si no está utilizando XHTML (que requiere una etiqueta de cierre separada) y no está seguro de si su código está utilizando estándares HTML4 o HTML5. Tu mejor apuesta es tener SIEMPRE una barra de cierre antes del signo mayor que para las etiquetas que no tienen contenido entre la apertura y el cierre. De esta manera SIEMPRE se mostrará correctamente en CADA navegador.

Aquí está un ejemplo de código HTML correctamente escrito que tiene un alto grado de compatibilidad con todos los navegadores.

<!DOCTYPE html>
<html>
<head>
<title>test website</title>
</head>
<body>
<p>This is a test.</p>
<img src="testpic.jpg" />
</body>
</html>
 -14
Author: user2666353,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-09 00:36:44