Semântica no desenvolvimento web: HTML5 e suas tags superpoderosas

Compartilhe nas redes sociais

Fala galera, tudo bem?

No artigo anterior eu falei a respeito de alguns conceitos da semântica no desenvolvimento web, abordando  um pouco de HTML e CSS. Hoje vou aprofundar mais no que diz respeito ao HTML especificamente.

Mas antes, vamos entender qual a real importância do html e por que devemos nos preocupar em escrever códigos com semântica correta.

Faz diferença ou não escrever códigos com as tags certas?

Na pratica não! Na verdade, se quisermos escrever uma aplicação inteira usando tags ‘erradas’ para cada elemento, nós podemos. Para o navegador não fará diferença, ele vai renderizar tudo certinho conforme estilizarmos no css.

— Mas então pra que eu preciso escrever html semântico José?

Existem 2 motivos principais: SEO e Profissionalismo.

Search Engine Optimization (SEO)

Seu código escrito semanticamente ou não, vai impactar diretamente no resultado de SEO da aplicação que estiver sendo desenvolvida. O impacto pode ser positivo ou catastrófico e vai depender do seu código! =D

Básicamente você deve informar ao google o que é realmente um título, o que é um parágrafo, uma lista de informações, onde na página se encontra o conteúdo principal, quais palavras deste conteúdo são mais relevantes, etc…

Acessibilidade

Muitos aspectos da acessibilidade estão diretamente ligados à maneira que você escreve seu código HTML.

Por exemplo, um leitor de tela que estiver sendo usado por um deficiente visual conseguirá ler o conteúdo de forma muito mais precisa se seu código estiver semanticamente correto.

Acessibilidade é um assunto muito amplo e profundo e merece uma série de artigos específicos para ele. (aguarde…)

Profissionalismo

Hoje em dia é muito comum uma pessoa aprender um framework js qualquer e sair dizendo que é um desenvolvedor front-end. Mas na verdade não! Saber um framework não te torna um dev. front-end. Ser um bom front-ender requer uma série de skills e um deles é saber escrever código html semanticamente.

Ok, agora que você já sabe um pouco a respeito da importância, vamos aprender mais sobre as tags do HTML?

HTML5 e a melhoria na semântica

Antes do HTML5 nós já fazíamos SEO, porém tínhamos em mãos menos recursos do html para ajudar no nosso trabalho. Com a chegada da nova versão do html e as suas tags semanticamente melhores nós podemos marcar as informações de uma página com maior precisão. E isto de certo modo torna a “vida dos buscadores” mais fáceis… hehe

Novas tags

Como já disse antes, o HTML5 introduziu várias tags novas e abaixo listarei algumas:

  • <article> Define um artigo em um documento
  • <aside> Define um conteúdo, a parte, do conteúdo da página
  • <bdi> Define um texto que pode ser formatado em diferentes direções
  • <details> Define detalhes adicionais que o usuário pode ver ou ocultar
  • <dialog> Define uma caixa de diálogo ou janela
  • <figcaption> Define uma legenda para um elemento <figure>
  • <figure> Define um conteúdo como ilustrações, diagramas,fotos, códigos, listagens, etc.
  • <footer> Define o rodapé do documento ou seção
  • <header> Define um cabeçalho para o documento ou uma seção
  • <main> Define o conteúdo principal de um documento
  • <mark> Define um texto marcado ou realçado
  • <menuitem> Define um commando/menu que pode ser usado para invocar um menu popup
  • <meter> Define uma medida escalar dentro de uma faixa conhecida
  • <nav> Define links de navegação no documento
  • <progress> Define o progresso de uma tarefa
  • <rp> Define o que exibir em navegadores que não exibem anotações ruby (anotações ruby são para mostrar a pronúncia de caracteres do Leste Asiático.)
  • <rt> Define a pronúncia de um caractere (para tipografias do Leste Asiático)
  • <ruby> Define uma anotação ruby (para tipografia do Leste Asiático)
  • <section> Define uma seção no documento
  • <summary> Define um título visível para um elemento
  • <time> Define uma data/hora
  • <wbr> Define uma possível quebra de linha
  • <datalist> Lista opções predefinidas para controles inputs
  • <keygen> Define um campo de gerador de par de chaves (para formulários)
  • <output> Define o resultado de um cálculo
  • <canvas> Define um desenho gráfico usando JavaScript
  • <svg> Define um desenho gráfico usando SVG
  • <audio> Define um conteúdo de som ou música
  • <embed> Define um contêiner para aplicações externas (como plug-ins)
  • <source> Define fonte para <video> e <audio>
  • <track> Define faixas para <video> e <audio>
  • <video> Define conteúdo de vídeo ou filme

Além dessas existem alguns tipos novos de inputs para formulários, mas em outro momento falaremos destes.

Por enquanto vamos nos ater às tags que servem para delimitar áreas de conteúdo. São elas: <main>, <section>, <article>, <header>, <footer>, <aside>.

E vamos iniciar com a tag section.

<section>

Segundo a tradução do mdn:

O elemento HTML <section> representa uma seção genérica contida em um documento HTML, geralmente com um título, quando não existir um elemento semântico mais específico para representá-lo.

Caso de uso

Geralmente os sites são separados por seções: Banner principal, quem somos, notícias, contato, etc… Seja ele um Single Page Application (spa) ou não.

Sendo assim o uso do section serviria pra marcar onde cada seção diferente está.

<section class="about">
    <h2>Quem somos</h2>
    ...
</section>

<section class="events">
    <h2>Próximos eventos</h2>
    ...
</section>

<section class="products">
    <h2>Nossos produtos</h2>
    ...
</section>

Antes usava-mos divs para fazer esse tipo de separação. Mas a tag section traz mais significado para essa marcação.

A tag div hoje é usada apenas para marcações de layout sem muito significado semântico. Por exemplo, se dentro de uma section quisermos 2 colulas:

<section class="anything">
    <div>...</div>
    <div>...</div>
</section>

Sempre vamos usar a section para agrupar seções de informações que tem um significado em comum, então, dentro dela podemos ter links, titulos, parágrafos, articles, etc…

Bom, por hoje é só pessoal.

Nos próximos posts continuarei falando sobre as tags de marcação de blocos de conteúdo e vamos incrementar nossos códigos de exemplo até termos um resultado plenamente satisfatório.

E como sempre, todo feedback é bem vindo!

Valeu.