Difference between span img and div img

Question

I’ve seen it in some source code:

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

and in others:

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

Is that wrong? I always thought <span> used exclusively for rendering text.

Answer 1

It depends on your goal. This is used to inherit the properties of the top element.

• Using <span> It’s like you want to apply style="display: inline".

• Using <div> It’s like you want to apply style="display: block".

That is, the use depends on how you want to fit the image into your layout.

Answer 2

Although both can do practically the same things there is a semantic difference.

As the name implies <div> should be used to determine divisions, various information blocks, to form a part of the layout.

Already the <span> is used to indicate an information snippet, often an excerpt from a text, or images and other elements individually, without wanting to assemble a block.

Unable to use <div> within HTML content, that is, you cannot say that a word of text has a special feature saying that there is a block of layout. You have to use the <span>.

More and more HTML has tags that give better meaning to the content and one should choose the most suitable even when it is possible to use any of them. They are relatively generic elements and should be used to the detriment of elements that were previously used mistakenly, such as <font> (now use a <span>) or <p> or <td> (now use <div>). <font> in fact is considered obsolete and should never be used, the others can be used but only when you really want a paragraph or a cell of a table, should not be used to simulate blocks of layout.

Example:

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

I put in the Github for future reference.

Look what happens when we try to use the <span> as block. The text does not flow, it is meant to be used as inline, even if it is allowed to use otherwise.

The two shapes presented in the example are correct. The image is an element inline, so it can be used normally with a <span>. But block elements can also contain elements inline no problems. The behavior may be slightly different but there is nothing wrong with its use. If the image should be inside a block, place it inside a block and dot. There is no reason to create a span without him being necessary, without him needing to be inline.

Answer 3

Briefly, <span> is most often used for elements outside the general rule of the grouping element surrounding it (a <div> for example)

Take a look at this site, it’s very educational: http://pt-br.html.net/tutorials/css/lesson8.php

Answer 4

The tag<div> is a block element used to create a container to contain and position other elements. It is usually used for absolute content placement.

The tag<span> is an embedded element that is used to render text using a style sheet. It is usually used to change the style of an element or text within a sentence or block like <p> <div>, or <tabela>

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

Good practice HTML5

<figure><img src="../imagens/1.jpg"></figure>