Não basta funcionar. Precisa fazer sentido.

HTML semântico é, basicamente, usar tags que descrevem melhor o papel do conteúdo.

Em vez de sair empilhando div para tudo, você usa elementos que contam ao navegador e a outras ferramentas o que cada parte da página representa.

Exemplo

Carregando...

Tags semânticas comuns

• <header> para cabeçalho;
• <nav> para navegação;
• <main> para conteúdo principal;
• <section> para uma seção;
• <article> para conteúdo independente;
• <footer> para rodapé.

Por que isso é melhor?

Porque o código fica mais fácil de entender, manter e navegar.

Uma pessoa olhando o HTML entende mais rápido a estrutura. Ferramentas assistivas também ganham contexto.

Em resumo: semântica não é perfumaria. É clareza.