Veja como usar div e span corretamente: Aprenda a diferença entre um elemento block e um elemento inline.

O elemento div é considerado um container genérico assim como o span. Mas o que é um container genérico?

Imagine num supermercado em que precisamos guardar os produtos que compramos nas sacolas.

No momento em que estamos guardando nossas compras pensamos em como agrupar os produtos nos sacos, e geralmente guardamos produtos com características semelhantes no mesmo saco.

O elemento div e o span seguem essa linha de raciocínio. Imagine que você tem partes do seu HTML de uma seção do site, você pode por exemplo usar uma div para ser a “caixa” desses elementos, os conter num mesmo lugar, agrupá-los para controlar melhor as suas características de estilo pelo CSS.

Se eu agrupo 3 parágrafos e um título h1 dentro de uma div, eu posso alterar características de todos ao mesmo tempo se eu disser no CSS por exemplo que todos os elementos filhos da div devem ter a cor azul.

Qual a diferença entre div e span?

O elemento div é do tipo “Block” e o span é do tipo “inline”. Vamos lá:

O elemento div por ser do tipo bloco vai ocupar toda a largura do lugar que está. Então ao usarmos uma div, ainda que ela não ocupe toda a largura com seu conteúdo não será possível NATURALMENTE colocar outro elemento ao lado dela.

Se por exemplo criássemos 3 divs:

<div>aqui é div 1</div>

<div>Essa é a div 2</div>

<div>E aqui é a div 3</div>

Mesmo que o conteúdo dentro dessas divs seja pequeno, não ocupe toda a largura do espaço, a div vai ocupar toda a largura com espaço em branco, então por exemplo a div 2 será mostrada abaixo da div 1, e a div 3 abaixo da div 2.

Span = inline

O elemento span é do tipo inline. Isso significa que ocupa apenas a largura necessária para o seu conteúdo. Se eu utilizar por exemplo:

<span>Esse trecho com span</span>

<span>Esse também com span</span>

Veremos que esses textos vão ficar lado a lado, pois o primeiro não ocupou toda a lartura do ambiente, o segundo automaticamente é alocado preenchendo o espaço ao lado.

Justamente por isso que o span é utilizado no meio de um texto, pois podemos marcar apenas um trecho desse texto com span e continuarmos o texto normalmente, colocando por exemplo somente esse trecho do span com a cor vermelha.

Ex.:

<p>Lorem Ipsum is simply <span style=”color: red;”>dummy text</span> of the printing and typesetting industry</p>

Agora que já sabemos como usar div e span corretamente, vamos partir para a próxima aula: Criando listas no HTML.