Difference between span img and div img

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

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

While <span> is used to indicate an excerpt of information, often an excerpt from a text, or images and other elements individually, without wanting to mount a block.

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

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

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>

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

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

It depends on your purpose. This is used to inherit the properties of the upper element.

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

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

That is, the usage depends on how you want to embed the image in your layout .

Briefly, <span> is most often used for elements that deviate from the general rule of the grouping element that surrounds it (a <div> for example)

At a glance at this site, it is well didactic: link

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

The <span> tag is a built-in element that is used to render text using a style sheet. It is typically used to change the style of an element or text within a statement or block as <p> <div> , or <tabela>

Source: link

Good HTML5 practice

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