Deblogger

O que são elementos semânticos?

É comum ver sites em HTML que usam apenas CSS para demarcar partes como cabeçalho, rodapé, seções, barra de navegação, entre outros elementos semânticos, apenas com a tag <div>, da seguinte forma:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" lang="pt-br"/>
        <title>Página de Exemplo</title>
    </head>
    <body>
        <div class="header">
            <!-- Estrutura do cabeçalho-->
        </div>
        <div class="nav-bar">
            <!-- Estrutura da barra de navegação -->
        </div>
        <div class="section">
            <!-- Estrutura de uma seção da página -->
        </div>
        <div class="footer">
            <!-- Estrutura do rodapé -->
        </div>
    </body>
</html>
    

Os nome colocados dento da tag class correspondem a classes CSS, que no exemplo acima, configuram os elementos <div> para construir o layout do site. Falarei sobre classes de CSS na próxima série de artigos.

Mas, afinal, o que são elementos semânticos no HTML? De acordo com o dicionário Michaelis, semântica é definida como:

semântica
se·mân·ti·ca
substantivo feminino
LING Ramo da linguística que estuda a significação das palavras e suas mudanças de sentido ao longo do tempo, bem como a representação do sentido dos enunciados.
LING O significado dos vocábulos, por oposição à sua forma.
FILOL Ciência que estuda a evolução do significado das palavras, signos e símbolos que estão a serviço da comunicação; semiologia.

E, afinal, o que o estudo da linguística e do significado das palavras tem a ver com HTML? Tudo. Os elementos semânticos são aqueles usados ​​para definir diferentes partes de uma página da web, ou seja, eles tem um significado. Uma tag <div>, por exemplo, não nos diz nada sobre qual será o conteúdo do elemento. Já a tag <footer>, nos diz exatamente qual será o conteúdo deste elemento.

Agora que você já sabe o que é um elemento semântico, vamos dar uma olhada em quais existem e para quê servem:


Seção

O elemento <section> define uma seção em um documento. De acordo com a documentação da W3C: “Uma seção é um agrupamento temático de conteúdo, geralmente com um cabeçalho”. Uma página inicial é geralmente dividida em seções como introdução, conteúdo e informações de contato.

<section>
    <h1>Informações de Contato</h1>
    <p>E-mail: meuemail@dominio.com.br</p>
    <p>Telefone: (11) 9-99395-1098</p>
</section>

Artigo

O elemento <article> define, basicamente, um conteúdo independente. Um elemento correspondente a um artigo deve fazer sentido por si próprio e deve ser possível lê-lo independentemente do restante do site. Um exemplo como é uma postagem de um blog (como essa que você está lendo), ou uma notícia em um site de um jornal.

<article>
    <h1>Justiça manda Fundação Palmares apagar artigos com críticas e repúdio a Zumbi</h1>
    <p>A Justiça Federal ordenou, nesta sexta-feira (29), que a Fundação Cultural Palmares retire do site oficial, imediatamente, dois artigos que fazem críticas e desqualificam a figura de Zumbi dos Palmares – símbolo da luta negra contra a escravidão que dá nome à entidade.</p>
    <p>A decisão é da juíza federal Maria Cândida Almeida, da 9ª Vara Federal do Distrito Federal, e estabelece pena de R$ 1 mil por dia de descumprimento. O G1 tenta contato com a fundação. Até a publicação desta reportagem, os textos seguiam no portal da instituição...</p>
</article>

Notícia de exemplo retirada do site do G1


Cabeçalho

O elemento <header> define um cabeçalho para o documento ou seção. O elemento <header> deve ser usado como um contêiner para conteúdo introdutório. Você pode ter vários elementos <header> em um documento. O exemplo a seguir define um cabeçalho para um artigo:

<article>
    <header>
        <h1>Justiça manda Fundação Palmares apagar artigos com críticas e repúdio a Zumbi</h1>
        <p>Textos foram publicados em referência ao aniversário da Lei Áurea mas, segundo juíza, desrespeitam 'direito à identidade'. Multa por descumprimento é de R$ 1 mil ao dia.</p>
    </header>
    <p>A Justiça Federal ordenou, nesta sexta-feira (29), que a Fundação Cultural Palmares retire do site oficial, imediatamente, dois artigos que fazem críticas e desqualificam a figura de Zumbi dos Palmares – símbolo da luta negra contra a escravidão que dá nome à entidade.</p>
</article>

Observe que definimos um título dentro do <header> com <h1> e um subtítulo com <p>. Da mesma forma, você pode colocar diversos elementos dentro de um elemento semântico a fim de subdividi-lo.


Rodapé

O elemento <footer> define um rodapé para o documento ou seção. Um elemento <footer> deve conter informações sobre o elemento que o contém. Ou seja, este elemento geralmente contém informações sobre o autor do documento, informações de direitos autorais, links para termos de uso, informações de contato, entre outros. Assim como o elemento <header>, você pode ter vários elementos <footer> em um documento.

<footer>
    <p>Artigo feito por: Mauro Oliveira</p>
    <p><a href="http://deblogger.com.br/">Ver mais posts</a> deste autor</p>
</footer>

Elemento de navegação

O elemento <nav> define um conjunto de links de navegação. Os links de navegação podem ser usado tanto para navegar dentro da mesma página, quanto para navegar dentro do site, ou ainda apontar para páginas externas. Observe que nem todos os links de um documento devem estar dentro de um elemento <nav>. Dessa forma, o elemento de navegação destina-se apenas ao bloco principal de links de navegação da página, do site ou de uma seção.

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">C#</a>
</nav>

Barra lateral

O elemento <aside> define algum conteúdo ao lado do conteúdo em que ele é colocado (como uma barra lateral). Sendo assim, o conteúdo deste elemento deve estar relacionado ao conteúdo circundante.

<section>
    <p>A doação de sangue é um gesto solidário de doar uma pequena quantidade do próprio sangue para salvar a vida de pessoas que se submetem a tratamentos e intervenções médicas de grande porte e complexidade, como transfusões, transplantes, procedimentos oncológicos e cirurgias.</p>
    <aside>
        <h4>Doe Sangue</h4>
        <p>Veja onde doar sangue no estado de São Paulo <a target="_blank" href="http://www.prosangue.sp.gov.br/doacao/enderecos.html">clicando aqui</a>.</p>
    </aside>
</section>

Importante ressaltar aqui que o uso da tag <aside> não fará o elemento ficar ao lado visualmente. Estamos falando apenas da semântica do elemento, isto é, o que ele significa. Sendo assim, seu posicionamento fica a cargo do CSS.


Elementos de figura e legenda

Uma imagem e uma legenda podem ser agrupadas em um elemento <figure>. O objetivo de uma legenda é adicionar uma explicação visual a uma imagem. Em resumo, o elemento <img> define a imagem e o elemento <figcaption> define a legenda:

<figure>
    <img src="olamundo.jpg" alt="Olá Mundo">
    <figcaption>Mais uma imagem de Olá Mundo.</figcaption>
</figure>

Este elemento não se resume a imagens, você pode saber mais sobre isso no artigo tags de texto, link e imagem no HTML.


Elemento de detalhamento

Uma tag muito interessante e pouco conhecida é a <details>, que especifica detalhes adicionais que o usuário pode abrir e fechar sob demanda. Sendo assim, esse elemento é usado para criar um widget interativo que o usuário pode abrir e fechar. Por padrão, o widget está fechado. Ele se expande e, quando aberto, exibe o conteúdo dentro. Qualquer tipo de conteúdo pode ser colocado dentro da tag <details>.

Com a finalidade de mostrar um título quando o widget estiver fechado, a tag <summary> é usada em conjunto com este elemento.

<details>
    <summary>Doe Sangue</summary>
    <p>Veja onde doar sangue no estado de São Paulo <a target="_blank" href="http://www.prosangue.sp.gov.br/doacao/enderecos.html">clicando aqui</a>.</p>
</details>

Exemplo dessa tag:

Doe Sangue

Veja onde doar sangue no estado de São Paulo clicando aqui.

Repare que esse elemento é não apenas semântico, mas também funcional. Dessa forma, você não precisa adicionar JavaScript ou CSS para que este widget funcione.


Conteúdo Principal

A tag <main> especifica o conteúdo principal de um documento. Ou seja, conteúdo dentro deste elemento deve ser exclusivo para o documento. Ele não deve conter nenhum conteúdo repetido em documentos como barras laterais, links de navegação, informações de direitos autorais, logotipos do site e formulários de pesquisa.

<main>
  <h1>Navegadores Populares</h1>
  <p>Google Chrome, Mozila Firefox, e Microsoft Edge são os navegadores mais usados hoje em dia.</p>

  <article>
    <h2>Google Chrome</h2>
    <p>O Google Chrome é um navegador desenvolvido pelo Google, lançado em 2008. O Chrome é o navegador mais popular do mundo hoje!</p>
  </article>

  <article>
    <h2>Mozilla Firefox</h2>
    <p>O Mozilla Firefox é um navegador de código aberto desenvolvido pela Mozilla. O Firefox é o segundo navegador mais popular desde janeiro de 2018.</p>
  </article>

  <article>
    <h2>Microsoft Edge</h2>
    <p>O Microsoft Edge é um navegador desenvolvido pela Microsoft, lançado em 2015. O Microsoft Edge substituiu o Internet Explorer (ainda bem!).</p>
  </article>
</main>

Atenção: diferentemente dos elementos semânticos citados acima, não deve haver mais de uma tag <main> em um documento. Dessa forma, o elemento <main> não deve ser um descendente de um elemento <article>, <aside>, <footer>, <header> ou <nav>.


Marcação de texto

A tag <mark> define o texto que deve ser marcado ou destacado. Assim como o elemento de figura e legenda, já falamos desta tag no artigo tags de texto, link e imagem no HTML.


Elemento de data e hora

A tag <time> define um horário específico (ou data e hora). O atributo datetime desse elemento é usado para converter o horário em um formato legível por máquina, para que os navegadores possam oferecer a adição de lembretes de datas no calendário do usuário, e os mecanismos de pesquisa possam produzir resultados de pesquisa mais inteligentes.

<p>Aberto todos os dias das <time>10:00</time> às <time>21:00</time> de segunda à sexta</p>
<p>No feriado de Corpus Christi abriremos mais tarde, às <time datetime="2020-06-11 13:00">13h</time>.</p>

Exemplo do código acima:

Aberto todos os dias das às de segunda à sexta

No feriado de Corpus Christi abriremos mais tarde, às .

Embora ele seja semanticamente importante para os mecanismos de pesquisa, o elemento <time> não é processado como algo especial em nenhum dos principais navegadores.


Conclusão

Nesse artigo vimos todos os elementos que compõem o HTML semântico. Lembre-se: a maioria deles não tem um comportamento visual de uma <div>, porém possuem um significado. Então, o que de fato mudará se eu usar esses elementos ao invés das divisórias (<div>)?

Softwares de leitura de páginas

De fato, o usuário verá da mesma forma um site que use divisórias ou elementos semânticos. Mas, e os usuários com deficiência visual? Atualmente, existem softwares leitores de páginas web que permitem que os usuários deficientes visuais também possam entrar em um site e absorver seu conteúdo. Para que esses softwares funcionem como esperado, é necessário que seu site tenha uma semântica adequada, pois é através das tags semânticas que ele é capaz de identificar cada elemento.

Imagine se você usar o elemento <div> para tudo em sua página: os leitores não saberão o que é cabeçalho, o que é artigo, o que é logomarca etc.

Não apenas os softwares para deficientes visuais leem a sua tela dessa forma: os robôs dos mecanismos de pesquisa também! Isso é de extrema importância para o rankeamento das páginas quando um usuário faz uma pesquisa nesses mecanismos de pesquisa (como o Google, o Bing, o Yahoo etc.). Sem os elementos semânticos no HTML do seu site, os robôs não conseguem identificar o menu de navegação, ou saber qual é o conteúdo principal do seu site, por exemplo. Dessa forma, para esses robôs, um cabeçalho é a mesma coisa que um artigo.

Suporte e manutenção

Além dos benefícios de leitura de página por meio de software, a utilização da semântica facilita na manutenção e suporte do site. Imagine que você trabalhe numa equipe com mais 30 programadores em um grande projeto, e tem que alterar algo em uma página que foi desenvolvida por outro programador.

Como foi outra pessoa que desenvolveu, você nunca viu o código da página. Agora imagine que o programador que fez a página usou divisórias para tudo. Como você vai achar a barra lateral? Ou o conteúdo principal? Você terá um trabalho infinitamente maior na maioria dos casos. Porém, se ele usou os elementos semânticos do HTML, nada como um Ctrl + F e a tag correspondente ao conteúdo principal (<main>), por exemplo, para achar o que você precisa. Então lembre-se de usar os elementos semânticos na hora de escrever sua página HTML!



Avalie:
5 (2)

Publicado por Mauro Oliveira

Desenvolvedor apaixonado por JavaScript, especialista em VueJS. Atualmente focado em padrões de projeto e código, estudando sobre testes unitários, Clean Code e segurança em aplicações Web, Mobile e Desktop.

Participe da discussão

1 comentário

  1. Cara, não sabia que existia tantos elementos semânticos assim. Obrigado pela ajuda, tudo ficou bem detalhado e conseguir compreender mais para que servia cada tag. Parabéns pelo site, não desiste dele não.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *