Quando penso em Semântica HTML, diretamente já penso em HTML5.
O HTML5 (lançado a partir de 2009) é uma versão do HTML ainda não concluída, mas que já pode – e deve – ser utilizada por desenvolvedores e navegadores, antes de sua finalização.
Antes do lançamento dessa versão a semântica do HTML era quase nenhuma, quase nenhuma mesmo. Não tinha como, por exemplo, o robô do Google ou um ledor identificar e entender para que servia cada área do site, apenas através do código HTML.
Já com o HTML5, foram inseridas novas TAGS, onde a semântica ficou simples.
Veja a imagem com o comparativo do HTML anterior e do atual:
Perceba que antes era tudo div, então como o navegador iria conseguir diferenciar? Pois é, não ia (nem mesmo com aquelas IDs ali).
A semântica dos novos elementos
Header
<header> é o cabeçalho do site, ou de uma área dele. Nele normalmente são inseridos elementos h1 até h6 (títulos), elementos de navegação, a logo. O elemento <header> pode ser utilizado várias vezes dentro de uma mesma página.
<header> não pode ser filho de outro <header> ou <footer> ou ainda <address>.
Main
<main> demarca onde deve estar o conteúdo principal da página. Diferentemente do <header>, só pode existir uma <main> por página. Esta tag ainda não é compatível com todos os navegadores, mas mesmo assim já deve ser utilizada. Veja mais sobre a tag main aqui.
Footer
<footer> é rodapé do site, ou de uma área dele. Normalmente nele ficam informações de autoria, contato, Copyright e outros. Podem existir vários footers na mesma página.
Nav
<nav> marca uma seção do documento que agrupa links, sejam eles externos ou internos. A <nav> pode estar no cabeçalho, no rodapé ou em outras seções do documento, se relacionando assim com a navegação primária ou global. Mas atente-se, nem todo link deve estar dentro de nav, dentro desta tag devem estar conjuntos de links.
Section
Entre todos estes elementos estruturais que estou tratando aqui, <section> é o mais genérico. Dentro dele podemos colocar <header>, <article> e <footer>. Sua principal função é dividir o conteúdo em grandes blocos, seções.
Article
Representa um artigo, um conteúdo independente e bastante relevante, que pode ser um artigo, post ou bloco de texto. Também pode ser utilizado em widgets. O conteúdo de um <article> deve poder ser distribuído de forma independente do resto do site.
Aside
<aside> define um conteúdo que faz alguma referência ao conteúdo principal que está a sua volta. Normalmente em uma barra lateral exibindo informações contextuais, assuntos relacionados, publicidade, ou navegação secundária.
Na construção de sites institucionais, por exemplo, você vai usar principalmente <header>, <main>, <nav> e <footer>.
Lembrando que todas as tags que abordei foram implementadas no HTML5.