Learn HTML & CSSHTML Semântico
Duas páginas podem parecer idênticas e ser construídas de formas bem diferentes por dentro. Uma usa elementos nomeados de acordo com o que eles 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 classe para diferenciar as partes. Na tela, você não percebe diferença nenhuma. Em qualquer outro aspecto, elas não são a mesma página. Escolher elementos pelo seu significado é o que o HTML semântico propõe.
O que significa "semântico"
Semântico significa "relacionado ao significado". Um elemento semântico é aquele cujo nome diz o que é o seu conteúdo. Um parágrafo fica dentro de um <p> porque é um parágrafo. Um menu de navegação fica dentro de um <nav> porque é navegação. O nome da tag identifica a coisa.
Você poderia construir quase qualquer página usando uma única caixa genérica e fazê-la parecer correta com estilização. Mas, nesse caso, nada na página diria o que ela é. Escolher o elemento que nomeia o conteúdo é como etiquetar as caixas quando você se muda de casa. Tudo ainda caberia em caixas simples e sem etiqueta, mas são as etiquetas que permitem que outra pessoa, ou um navegador, entenda o que há dentro sem precisar abrir cada uma delas.
<p>, um menu dentro de um <nav>. Você poderia colocar tudo em caixas simples e estilizar para parecer igual, mas aí nada diria o que é. Pense nisso como etiquetar as caixas de mudança para que qualquer pessoa saiba o que tem dentro. Os elementos de marco (landmark)
Existe um punhado de elementos criados para marcar as grandes regiões de uma página. São esses os primeiros a que você deve recorrer:
<header>é o topo de uma página ou seção: um logo, um título, uma introdução.<nav>é um conjunto de links de navegação, como o menu principal.<main>é o conteúdo principal, o motivo pelo qual a página existe.<section>é um bloco agrupado de conteúdo relacionado, normalmente com seu próprio título.<article>é uma peça autocontida que ainda faria sentido isolada, como um post de blog ou uma notícia.<aside>é conteúdo à parte: links relacionados, uma nota, um anúncio.<footer>é o rodapé de uma página ou seção: direitos autorais, dados de contato, informações em letras pequenas.
A regra é sempre a mesma. Se uma região é navegação, ela fica dentro de um <nav>, não de um <div>. Se é o rodapé, fica dentro de um <footer>. Você nomeia a região com o elemento que corresponde a ela.
<header>
<h1>Cozinha da Mara</h1>
<nav>
<a href="/recipes">Receitas</a>
<a href="/about">Sobre</a>
</nav>
</header>
<main>
<h2>Jantares de semana</h2>
<p>Refeições rápidas para depois do trabalho.</p>
</main>
<footer>
<p>Feito em Lisboa.</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 precisa memorizá-las hoje, elas vão aparecer várias vezes até você fixar. div e span, a alternativa não semântica
Nem toda parte de uma página tem um significado que valha a pena nomear. Às vezes você só precisa de uma caixa para agrupar coisas e estilizá-las, ou envolver algumas palavras para colori-las. Para isso existem 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 um trecho pequeno de texto dentro de uma linha. Nenhum dos dois 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>Compre um e leve outro, em todos os macarrões.</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 em volta dele. Recorra a esses elementos apenas quando nada mais significativo se encaixar, porque eles não dizem nada ao navegador sobre o que há dentro.
<div> é uma caixa simples e <span> é um envoltório simples para algumas palavras, e nenhum dos dois significa nada. Use-os quando você só precisa agrupar ou estilizar algo e nenhum elemento nomeado se encaixa. Se a coisa realmente tem um significado, como um menu ou um botão, use o elemento correspondente em vez disso. Escolhendo o elemento certo
Quando você não tiver certeza de qual elemento usar, faça uma pergunta simples: o que é essa coisa? Não o que ela parece, mas o que ela é. A resposta costuma indicar o elemento por si só. Uma fileira de links no topo é navegação, então é um <nav>. Um bloco de letras pequenas no final é um rodapé, então é um <footer>. Um preço que você quer colorir não é realmente nada específico, então é um <span>.
Comece a partir do significado, e só recorra a um <div> ou <span> quando a resposta real for "isso é só uma caixa". Criar esse hábito desde já faz com que suas páginas se descrevam por si mesmas, e isso compensa no momento em que você, ou qualquer outra pessoa, precisar reler a marcação.
<nav>, letras pequenas são um <footer>, uma caixa simples que você quer estilizar é um <div>. Comece pelo significado sempre, e suas páginas acabam se descrevendo por si mesmas.