HTML Semântico - Entendendo os elementos e suas funções

Publicado em:

Introdução

Nos dias atuais, o HTML não apenas estrutura documentos para sites, mas também descreve o significado de todo o conteúdo presente nesses documentos por meio de tags semânticas, tornando-o mais claro tanto para desenvolvedores quanto para browsers. É como se estivesse falando para o navegador a sua função no código. Assim como, influencia diretamente ao SEO (Search Engine Optimization) e também colabora para a acessibilidade.

Antes de apresentar as principais tags semânticas incorporadas à linguagem HTML, devemos entender como era antes delas “existirem”.

O que é div?

Antes, utilizava-se somente <div> para dividir todos os conteúdos, com id como identificador e classes para estilizar. Isso era/é muito ruim para o site desenvolvido, pois o elemento <div> não possui nenhum valor semântico, ele não representa nada para os navegadores e nem mecanismos de buscas, impactando de forma negativa o SEO, assim como, em alguns casos, acessibilidade.

Antes, a estrutura de um site era próximo disso:

<html>
  <head>
    <title>Tech Blog</title>
    <meta name="description" content="" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="estilo.css" />
  </head>

  <body>
    <div id="header"></div>

    <div id="main">
      <div id="section"></div>
    </div>

    <div id="footer">
      <p>Tech Blog</p>
    </div>
  </body>
</html>

Certo, então quando utilizá-la?

A tag <div> pode ser utilizada para agrupar elementos genéricos e/ou para fins de estilos, como algum objeto com uma cor específica. Assim como, deve ser utilizado somente quando não tiver outro elemento semântico, como os que serão apresentados a seguir.

Lembre-se: Usar a tag <div>, em casos como citado acima, não é algo ruim ou errado, pelo contrário, são importantíssimas e você sempre vai usar. Porém, se passar a usar de forma desnecessária, o site ficará cada vez mais complicado e menos semântico.

As tags do HTML Semântico

Elementos como <header>, <main>, <nav>, <section>, <article> e <footer> funcionam mais ou menos como elementos <div>, porém, como citado anteriormente, eles são semânticos e “conversam” com o navegador. Eles fazem parte do “corpo” da página, onde cada um tem sua devida importância.

O <header> representa o cabeçalho de uma página ou, até mesmo, de uma <section> declarada no HTML. Podemos inserir elementos para representar imagens, logotipos, nome da página em destaque, título de artigo, parágrafos ou listas de navegação.

Observação: Podemos utilizar a tag <header> dentro de uma tag <main> ou <section>. Não podemos confundir a tag <header> com a tag <head>, que é a tag onde inserimos as características da página.

<header>
  <h1>Título da página</h1>

  <nav>
    <ul>
      <li>Lista de navegação</li>
    </ul>
  </nav>
</header>

main

A tag <main> é onde colocamos o conteúdo principal da página, o conteúdo de maior relevância, sendo textos, imagens, links, seções, etc.

Essa tag facilitou muito a compreensão para leitores de tela, já que enfatiza o texto dentro da tag, deixando clara sua importância.

Observação: Para melhor perfomance e construção da página, só devemos ter uma tag <main> em cada página, pois a mesma deve apresentar apenas o conteúdo principal. Assim como, a mesma não pode ser filho dos elementos <article>, <aside>, <footer>, <header>, ou <nav>.

<main>
  <h1>Titulo</h1>

  <p>Duis aute irure dolor in reprehenderit in voluptate...</p>

  <section>
    <h2>Subtítulo</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
  </section>
</main>

Temos também a tag <footer> que, como o próprio nome diz, representa um rodapé, como a área presente no final da página ou até mesmo rodapé para artigos.

Normalmente é utilizada para inserir a autoria da página, assim como, contatos em geral e data de criação de conteúdos.

<footer>
  <p>Escrito por Kevin Tavares, Software Engineer no Elo7</p>
  <p>Início do artigo em 31/10/2022</p>
</footer>

A tag <nav> faz referência à navegação do site. Usamos para menus interativos, como por exemplo menus que encaminham à página de “sobre” ou “produtos”. O <nav> pode ser usado em qualquer momento na página, onde tenhamos agrupamento de links.

<nav>
  <ul>
    <li><a href="”#”">header</a></li>
    <li><a href="”#”">main</a></li>
    <li><a href="”#”">footer</a></li>
    <li><a href="”#”">article</a></li>
  </ul>
</nav>

section

A tag <section> representa uma seção dentro de um documento, seja dentro de um texto ou conteúdo principal. Geralmente contém um título, o qual é definido por meio de um dos elementos entre <h1> e <h6>, dando ênfase ao seu conteúdo. Podemos utilizar o <section>, por exemplo, para dividir os componentes de uma página. Assim como, podemos ter <section> dentro de outra <section>, dependendo da forma como é dividido o conteúdo.

Curiosidade: “Qual seria a diferença de uma <section> para uma <div>?”.

As <section> conseguem separar os conteúdos de forma diferente das <div>, pois ao utilizar um título <h1 a h6> em uma <div> não é permitido repetir o mesmo título para várias <div>, pois os mecanismos de buscas ficariam “confusos” referente a qual seção eles pertecem, já que não há uma separação semântica. Já com a <section> podemos utilizar o mesmo título, pois as mesmas separam seus conteúdos por seções e cada seção é independente. Portanto, quando pesquisado em mecanismos de busca, não se perdem informações.

<section>
  <h2>HTML Semântico</h2>

  <p>Aqui falaremos sobre a tag section.</p>
</section>

<section>
  <h2>HTML Semântico</h2>

  <p>
    Na próxima falaremos sobre article, porém a seção com o mesmo título da
    anterior, sem impactar no SEO :D.
  </p>
</section>

article

A tag <article> é usada para representar um artigo (posts de blogs, comentários de clientes, cards interativos). O conteúdo desta tag é independente de outro conteúdo da página, ou seja, é um conteúdo que faça sentido sozinho, por ele mesmo. Geralmente também é usado um título para essa tag.

<article>
  <h3>Título do artigo 1</h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ...
  </p>
</article>

section e article, qual a diferença?

Os elementos <section> e <article> são conceitualmente similares e intercambiáveis. Com o que já foi abordado nesse artigo, observe:

  • Um <article> tem como objetivo ser independentemente distribuível ou reutilizável.
  • Uma <section> é usada para um agrupamento de conteúdos.

Um exemplo no código:

<section>
  <h2>Histórias novas</h2>

  <section>
    <h3>Tecnologia</h3>
    <article>História 1</article>
    <article>História 2</article>
    <article>História 3</article>
  </section>

  <section>
    <h3>Games</h3>
    <article>História 1</article>
    <article>História 2</article>
    <article>História 3</article>
  </section>
</section>

Conclusão

Nesse artigo tentamos abordar os assuntos básicos do HTML, explicando algumas vantagens do uso da semântica, as principais tags de uma página, suas respectivas funções e diferenças.

Agora que você já sabe a importância do que é HTML semântico, você pode começar a aprender mais sobre as tags (apresentamos 6, faltam 136 :D ) na documentação da MDN. É muito importante que você adote essa prática.

Com certeza vai proporcionar mais visitas ao seu site/projeto, melhorar o seu ranqueamento junto aos motores de busca e facilitar o entendimento e manutenção no seu próprio código.

E você, já conhecia sobre HTML semântico e suas tags? Tem utilizado no desenvolvimento do seu site? Conte para nós a sua experiência nos comentários!

Até a próxima!

Referências

Leitor de Tela Elementos HTML