Quando estruturamos informações com a linguagem HTML, nós traduzimos os conteúdos que conseguimos facilmente interpretar para uma linguagem que a WEB entende e exibe de maneira organizada e formatada.
Originalmente a Web não foi construída para ter layouts estruturados, os desenvolvedores usavam hacks para organizar conteúdos de maneiras diferentes. Por exemplo: não era usada a tag <table> </table> para que as informações fossem colocadas em tabela, os desenvolvedores usavam essa tag para posicionar alguns elementos em uma página.
À medida que o uso de layouts projetados progrediu, os desenvolvedores começaram a usar tags não semânticas, como a <div>. Então atribuíam a esses elementos uma classe ou um id para informar seu significado.
Exemplo de HTML não semântico:
<body>
<div class="header">
<div class="menu"></div>
</div>
</body>
Geralmente o elemento <div> é usado para marcar menus, botões, imagens etc, e não significa nada em termos de semântica, o que dificulta os mecanismos de buscas ou leitores de tela, que necessitam de ajustar a forma de apresentação de acordo com a estrutura da página de forma automatizada para que seja possível apresentar as informações aos usuários. Para suprir essa falta de significado das <divs>, transferiram essa responsabilidade semântica do HTML para o CSS.
Quando passamos a usar o HTML semântico, deixamos o site com informações bem explicadas e compreensíveis para o computador. As novas tags nos dizem exatamente o seu significado, dessa forma, facilitam a busca de forma orgânica, pois é um grande desafio para os mecanismos de busca classificar a importância e relevância das informações que estão nas páginas.
Dessa forma, esses mecanismos de busca vão considerar o conteúdo como palavras-chave na influência dos rankings de pesquisa da página.
Exemplo de HTML semântico:
<body>
<header>
<div class="menu"></div>
</header>
</body>
As novas tags comportam-se como a tradicional <div>, porém, podem ser classificadas.
Vamos apresentar alguns exemplos das tags semânticas:
- Os elementos para navegação costumam ficar dentro da tag
<nav>. Pode estar presente tanto para navegação em uma página quanto no site, desse modo, podem existir vários elementos<nav>no documento.
<nav>
- A tag
<header>representa os elementos do cabeçalho, o qual pode conter elementos de navegação ou logo.
<header>
- A tag
<main>é o principal elemento e basicamente indica aos leitores de tela e navegadores a parte que contém a seção principal do documento. Deve ser usado apenas uma vez por página.
<main>
- A tag
<section>é usada para dividir o conteúdo da página em seção e subseções. Um exemplo disso ocorre quando os requisitos de dois cabeçalhos ou rodapés são necessários, ou seja, o elemento separa blocos genéricos de conteúdos relacionados.
<section>
- A tag
<article>é usada para representar um artigo. O conteúdo desta tag é independente de outro conteúdo da página, embora possa estar relacionado.
<article>
- A tag
<blockquote>é usada para representar uma citação de bloco, o conteúdo que será citado de uma fonte externa (uma pessoa, documento, jornal, estudo de caso, etc.).
<blockquote>
- Geralmente a tag
<aside>é usada para marcar elementos em barras laterais. Por exemplo, informações relacionadas ao artigo, avisos, biografia do autor etc.
<aside>
- O elemento
<time>é utilizado para informar a data e hora em um formato legível.
<time>
- A tag
<mark>destaca um trecho do conteúdo do documento. Geralmente usado para mostrar conteúdo resultado de busca no documento.
<mark>
- O elemento
<footer>indica o rodapé do conteúdo. Geralmente contém informações do autor ou direitos autorais.
<footer>
Ao fazer uso das novas tags, verifique quais elementos representam melhor essa marcação ou quais os dados que serão preenchidos. Lembre-se que, além de deixar um código limpo, ajuda os mecanismos de busca.
Exemplo de layout estruturado semanticamente:
<html>
<head>
<meta charset="utf-8">
<title>Título</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Link de navegação 1</a></li>
<li><a href="#">Link de navegação 2</a></li>
</ul>
</nav>
</header>
<h1>Título do conteúdo</h1>
<p>Conteúdo exemplo</p>
<main role="main">
<section>
<article>
<h1>Título do artigo</h1>
<p>Conteúdo do artigo</p>
</article>
<blockquote cite="http://campuscode.com.br">
<p>Exemplo de citação tirada da CampusCode</p>
</blockquote>
</section>
</main>
<footer>Rodapé</footer>
</body>
</html>
Usar o HTML Semântico é uma boa prática e, além de facilitar a manutenção do código, é importante para acessibilidade. Um exemplo disso é que os usuários com deficiência visual podem navegar na página com a ajuda de leitores de tela, que usam a semântica do HTML como placa de sinalização.
