Como fechar a tag <img> corretamente?


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

Qual deles está correto?


6
A pergunta é "Como fechar uma tag <img> corretamente?" que é uma pergunta real, e as respostas são úteis. Esta questão não deveria ter sido encerrada.

3
A questão, atualmente, está bem. É não ambíguo, vago, incompleta, excessivamente ampla, ou rhetorial. Há uma ótima resposta abaixo também.
David J.

Não sei qual das respostas a seguir está correta, mas, curiosamente, o Code Inspector do Firefox adiciona o </img> no final da tag, se você não a colocar lá. E o IE não. Isso é significativo no meu universo.
Chiwda

O PS Dreamweaver insere a tag /> XHTML.
Chiwda

Respostas:


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

Funciona bem e fecha a etiqueta corretamente. É melhor adicionar o altatributo para pessoas com deficiência visual.


4
É correto que <img />seja válido em [X] HTML / XML, embora o uso de XHTML seja muito raro atualmente e se seu servidor estiver servindo as páginas, pois text/htmltudo o que você precisa se preocupar é escrever HTML válido. As chances de migrar um aplicativo HTML para XHTML são quase nulas.
Fabrício Matté 13/02/2013

1
A resposta acima falhará na validação com o verificador HTML do W3C se tiver como alvo 4.01 Transitional e superior. Consulte também o Serviço de validação de marcação do W3C . Acredito que a resposta acima requer HTML5 ou XHTML. Para evitar falhas na validação, você precisa usar essa <img src='stackoverflow.png'>(se for importante para você).
JWW

1
@ FabrícioMatté Você subestima severamente o xhtml no uso real. Quanto maior a empresa, maior a probabilidade de eles trabalharem com xhtml sobre html ou html5 no formato xhtml (para uma análise fácil / rápida) ou trabalhar com outras coisas como microdados ou marcação aprimorada como ixbrl.
Robert McKee

Há uma grande diferença entre "funciona bem" e "especificado", e você nunca encontrará nenhuma especificação HTML destacando o uso da barra final nessa tag. Como já mencionado, é permitido não violar sites originalmente escritos para usar XHTML / XML, mas em nenhum lugar você encontrará palavras ou exemplos afirmando que seu uso é necessário. Na verdade, você encontrará palavras afirmando que não tem significado e os navegadores são instruídos a ignorá-lo!
28419 Rob

Rob - 6 anos atrás, houve um problema. Isso corrigiu isso. Acho que agora os navegadores são melhores
Ed Heal

163

Este é HTML5 válido e é absolutamente bom sem fechá-lo. É o chamado elemento vazio:

<img src='stackoverflow.png'>

A seguir estão as tags XHTML válidas. Eles têm que estar fechados. O último também é bom no HTML 5:

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

5
Não é apenas HTML5 válido, mas também válido em HTML4. O HTML não requer elementos "nulos" de fechamento automático, como você disse. +1 para a resposta coerente.
Fabrício Matté 13/02/2013

2
O HTML5 ou XHTML falhará na validação com o verificador HTML do W3C se tiver como alvo 4.01 Transitional e superior. Consulte também o Serviço de validação de marcação do W3C . Você precisa usar esse <img src='stackoverflow.png'>(se isso for importante para você).
JWW

Comentando depois de muitos anos ... Fiquei confuso ao ver a <img src="about:logo" alt="about:logo">tag na about:logopágina do firefox 76 ! Embora document.body.innerHTMLmostre <img src=\"about:logo\" alt=\"about:logo\">... Muito boa resposta ...
S.Goswami 21/04

4

Na verdade, apenas o primeiro é válido em HTML5

<img src='stackoverflow.png'>  

Apenas os dois últimos são válidos em XHTML

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

(Embora não seja estritamente necessário, alttambém deve ser incluído um atributo _).

Dito isto, sua página HTML5 provavelmente será exibida como pretendido, porque os navegadores reescreverão ou interpretarão seu html da maneira que eles pensam que você quis dizer. Isso pode significar que ele transforma uma tag, por exemplo,
<div />em <div></div>. Ou talvez apenas ignore a barra final <img ... />.
consulte 2016: sirva HTML5 como XHTML 5.0 para validação herdada.
veja: discussão de 2011 e links adicionais aqui, embora com o tempo alguns bits possam ter mudado

Em parte, isso ocorre porque os navegadores tentam muito corrigir os erros. Além disso, porque há muita confusão sobre tags de fechamento automático e tags nulas. Finalmente, as especificações foram alteradas ou nem sempre foram claras e os navegadores tentam ser compatíveis com versões anteriores.

Portanto, embora você possa se dar bem com qualquer uma das três opções,
apenas a primeira segue o padrão HTML5 e é garantida a aprovação de um validador HTML5.

Uma estratégia sólida pode ser:

  • Escreva um novo código sem a barra de fechamento.
  • Ao refazer o código, atualize as tags de imagem próximas, conforme você as encontra.
  • Não se preocupe excessivamente com as tags nos arquivos herdados que você não toca, a menos que surja uma necessidade específica.

Aqui está uma lista de tags que não devem ser fechadas no HTML5 :

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

1
Isso é tecnicamente incorreto. Um elemento vazio de fecho automático é perfeitamente válido em html 5. Veja html.spec.whatwg.org/#start-tags que tornaria <img src='stackoverflow.png' />válida em qualquer versão do XHTML e HTML 5.
Robert McKee

1
@RobertMcKee Não, é tecnicamente correto. Embora o uso da barra de fechamento seja permitido e não seja sinalizado como erro, em nenhuma parte da especificação HTML você verá que ela está especificada para ser usada. É permitido não quebrar sites mais antigos baseados em XHTML / XML, mas em nenhum lugar você encontrará nenhuma especificação HTML mostrando, por palavras ou exemplo, o uso de uma barra nas tags em que elas são especificadas pelo W3C ou WHATWG.
Rob

@Rob De acordo com o documento do WHATWG que eu vinculei acima na seção 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 é um elemento nulo por seção 12.1.2
Robert McKee

1
@RobertMcKee Sim. Essa é (parte da) especificação que descreve o motivo pelo qual a barra é permitida (pelas razões que dei no meu comentário anterior). No entanto, você deve observar a especificação real desse elemento - img neste caso - que mostra claramente, por palavras e exemplos, que nenhuma barra final é necessária ou especificada. De fato, sem procurá-lo, uma leitura mais aprofundada nessa seção indicará que a barra final não tem significado, não faz nada e é necessário que os navegadores a ignorem. Portanto, é inútil e sem sentido e nos traz de volta ao meu comentário original: a barra final não é usada.
Rob

1
@ Rob Sim, é opcional, mas é completamente válido. O que torna a declaração Actually, only the first one is valid in HTML5tecnicamente incorreta. O segundo também é válido em HTML5. Não é necessário, mas é válido. Ninguém está argumentando que isso é necessário. Somente isso de acordo com as especificações, o uso do formulário de fechamento automático da tag é válido em todas as formas atuais de XHTML e HTML.
Robert McKee

2

O melhor uso de tags que você deve usar:

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

Além disso, você pode usar em HTML5:

<img src="" alt="">

Esses dois são completamente válidos no HTML5 Escolha um deles e fique com ele.


O primeiro não é o melhor, pois não está especificado em nenhum padrão HTML enquanto o segundo é. O primeiro é permitido apenas por razões históricas! (Compatibilidade com o uso de XHTML / XML em web sites mais velhos que quebrariam deve navegadores proibi-la.)
Rob

Não sei o que Rob está tentando dizer aqui, mas a especificação html especifica que a primeira é válida.
Robert McKee

2

A resposta certa. O HTML5 segue regras rígidas e, no HTML5, podemos fechar todas as tags. Portanto, depende de você usar HTML5 ou HTML e seguir uma resposta apropriada.

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

A segunda propriedade é mais apropriada.


Incorreta. O primeiro é o único especificado em qualquer especificação HTML. O segundo é permitido apenas por razões históricas, mas, novamente, não é especificado conforme necessário em nenhum lugar.
Rob

1

-A tag está vazia e contém apenas atributo. -A tag não possui a tag 'Closing'.

Assim,

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

ambos estão corretos no HTML5 também.


O primeiro está correto! O segundo é permitido apenas por razões históricas. (Compatibilidade com o uso de XHTML / XML em web sites mais velhos que quebrariam deve navegadores proibi-la.)
Rob

1

É útil ter a tag de fechamento se você tentar lê-la com um analisador XHTML. Pode ser um caso extremo, mas faço isso o tempo todo. Isso não prejudica tê-lo, e significa que sei que podemos usar uma variedade de leitores XML que não se perderão quando atingirem uma marca não fechada.

Se você nunca vai tentar analisar o conteúdo, ignore o fechamento.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.