5

Já vi em alguns códigos-fonte:

<span> <img="../imagens/1.jpg"></span>

e em outros:

<div> <img="../imagens/1.jpg"></div>

Isso está errado? sempre pensei que o <span> fosse usado exclusivamente para a renderização de textos.

5
  • Você pode citar um código que tenha exatamente esta sintaxe?
    – Maniero
    Commented 15/01/2015 às 17:34
  • @bigown infelizmente eu não lembro o site. Mas, não é a primeira vez que vejo isso. Commented 15/01/2015 às 17:54
  • Sugiro que tenhas atenção a utilização de boas práticas de HTML5 Commented 15/01/2015 às 17:55
  • 30 Minutos depois de colocares a pergunta e teres inúmeras respostas editas a mesma e alteras todo o significado do código? Primeiro tratava-se de um atributo img agora trata-se da tag <img/> dentro de determinado elemento ? Recomendo que leias a secção de ajuda sobre como perguntar para evitares que as pessoas que tentam ajudar percam o seu tempo em vão.
    – Zuul
    Commented 15/01/2015 às 18:07
  • @Zuul foi um descuido meu. Comentei isso em uma postagem, pois foi lá que percebi o erro. Commented 15/01/2015 às 18:13

4 Respostas 4

7

Depende do seu objetivo. Isso é utilizado para herdar as propriedades do elemento superior.

  • Usando <span> é como se você quisesse aplicar style="display: inline".

  • Usando <div> é como se você quisesse aplicar style="display: block".

Ou seja, o uso depende de como você deseja encaixar a imagem no seu layout.

6

Apesar de ambos poderem fazer praticamente as mesmas coisas há uma diferença semântica.

Como o nome indica <div> deve ser usado para determinar divisões, blocos de informações diversas, para formar uma parte do layout.

Já o <span> é usado para indicar um trecho de informação, muitas vezes um trecho de um texto, ou imagens e outros elementos individualmente, sem querem montar um bloco.

Não é possível usar <div> dentro de conteúdo do HTML, ou seja, você não pode dizer que uma palavra do texto tenha uma característica especial dizendo que ali é um bloco de layout. Você tem que usar o <span>.

Cada vez mais o HTML tem tags que dão melhor significado para o conteúdo e deve-se escolher o mais adequado até mesmo quando é possível usar qualquer um deles. Eles são elementos relativamente genéricos e devem ser usados em detrimento aos elementos que antes eram usados de forma equivocada, como <font> (agora use um <span>) ou <p> ou <td> (agora use <div>). <font> de fato é considerada obsoleta e não deve ser usada nunca, as demais podem ser usadas mas apenas quando você realmente quer um parágrafo ou uma célula de uma tabela, não deve ser usado para simular blocos de layout.

Exemplo:

#blocovertical1{
  display:block;
}

#textoEspecial1{
  display:inline;
  color:red;
}

#textoEspecial2{
  display:block;
  color:blue;
}
<div id="blocovertical1">
   <p>Lorem ipsum dolor sit amet, <span id="textoEspecial1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
   <p>Nam <span id="textoEspecial2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p> 
</div>

Coloquei no GitHub para referência futura.

Olha o que acontece quando tentamos usar o <span> como block. O texto não flui, ele é feito para ser usado como inline, ainda que seja permitido usar de outra forma.

As duas formas apresentadas no exemplo estão corretas. A imagem é um elemento inline, portanto pode ser usado normalmente com um <span>. Mas elementos de bloco também podem conter elementos inline sem problemas. O comportamento pode ser ligeiramente diferente mas não há nada errado no seu uso. Se a imagem deve estar dentro de um bloco, coloque ela dentro de um bloco e ponto. Não há razão para criar um span sem que ele seja necessário, sem que ele precise estar inline.

1
  • Você está certo, eu coloquei errado o exemplo, mas já arrumei. Todavia, entendi a sua explicação. Commented 15/01/2015 às 17:57
3

De maneira resumida, <span> é mais frequentemente utilizado para elementos que fogem à regra geral do elemento agrupador que o envolve (uma <div> por exemplo)

De uma olhada nesse site, está bem didático: http://pt-br.html.net/tutorials/css/lesson8.php

0

A tag<div> é um elemento de bloco usado para criar um recipiente para conter e posicionar outros elementos. Ela é normalmente usada para posicionamento absoluto do conteúdo.

A tag<span> é um elemento embutido que é usado para renderizar o texto usando uma folha de estilos. Ela é normalmente usada para alterar o estilo de um elemento ou texto dentro de uma sentença ou bloco como <p> <div>, ou <tabela>

Fonte: http://support.microsoft.com/kb/180153/pt-br

Boa prática HTML5

<figure><img src="../imagens/1.jpg"></figure>
4
  • <span> pode sim ser utilizado com imagens. Commented 15/01/2015 às 17:33
  • @ Cassio Milanelo - Poder pode, mas não se deve..é uma questão de boa prática. Para os casos de imagem deve ser utilizado o <figure> Commented 15/01/2015 às 17:34
  • A fonte foi tirada da tag Microsoft? Lá não tem nada escrito sobre este assunto.
    – Maniero
    Commented 15/01/2015 às 17:46
  • 1
    @ bigown - Foi alguém que editou...apenas tinha o nome Microsoft...voltei a editar e coloquei o link Commented 15/01/2015 às 17:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .