O HTML foi criado em 1990, com o objetivo de ser uma linguagem que se adequasse em todos os meios de acessos existentes. Ao longo do tempo foi atualizado diversas vezes.

Em 2004 chegou na versão HTML5(Hypertext Markup Language) que foi criada com a principal função de facilitar a manipulação dos elementos, permitindo o desenvolvedor a modificação das características dos objetos da melhor forma.

Porque aplicar semântica no HTML?

A semântica aplicada ao HTML auxilia no Processo de SEO (Search Engine Optimization), que é um conjunto de técnicas consistentes em otimizar sites a fim de obter um melhor posicionamento nos mecanismos de busca, assim garantindo melhor visibilidade do site nas pesquisas.

Um site com HTML semântico, vem pré definido do que se trata os textos e mídias contidas no site, assim ajudando os mecanismos de busca a entenderem no detalhe do que se trata cada página do site, facilitando a entrega para o cliente quando fizer uma busca.

Já o Site sem semântica no HTML não dispõe de todos esses benefícios, os mecanismos de buscas apenas enxergam um aglomerado de textos nos quais o cliente precisaria pesquisar por um trecho escrito exatamente da forma que está no site, caso houvesse alguma variação de palavras resultando na entrega de outro site para o cliente e não o seu.

O HTML semântico não altera nada visualmente no site, é uma configuração eu está aplicada no seu código, sendo visível aos mecanismos de busca e invisível para os clientes.

Como usar o HTML semântico.

O HTML5 trouxe novas tags que facilitam o uso e compreensão do código. Para utilizar o HTML semântico da maneira correta, bastaria utilizar as novas tags no código em seus respectivos locais.

Confira as novas tags semânticas e quando devem ser utilizadas:

Header

Usamos para construir a estrutura de cabeçalhos.
O que os buscadores esperam encontrar dentro do "header" são: slogan, marcas, títulos, etc...

Footer

Usamos para construir a estrutura de um rodapé.

O que os buscadores esperam encontrar dentro do "foote"são: Informações da página, lista de links ou até mesmo informações de direitos autorais.

Main

Utilizamos a tag main para destacar o conteúdo principal do site, ou seja, o que há de mais relevante na página.

Os buscadores esperam encontrar apenas uma por página, adicionar mais não fará com que o site ganhe destaque, só irá perder coerência causando confusão sobre o que se trata a página.

Article

Esta tag refere-se simplesmente ao conteúdo, ao Utiliza-la está definindo um espaço no site onde ficara algum tipo de conteúdo, sendo texto, imagem, vídeo ou até mesmo um game.

Section

Como o nome já sugere, a section é uma seção no qual é utilizada para agrupar tags, seu uso é bem genérico, podendo conter qualquer tipo de conteúdo dentro da mesma. Ou seja, "section"é um elemento que organiza e estrutura um site.

Aside

A palavra aside, basicamente significa ao lado, é utilizado para definir um conteúdo ou grupo de tags que iria se referir ao conteúdo principal.

Os buscadores esperam encontrar dentro do "aside"são: Links laterais, banners, propaganda e tudo mais que não for o conteúdo principal.

Nav

A nav refere-se a navegação no site, geralmente utilizada para listar links de demais paginas do site.

Os buscadores esperam encontrar dentro do "nav" são: Links internos ou seja, links que direcionam para páginas do mesmo site e não para fora do site.

Aplicar semântica no HTML é algo opcional, sendo trabalhoso mais vantajoso usar, e mais fácil porem prejudicial não usar.