HTML semântico é uma técnica de estruturação do código HTML de uma página web que usa elementos HTML com nomes que têm significado semântico, ou seja, que indicam o propósito ou função dos elementos em relação ao conteúdo da página. Essa técnica permite que as ferramentas de busca e outros programas possam entender melhor o conteúdo da página e torná-la mais acessível para usuários com necessidades especiais, como leitores de tela.
A seguir, alguns exemplos de elementos HTML semânticos:
<header>: representa o cabeçalho da página ou de uma seção específica;<nav>: representa a navegação da página;<main>: representa o conteúdo principal da página;<section>: representa uma seção de conteúdo dentro da página;<article>: representa um conteúdo autônomo, como um post de blog;<aside>: representa um conteúdo relacionado ou complementar ao conteúdo principal;<footer>: representa o rodapé da página ou de uma seção específica.
Ao utilizar esses elementos semânticos, a estrutura da página fica mais clara e organizada, facilitando a compreensão do conteúdo tanto para usuários quanto para os motores de busca. Além disso, o uso de elementos semânticos também permite que os estilos CSS sejam aplicados de forma mais eficiente, tornando o código mais fácil de manter e atualizar.
Referência:
- Mozilla Developer Network. HTML element reference. Disponível em: https://developer.mozilla.org/en-US/docs/Web/HTML/Element. Acesso em: 03 abr. 2023.