¿Cómo cerrar la etiqueta <img> correctamente?

122

<img src='stackoverflow.png'>
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />

¿Cuál (es) de ellos es correcto?

html

— insertar nombre de usuario aquí
fuente

6

La pregunta es "¿Cómo cerrar una etiqueta <img> correctamente?" que es una pregunta real, y las respuestas son útiles. Esta pregunta no debería haberse cerrado.

3

La pregunta, actualmente, está bien. Es no ambigua, imprecisa, incompleta, demasiado amplia, o rhetorial. También hay una gran respuesta a continuación.

— David J.

No sé cuál de las siguientes respuestas es correcta, pero curiosamente, el inspector de código de Firefox agrega el </img> al final de la etiqueta si no lo pone allí. Y IE no lo hace. Esto es significativo en mi universo.

— Chiwda

PS Dreamweaver inserta la etiqueta /> XHTML.

— Chiwda

50

<img src='stackoverflow.png' />

Funciona bien y cierra la etiqueta correctamente. Es mejor agregar el altatributo para personas con discapacidad visual.

— Ed Heal
fuente

4

Es cierto que <img />es válido en [X] HTML / XML, aunque el uso de XHTML es muy raro hoy en día y si su servidor está sirviendo las páginas, text/htmltodo lo que tiene que preocuparse es escribir HTML válido. Las probabilidades de tener que migrar una aplicación HTML a XHTML son casi nulas.

— Fabrício Matté

1

La respuesta anterior no se validará con el verificador HTML del W3C si tiene como objetivo 4.01 Transitional y superior. Consulte también Servicio de validación de marcado W3C . Creo que la respuesta anterior requiere HTML5 o XHTML. Para evitar fallas de validación, debe usar el uno <img src='stackoverflow.png'>(si le importa).

— jww

1

@ FabrícioMatté Subestimas gravemente xhtml en el uso real. Cuanto más grande sea la empresa, es más probable que trabajen con xhtml en lugar de html o html5 formateado como xhtml (para un análisis fácil / rápido), o trabaje con otras cosas como microdatos o marcado mejorado como ixbrl.

— Robert McKee

Hay una gran diferencia entre "funciona bien" y "especificado" y nunca encontrará ninguna especificación HTML que indique el uso de la barra de cierre en esa etiqueta. Como otros mencionaron, está permitido no romper los sitios web originalmente escritos para usar XHTML / XML, pero en ninguna parte encontrará palabras o ejemplos que indiquen que se necesita su uso. De hecho, encontrará una redacción que dice que no tiene significado y que los navegadores deben ignorarla.

— Rob

Rob - Hace 6 años hubo un problema. Esto lo solucionó. Supongo que ahora los navegadores son mejores

— Ed Heal

163

Este es HTML5 válido y está absolutamente bien sin cerrarlo. Es un elemento llamado vacío:

<img src='stackoverflow.png'>

Las siguientes son etiquetas XHTML válidas. Tienen que estar cerrados. El último también está bien en HTML 5:

<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />

— Marvin Rabe
fuente

5

No solo es HTML5 válido, sino también válido en HTML4. HTML no requiere elementos "vacíos" de cierre automático, como dijiste. +1 para la respuesta coherente.

— Fabrício Matté

2

El HTML5 o XHTML no se validará con el verificador de HTML del W3C si tiene como objetivo 4.01 Transitional y superior. Consulte también Servicio de validación de marcado W3C . Necesitas usar el uno <img src='stackoverflow.png'>(si te importa).

— jww

Comentando después de muchos años ... ¡Me confundí al ver la <img src="about:logo" alt="about:logo">etiqueta en la about:logopágina de Firefox 76 ! Aunque document.body.innerHTMLmuestra <img src=\"about:logo\" alt=\"about:logo\">... Muy buena respuesta ...

— S.Goswami

4

De hecho, solo el primero es válido en HTML5

<img src='stackoverflow.png'>

Solo los dos últimos son válidos en XHTML

<img src='stackoverflow.png'></img>  
<img src='stackoverflow.png' />

(Aunque no es estrictamente obligatorio, alttambién debe incluirse un atributo _ normalmente_).

Dicho esto, su página HTML5 probablemente se mostrará según lo previsto porque los navegadores reescribirán o interpretarán su html según lo que cree que quiso decir. Eso puede significar que convierte una etiqueta, por ejemplo, de
<div />en <div></div>. O tal vez simplemente ignora la barra final <img ... />.
consulte 2016: Sirva HTML5 como XHTML 5.0 para validación heredada.
ver: discusión de 2011 y enlaces adicionales aquí, aunque con el tiempo algunos bits pueden haber cambiado

En parte, esto se debe a que los navegadores se esfuerzan mucho en corregir los errores. Además, porque existe mucha confusión sobre las etiquetas de cierre automático y las etiquetas nulas. Finalmente, la especificación ha cambiado, o no siempre ha sido clara, y los navegadores intentan ser compatibles con versiones anteriores.

Por lo tanto, aunque probablemente pueda salirse con la suya con cualquiera de las tres opciones,
solo la primera se adhiere al estándar HTML5 y se garantiza que pasará un validador de HTML5.

Una buena estrategia podría ser:

Escribe código nuevo sin la barra de cierre.
Al volver a factorizar el código, actualice las etiquetas de imagen cercanas a medida que las cruza.
No se preocupe demasiado por las etiquetas de los archivos heredados que no toque, a menos que surja una necesidad particular.

Aquí hay una lista de etiquetas que no deben cerrarse en HTML5 :

 <br>    <hr>    <input>       
 <img>  <link>   <source>  
 <col>  <area>   <base>
 <meta> <embed>  <param>  
<track>  <wbr>   <keygen> (HTML 5.2 Draft removed)

— SherylHohman
fuente

1

Esto es técnicamente incorrecto. Un elemento vacío de cierre automático es perfectamente válido en html 5. Consulte html.spec.whatwg.org/#start-tags que sería <img src='stackoverflow.png' />válido en cualquier versión de XHTML y HTML 5.

— Robert McKee

1

@RobertMcKee No, es técnicamente correcto. Si bien se permite el uso de la barra oblicua de cierre y no se marcará como un error, en ninguna parte de ninguna especificación HTML verá que esté especificado como para usarse. Está permitido no romper los sitios web más antiguos que se basaron en XHTML / XML, pero en ningún lugar encontrará ninguna especificación HTML que muestre, por palabras o ejemplo, el uso de una barra oblicua de cierre en esas etiquetas donde están especificadas por el W3C o WHATWG.

— Rob

@Rob De acuerdo con el documento WHATWG que vinculé anteriormente en la sección 12.1.2.1.6 -

Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.

img es un elemento vacío según la sección 12.1.2

— Robert McKee

1

@RobertMcKee Sí. Esa es (parte de) la especificación que describe por qué se permite la barra (por las razones que di en mi comentario anterior). Sin embargo, debe mirar la especificación real para ese elemento, img en este caso, que muestra claramente, mediante palabras y ejemplos, que no se requiere ni se especifica ninguna barra de cierre. De hecho, sin buscarlo, la lectura adicional en esa sección indicará que la barra de cierre no tiene significado, no hace nada y los navegadores deben ignorarla. Por lo tanto, es inútil y sin sentido y nos devuelve a mi comentario original: no se usa la barra de cierre.

— Rob

1

@Rob Sí, es opcional, pero completamente válido para hacerlo. Lo que hace que la declaración sea Actually, only the first one is valid in HTML5técnicamente incorrecta. El segundo también es válido en HTML5. No es obligatorio, pero es válido. Nadie argumenta que sea necesario. Solo que, según las especificaciones, el uso de la forma de cierre automático de la etiqueta es válido en todas las formas actuales de XHTML y HTML.

— Robert McKee

2

El mejor uso de las etiquetas que debe utilizar:

<img src="" alt=""/>

También puedes usar en HTML5:

<img src="" alt="">

Estos dos son completamente válidos en HTML5. Elija uno de ellos y quédese con él.

— Md. A. Barik
fuente

El primero no es el mejor porque no está especificado en ningún estándar HTML, mientras que el segundo sí lo está. ¡El primero está permitido solo por razones históricas! (Compatibilidad con el uso de XHTML / XML en sitios web más antiguos que se romperían si los navegadores no lo permitieran.)

— Rob

No estoy seguro de lo que Rob está tratando de decir aquí, pero la especificación html especifica que la primera es válida.

— Robert McKee

2

Ambos la respuesta correcta. HTML5 sigue reglas estrictas y en HTML5 podemos cerrar todas las etiquetas. Entonces, depende de usted usar HTML5 o HTML y seguir una respuesta adecuada.

<img src='stackoverflow.png'>
<img src='stackoverflow.png' />

La segunda propiedad es más apropiada.

— PLB
fuente

Incorrecto. El primero es el único especificado en cualquier especificación HTML. El segundo está permitido solo por razones históricas pero, nuevamente, no se especifica como requerido en ninguna parte.

— Rob

1

-La etiqueta está vacía y solo contiene atributos. -La etiqueta no tiene etiqueta 'Cierre'.

Entonces,

<img src='stackoverflow.png'>
<img src='stackoverflow.png' />

ambos son correctos también en HTML5.

— PLB
fuente

¡Lo primero es correcto! El segundo solo está permitido por razones históricas. (Compatibilidad con el uso de XHTML / XML en sitios web más antiguos que se romperían si los navegadores no lo permitieran).

— Rob

1

Es útil tener la etiqueta de cierre si alguna vez intenta leerla con un analizador XHTML. Podría ser un caso marginal, pero lo hago todo el tiempo. No hace daño tenerlo, y significa que sé que podemos usar una serie de lectores XML que no se derrumbarán cuando golpeen una etiqueta abierta.

Si nunca va a intentar analizar el contenido, ignore el cierre.

— AmateurD
fuente