O que é o <div>?

• O marcador <div> é usado para agrupar elementos em bloco.

• Serve como uma “caixa” que pode conter outros elementos (texto, imagens, listas, etc.).

• Normalmente é usado para estruturar secções de uma página.

• Ocupa toda a largura disponível (comportamento block).

Exemplo:

O que é o <span>?

• O marcador <span> é usado para agrupar texto em linha.

• Permite aplicar estilos ou destacar apenas uma parte do conteúdo.

• Ao contrário do <div>, não quebra a linha (comportamento inline).

Exemplo:

Diferença entre <div> e <span>

• <div> → organiza blocos inteiros de conteúdo.

• <span> → organiza partes pequenas de texto ou elementos em linha.

Pensa assim:

• Div é como uma caixa grande que guarda várias coisas.

• Span é como uma etiqueta que destacamos dentro de uma frase.

Exemplo prático com div e span

Neste exemplo:

• O <div> cria uma área com fundo cinzento.

• O <span> destaca apenas a idade com outra cor.

Porque são importantes?

• O <div> permite organizar melhor a página em áreas distintas (ex.: cabeçalho, menu, rodapé).

• O <span> ajuda a personalizar pedaços de texto sem mexer no resto.

• Ambos serão muito úteis mais à frente, quando introduzirmos CSS para dar estilo às páginas.