Curso de HTML / Quando usar div e span?

div e span agrupam conteúdo sem dar um significado específico. Use-os quando o CSS ou o JavaScript precisam de um alvo e nenhum elemento HTML mais específico descreve o conteúdo. Um div geralmente agrupa partes maiores; um span agrupa uma parte de uma frase.

Em que div e span são diferentes?

Um div pode conter conteúdo em fluxo como parágrafos, listas ou até um cartão inteiro. Um span é destinado ao conteúdo fraseado dentro de uma frase. Nenhum dos dois indica que seu conteúdo é um título, um botão ou particularmente importante. Por padrão, um div começa como um bloco e um span permanece em linha, mas o CSS pode alterar sua exibição. Escolha com base na estrutura do conteúdo, não apenas em sua aparência. Para uma região com um papel de nível de página, escolha primeiro um elemento semântico apropriado em Dividir uma página com elementos semânticos.

Não coloque um parágrafo ou um div dentro de um span. Se seu único objetivo é uma quebra de linha, decida primeiro se você precisa de um novo parágrafo ou de uma alteração de layout CSS ao invés de outro contêiner.

Agrupe apenas o que precisa ser estilizado

Coloque este HTML em um body de um documento e o CSS em um elemento style em seu head.

<div class="product-card">

  <h2>Caneca de viagem</h2>

  <p>Preço: <span class="price">15 $</span></p>

</div>

.product-card {

  padding: 16px;

  border: 1px solid #dadada;

}

.price {

  color: #075cb4;

  font-weight: 700;

}

Todo o cartão recebe uma borda, enquanto apenas o preço muda de cor e de peso da fonte. O atributo class dá um nome ao CSS para selecionar. Mesmo sem CSS, o nome do produto continua sendo um título e o preço continua em um parágrafo. Se o preço não ficar azul, verifique se class="price" no HTML corresponde a .price no CSS. O ponto indica um seletor de classe; ele não faz parte do nome da classe HTML.

Prefira um elemento com um significado real

Para a navegação principal, considere nav em vez de um div genérico. Para um artigo independente, considere article. Para uma ação que os usuários podem ativar, use button em vez de criar um span clicável. O elemento nativo correto já transmite significado e frequentemente fornece comportamento ao teclado. Para uma ação que os usuários ativam, diferencie os tipos de botões descritos em Use textarea, select, option e button.

O preço neste exemplo não precisa de tratamento especial dos dados, então span é suficiente. Você pode manter uma classe CSS ao mesmo tempo em que troca seu elemento por um elemento mais significativo mais tarde. Consulte a lista de elementos HTML de MDN ao escolher um elemento apropriado.

Separe o conteúdo permitido da exibição CSS

O conteúdo de fluxo (flow content) é uma categoria usada para o fluxo de conteúdo de uma página, incluindo parágrafos, listas e seções. O conteúdo fraseado (phrasing content) é usado dentro de passagens de texto, como texto, ênfase, links e imagens. div agrupa o conteúdo de fluxo; span agrupa o conteúdo fraseado. Essas categorias são diferentes das regras de CSS sobre a ocupação de uma linha.

<!-- Não conforme: um parágrafo dentro de span -->
<span class="card"><p>Descrição do produto</p></span>

<!-- Um contêiner que permite o parágrafo -->
<div class="card"><p>Descrição do produto</p></div>

Escrever span { display: block; } não torna um parágrafo válido dentro de um span. Compare os fragmentos separadamente e, em seguida, mantenha a mesma classe CSS no contêiner corrigido. Escolha um elemento do modelo de conteúdo em vez de apenas mudar as tags para esconder um problema visual.

Referência de span na MDN · Referência de div na MDN

Erros comuns

Não construa cada região da página apenas usando div para facilitar a estilização do layout. Da mesma forma, não dê a um contêiner um elemento semântico cujo significado não corresponda. Um span estilizado não se torna um título ou botão apenas porque parece ser. Comece pelo conteúdo e pela interação, e depois adicione contêineres genéricos apenas onde for necessário.