<div> e <span>Antes da evolução para o HTML5, as tags <div> e <span> eram as únicas ferramentas disponíveis para criar o layout de um site. Elas são "containers" (caixas) vazios, sem nenhum significado especial para o navegador, usados apenas para agrupar elementos.
<div> (Division): É um elemento de bloco. Ela ocupa 100% da largura disponível e sempre começa em uma nova linha. É usada para criar as grandes divisões do site (Topo, Menu, Conteúdo, Rodapé).<span>: É um elemento inline (em linha). Ela ocupa apenas o espaço do conteúdo e não quebra a linha. É usada para destacar ou aplicar estilos a partes específicas dentro de um texto.HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Estrutura Baseada em Divs</title>
</head>
<body>
<div id="cabecalho">
<h1>Meu Site Antigo</h1>
<div id="menu">
<p>Início | Sobre | Contato</p>
</div>
</div>
<div id="corpo-do-site">
<p>Este é o conteúdo principal dentro de uma <span style="color: blue;">div de bloco</span>.</p>
</div>
<div id="rodape">
<p>Todos os direitos reservados.</p>
</div>
</body>
</html>
No HTML5, foram introduzidas tags que possuem significado. Em vez de usar uma div para tudo, usamos tags que explicam ao navegador e aos buscadores (Google) o que cada parte do site realmente é.
nav) ou o conteúdo principal (main), facilitando a navegação.<article> tem muito mais peso do que um texto perdido em uma div genérica.Aqui estão as "caixas inteligentes" que substituem as divs na estrutura principal:
<header>: Cabeçalho da página ou de uma seção.<nav>: Contém os links de navegação (menus).<main>: Conteúdo principal e exclusivo da página. Deve haver apenas um por página.