Como usar HTML semântico

Artigos - 01/Out/2020 - por Josy dos Anjos

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.

Referências

Foto de perfil do autor
Josy dos Anjos

Desenvolvedora na Rebase