O que é HTML semântico?
Aprenda o que é HTML semântico e como aplicar no seu código para aumentar a acessibilidade e não perder pontos com o Google (SEO) e outros buscadores.
PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO
Se você é desenvolvedor web, com certeza trabalha com HTML (semântico?) e se preocupa com a posição dos seus sites nos resultados de pesquisa do Google (SEO).
Deixar as páginas de um site bem classificadas nos buscadores é um trabalho que envolve muitos fatores e um deles é a qualidade do código.
▶ Se preferir, acesse "HTML semântico, DOM pequeno e dados estruturados - boas práticas de SEO para seu site" no YouTube.
A linguagem HTML é um dos códigos utilizados e é a base de toda página web. Ela é utilizada para definir os elementos e como serão organizados no DOM (Document Object Model). Entenda o DOM como a estrutura da página e definição dos elementos HTML que o navegador vai ler e renderizar na tela.
É uma boa prática para todo desenvolvedor gerar códigos otimizados, compactos e semânticos. O DOM não deve ter mais de 1.500 nós; nem profundidade maior que 32 nós; nem um nó pai com mais de 60 nós filhos. Além disso, as tags HTML devem ser utilizadas para o propósito que foram criadas.
O que é HTML semântico
O HTML semântico é utilizar cada tag (etiqueta) de acordo com a sua finalidade. Por exemplo, a tag p
serve para definir um parágrafo de texto longo, já a h1 serve para definir o título visível principal
da página.
O código HTML a seguir conta com uma estrutura básica de HTML seguindo os padrões web. Ele tem título e parágrafo definidos, tudo com HTML semântico:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Título da página</title>
</head>
<body>
<h1>Título visível</h1>
<p>Meu parágrafo</p>
</body>
</html>
A página HTML no navegador terá o visual a seguir:
Agora vamos analisar um código HTML NÃO semântico e com elementos em excesso:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Título da página</title>
</head>
<body>
<div>
<div>
<p>Título visível</p>
<span>Meu parágrafo</span>
</div>
</div>
</body>
</html>
No código anterior, temos a tag p sendo usada para definir um título e a tag span para
definir um texto longo de parágrafo (HTML não semântico). Essa última deve ser usada para marcar um pedaço de texto, normalmente dentro
de um parágrafo. Além disso, temos o uso excessivo de tags div (div mania).
A div mania é um dos motivos que geram um DOM grande, código desorganizado e sem significado. A tag div é usada para criar divisões não semânticas
na página, principalmente para montar o layout. Seu uso é muito importante para esse propósito, mas deve ser evitado o excesso.
Ainda sobre a tag div, hoje ela pode ser substituída em várias partes do layout por tags semânticas, com significados.
Por exemplo, você pode definir um menu de navegação com <div id="nav">, mas com HTML semântico fica melhor, basta usar
<nav> que existe para essa finalidade.
Os principais elementos HTML semânticos para layout da página são:
- article
- aside
- footer
- header
- main
- nav
- section
Você deve então conhecer o significado de todos os códigos (tags) HTML disponíveis. Estude cada um separadamente, faça testes em vários navegadores e fique sempre antenado com as atualizações.
Por exemplo, você pode criar lista com HTML usando <OL>, <UL> ou <DL>; colocar texto em itálico com tag HTML <EM> ou <I>; fazer tabelas HTML com <table>, sempre usando as tags corretas.
HTML semântico, SEO e acessibilidade
Quando você usa HTML semântico, o navegador interpreta as tags da forma como deve ser, pois cada uma tem um significado. Isso ajuda ferramentas como leitores de tela e recursos de acessibilidade para pessoas com necessidades especiais.
Já para a classificação das páginas no Google e outros buscadores, o HTML semântico ajuda os robôs de rastreamento a extrair o conteúdo e fazer a associação correta com os tipos de elementos.
Ainda falando dos robôs, eles gostam de "entender" o conteúdo da página e extrair o conteúdo rapidamente, por isso um DOM pequeno também é muito importante. Se tiver um DOM grande, o robô pode não extrair todo o conteúdo, prejudicando o SEO do site e pontuação no Google PageSpeed.
Um DOM grande também aumenta o uso da memória e gera cálculos de estilos mais longos, deixando o carregamento mais lento. Sites lentos perdem pontos no Google e outros buscadores.
Além do HTML semântico, procure utilizar também dados estruturados nas páginas. Com eles é possível dar mais significados ainda para os elementos, preenchendo lacunas que existem no HTML e facilitando ainda mais o trabalho dos robôs de rastreamento.
Separe o HTML do CSS
Por fim, uma boa prática é separar totalmente o HTML do CSS. Como você já sabe, o HTML define os elementos. Já o CSS, aplica regras de formatação sobre esses elementos, criando o visual da página.
Evite o uso de CSS inline, como o exemplo a seguir:
<p style="color:red">O correto é criar um bloco de CSS ou linkar o documento com um arquivo externo:
<style>
h1{color:red;border:1px solid #f5f5f5}
p{font-size:14px;font-style:italic}
</style>
<link rel="stylesheet" href="/css/styleprod.css">Então é isso, eu espero que você tenha gostado desta publicação. Fique à vontade para compartilhar nas suas redes sociais para ajudar na divulgação e crescimento do site.
Aproveite para se inscrever no meu canal do YouTube e também na News do site pra ficar por dentro das novidades em artigos, tutoriais e cursos online.
Abraço e até a próxima!