O HTML semântico é uma abordagem no desenvolvimento web que enfatiza o uso correto e significativo dos elementos, escolhendo aqueles que melhor descrevem o conteúdo que está sendo apresentado.
Por exemplo, em vez de usar um <div> genérico para todo o conteúdo, é preferível usar elementos mais específicos, como <header>, <nav>, <main>, <article>, <section>, <footer>, entre outros, de acordo com a estrutura e a natureza do conteúdo. Isso é utilizado para melhorar a SEO (Search Engine Optimization) e a acessibilidade da página.
Uma das principais características dessa abordagem é a importância dos cabeçalhos, que são representados pelos elementos <h1> a <h6>, sendo essenciais para indicar a hierarquia do conteúdo. Os sites de pesquisa dão importância aos cabeçalhos e por isso é um ponto de foco.
O texto alternativo em imagens é crucial tanto para a acessibilidade quanto para o SEO. Tendo o cuidado de inserir o atributo alt nas tags de imagem, fornecendo um texto descritivo, isso permite que leitores de tela leiam o texto e que sites de pesquisa considerem esse texto ao classificar as páginas.
Ainda sobre textos no contexto de semântica, é importante usar links descritivos em vez de genéricos. Por exemplo, em vez de construir um link com “clique aqui”, escreva um texto que deixe claro o destino desse link.
Para aprimorar a questão de acessibilidade do seu site é possível usar o WAI-ARIA, um conjunto de atributos e propriedades que fornece recursos adicionais para descrever a função, o estado e o comportamento dos elementos, como menus, formulários, carrosséis e outros, tornando-os mais compreensíveis para leitores de tela.
Ao aplicar essas práticas, você cria páginas amigáveis para sites de busca, como o Google, e acessíveis para todos os usuários. Isso resulta em:
Oque é HTML Semantico
Estrutura da Página com semântica