O que é HTML5 semântico?

A Semântica é a ciência que estuda o significado de palavras e expressões em uma língua. Portanto, o HTML5 semântico contém elementos que possuem um significado, o que vai mais além de possuir somente uma forma de apresentação na página. Boa parte das tags de HTML são usadas somente para formatar conteúdo: elas especificam ao navegador como devem exibir o conteúdo na página. Mas elas não dizem qual é o tipo de conteúdo que está dentro delas ou qual é a função daquele conteúdo. O HTML5 semântico resolve esse problema: ele traz algumas tags que indicam claramente qual é a função do conteúdo que está dentro delas.

Precisa de consultoria em Marketing Digital? Fale comigo.

Por exemplo, uma tag

indica que o texto dentro dela é um parágrafo. Ou seja, ela é semântica (indica a existência de um parágrafo) e define também uma forma de apresentação (navegadores sabem como mostrar parágrafos). Pessoas sabem o que é um parágrafo, e navegadores sabem como exibi-los. No entanto, tags como e não são semânticas, porque elas definem somente a aparência que o texto deve ter: negrito () ou itálico (). Elas não atribuem nenhum significado ao conteúdo dentro delas. Outros exemplos de tags de HTML semânticas são as tags de cabeçalho

até

- onde

é o título mais importante e as demais são sub-títulos, até se chegar ao

. Também são semânticas as tags

, que diz onde está o conteúdo principal de um post (o texto do artigo em si), e a tag

, que indica onde está o cabeçalho da página. Há várias outras.

Por quê o HTML5 semântico é importante para o seu site?

O HTML5 semântico representa uma oportunidade de melhoria dos sites e de otimização para mecanismos de busca (SEO). Você pode melhorar a visibilidade do seu site usando os elementos semânticos para descrever a estrutura da página. Contêineres com nomes específicos ajudam os buscadores e navegadores a identificar mais facilmente como a página é formada. Nós, humanos, conseguimos identificar as partes de uma página com apenas um olhar: o menu superior, cabeçalho, o conteúdo em si, rodapé, entre outros. Mas imagine agora que você é um deficiente visual. Metaforicamente falando, essa é a situação dos robôs da Google e do Bing que rastreiam nossos sites. Entender a página visualmente é muito difícil para eles. Isso significa que temos que dar informações para que possam caminhar dentro dos nossos sites com a devida sinalização. Isso significa dizer ao Google e ao Bing qual parte da página é o menu, qual parte é o cabeçalho e qual parte é o rodapé, por exemplo. E o mais importante: dizer aos robôs rastreadores qual é o principal conteúdo na página, assim eles saberão que devem priorizar esse conteúdo. Por si só, o uso do HTML5 não revolucionará o desempenho do SEO do seu site. O sucesso de uma estratégia de SEO é um conjunto de vários fatores pequenos - e importantes. E esse é um desses pequenos detalhes que ajudam o Google e o Bing a entender e confiar mais no seu conteúdo. Isso é o que ajudará o seu SEO. As tags de HTML5 abaixo podem ser usadas no lugar da tag

para dividir o conteúdo da sua página em partes identificáveis, onde cada uma tem sua função. Os mecanismos de busca gostam muito delas.

HTML5 - tags semânticas que podem ser usadas no lugar da tag

: