HTML Semântico
Duas páginas podem parecer idênticas e serem construídas de formas muito diferentes por baixo. Uma usa elementos nomeados de acordo com o que contêm: um cabeçalho, uma navegação, uma área principal. A outra envolve tudo na mesma caixa anônima e depende de nomes de classes para diferenciá-los. Na tela, você não consegue diferenciá-los. Em todos os outros aspectos, não são a mesma página. Escolher elementos pelo seu significado é sobre o que é HTML semântico.
O que semântico significa
Semântico significa "relacionado a significado". Um elemento semântico é aquele cujo nome diz o que seu conteúdo é. Um parágrafo vai em um <p> porque é um parágrafo. Um menu de navegação vai em uma <nav> porque é navegação. A tag nomeia a coisa.
Você poderia construir quase qualquer página a partir de uma caixa única de propósito geral e fazê-la parecer certa com estilos. Mas então nada na página diria o que é. Escolher o elemento que nomeia o conteúdo é como etiquetar as caixas quando você se muda. Tudo ainda caberia em caixas simples sem rótulo, mas os rótulos são o que permite que qualquer outra pessoa, ou um navegador, entenda o que está dentro sem abrir cada uma.
<p>, um menu em uma <nav>. Você poderia colocar tudo em caixas simples e estilizar para parecer o mesmo, mas então nada diz o que é. Pense em etiquetar suas caixas de mudança para que qualquer um possa dizer o que está dentro. Os elementos de referência
Um punhado de elementos existe para marcar as grandes regiões de uma página. Esses são os que você busca primeiro:
<header>é o topo de uma página ou seção: um logotipo, um título, uma introdução.<nav>é um conjunto de links de navegação, como o menu principal.<main>é o conteúdo principal, a razão pela qual a página existe.<section>é um pedaço agrupado de conteúdo relacionado, geralmente com seu próprio título.<article>é uma peça independente que ainda faria sentido por conta própria, como um post de blog ou uma notícia.<aside>é conteúdo de lado: links relacionados, uma nota, um anúncio.<footer>é o fundo de uma página ou seção: direitos autorais, detalhes de contato, texto pequeno.
A regra é a mesma toda vez. Se uma região é navegação, vai em uma <nav>, não em uma <div>. Se é o rodapé, vai em um <footer>. Você nomeia a região com o elemento que a corresponde.
<header>
<h1>Cozinha da Marina</h1>
<nav>
<a href="/recipes">Receitas</a>
<a href="/about">Sobre</a>
</nav>
</header>
<main>
<h2>Jantares simples</h2>
<p>Refeições rápidas que você pode fazer depois do trabalho.</p>
</main>
<footer>
<p>Feito em São Paulo.</p>
</footer><header>, <nav>, <main>, <section>, <article>, <aside> e <footer>. Cada uma nomeia uma parte da página, e você escolhe a que corresponde à região que está construindo. Você não tem que memorizá-las hoje, elas surgem de novo e de novo até grudar. div e span, o fallback não-semântico
Nem toda parte de uma página tem um significado que vale a pena nomear. Às vezes você apenas precisa de uma caixa para agrupar coisas para que você possa estilizá-las, ou envolver algumas palavras para colori-las. Para isso há dois elementos simples sem significado próprio.
<div> é um bloco genérico: um contêiner vazio que você usa quando nenhum outro elemento se encaixa. <span> é a mesma ideia para uma pequena série de texto dentro de uma linha. Nenhum deles diz nada sobre seu conteúdo. Eles existem puramente como ganchos para estilização e agrupamento.
<p>O total de hoje é <span class="price">R$ 42,00</span>.</p>
<div class="card">
<h2>Oferta especial</h2>
<p>Dois por um em toda massa.</p>
</div>O <span> envolve um preço para que você possa colori-lo. O <div> agrupa um card para que você possa colocar uma borda ao redor. Busque esses apenas quando nada mais significativo se encaixa, porque eles não dizem ao navegador nada sobre o que está dentro.
<div> é uma caixa simples e <span> é um wrapper simples para algumas palavras, e nenhum deles significa nada. Use-os quando você apenas precisa agrupar ou estilizar algo e nenhum elemento nomeado se encaixa. Se a coisa tem um significado, como um menu ou um botão, use o elemento para isso em vez disso. Escolhendo o elemento certo
Quando você não tem certeza de qual elemento usar, faça uma pergunta clara: o que é essa coisa? Não o que parece, mas o que é. A resposta geralmente nomeia o elemento para você. Uma fileira de links no topo é navegação, então é uma <nav>. Um bloco de texto pequeno no fundo é um rodapé, então é um <footer>. Um preço que você quer colorir não é realmente nada, então é um <span>.
Comece pelo significado e apenas retroceda para um <div> ou <span> quando a resposta real é "é apenas uma caixa". Entrar nesse hábito cedo significa que suas páginas se descrevem, e isso compensa no momento em que você ou qualquer outra pessoa tiver que ler a marcação de novo.
<nav>, texto pequeno é um <footer>, uma caixa simples que você quer estilizar é um <div>. Comece pelo significado toda vez, e suas páginas acabam se descrevendo.