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.
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.
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.
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
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>
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.