Categorias

Aposente essas DIVs: aprenda a estruturar semanticamente seu HTML 5

No início era nada. O texto HTML era jogado na tela como um blocão de ponta a ponta, com algumas marcações aqui e ali para negrito e itálico. Então, vieram as tabelas e alguém teve a “brilhante” ideia de usar uma ferramenta desenvolvida para dados tabulares como uma grade de layout. Era o equivalente a usar um machado para martelar um prego e, com o tempo, foi substituída.

Em um mundo ideal, houve a separação do estilo e do conteúdo, principalmente graças às folhas de estilo. Porém, os desenvolvedores web adotaram a DIV como uma nova fórmula para todos os problemas. Parágrafo virou DIV, formulário virou DIV, seções de sites viraram DIV, navegação virou DIV e, em uma estranha reviravolta do destino, até mesmo tabelas viraram DIV. A DIV se tornou para o HTML o que “coisa” virou para a língua portuguesa: “pega a coisa lá pra gente coisar a outra coisa”.

Obviamente, HTML não é bagunça e a W3C introduziu tags verdadeiramente semânticas no HTML 5. Isso aconteceu oficialmente em 2014. Embora o novo padrão tenha apresentado padrões de uso de conteúdo multimídia e APIs que foram abraçados com vigor, em detrimento do problemático Flash, suas tags semânticas não se tornaram tão disseminadas quanto deveriam ser. Seis anos depois, ainda é possível ver profissionais do mercado usando DIV para “coisar” tudo em seu código.

Chega. Seis anos depois, chegou a hora de entender de uma vez para que elas servem.

Por que largar as DIVs?

A própria W3C é categórica a esse respeito:

Os autores são fortemente encorajados a ver o elemento div como um elemento de último recurso, para quando nenhum outro elemento for adequado. O uso de elementos mais apropriados em vez do elemento div leva a uma melhor acessibilidade para os leitores e uma manutenção mais fácil para os autores.

Então, não somos nós que estamos dizendo. É a entidade responsável pela criação e manutenção de padrões de código utilizados na web.

O primeiro fator que devemos levar em consideração para abandonar o uso excessivo de DIVs é a acessibilidade. Leitores de tela e programas que tornam o conteúdo web mais acessível para usuários com dificuldades não entendem o significado das DIVs. São “coisas”, sem valor semântico. Uma barra de navegação e um conteúdo de texto são idênticos, mesmo que você use IDs diferentes que fazem sentido na sua cabeça.

Falando na sua cabeça… a manutenção de um código fica muito mais agradável e consistente quando abandonamos o genérico DIV e adotamos tags semânticas. Principalmente quando temos múltiplas DIVs aninhadas em um nível de profundidade que apenas o criador original poderia compreender (ou não). Para quem irá administrar esse código depois, é muito melhor encontrar tudo organizado de uma forma mais prática e não uma matriosca de código.

A padronização das tags corretas também facilita o trânsito entre diferentes empresas e diferentes projetos. Afinal, é para isso que padrões são criados.

Estruturas primárias

Vamos combinar: todo mundo cria páginas HTML praticamente do mesmo jeito. Nós temos um cabeçalho (ou “header”), onde fica o logotipo do site, a navegação, os links sociais etc. Temos a parte principal (ou “main”), onde vai o conteúdo único de cada página e que não se repete nas demais. E, então, temos o famoso rodapé (ou “footer”), em que colocamos informações menos importantes e/ou repetimos o que aparece no topo, para que o usuário não precise rolar tudo de novo para ver a navegação, por exemplo.

Header. Main. Footer. Adivinhe qual é o nome das tags semânticas estipuladas pela W3C para essas estruturas primárias? Não, não é DIV, nem “coisa”.

<header>

<header> é um indicador de uma área de conteúdo que vem no começo, popularmente chamado de “cabeçalho”.

Semanticamente, de acordo com as especificações, seu uso não se restringe ao topo do documento, mas pode ser aplicado ao início de uma seção ou área. Dentro deste elemento costumam vir informações introdutórias e navegação.

Por favor, não confunda <head> com <header>.

<main>

Como a própria W3C explicita, “a principal área de conteúdo de um documento inclui conteúdo exclusivo desse documento e exclui o conteúdo repetido em um conjunto de documentos”. Ou seja, <main> é o componente principal, a grande região que encapsula todas as demais que não são nem cabeçalho, nem rodapé (e nem conteúdo paralelo, mas chegamos lá).

Por definição, há somente uma seção desse tipo na página inteira. Da mesma forma que não se deve utilizar mais de um <h1> por página (inclusive sob o risco de sofrer penalizações em suas estratégias de SEO), não se deve utilizar mais de um <main> na mesma página. Se sua página aborda dois assuntos completamente diferentes a ponto de precisar de dois <h1> e dois <main>, é recomendado fazer logo duas páginas, uma para cada tópico.

<footer>

<footer> é um indicador de uma área de conteúdo que vem ao final de um conteúdo. Semanticamente, de acordo com as especificações, seu uso não se restringe ao rodapé da página, mas pode ser aplicado ao final de uma seção ou área. Dentro deste elemento costumam vir informações como autor, contato, copyright, documentos relacionados etc.

Embora a interpretação das tags <header> e <footer> pelos navegadores não atribua qualquer posicionamento visual no layout da página, a regra de bom uso determina que o primeiro apareça antes do conteúdo principal e o segundo venha após o conteúdo principal.

Indicadores de conteúdo

Se as tags anteriores podem ser classificadas como estruturais ao se montar uma página, existem outras tags no HTML 5 que devem substituir as DIVs de acordo com o seu conteúdo específico.

<article>

<article> é um indicador de uma área de conteúdo do seu site, o núcleo de uma determinada página, a porção mais central e relevante da página.

Antes da sua existência, mecanismos de busca, como o Google não tinham como identificar a parte mais relevante de seu conteúdo. Tanto a navegação, quanto o topo da página ou o seu miolo tinham o mesmo peso, sendo analisados de baixo para cima e sua importância determinada pela ordem de aparição no código-fonte. Com esta tag, navegadores, buscadores e outros sistemas automatizados podem identificar facilmente o conteúdo principal.

De acordo com a especificação semântica, o elemento contido dentro de <article> está pronto para ser distribuído ou reutilizado de forma independente, sem precisar dos demais elementos da página para ser compreendido.

Então, o que diferencia o <main> do <article>? O primeiro é estrutural, o segundo é puramente semântico. Por causa disso, é comum ver a seguinte estrutura:

...

Dentro de <article> é possível incluir diversas outras tags semânticas, até mesmo seu próprio <header> e seu próprio <footer>, que serão diferentes do <header> e do <footer> da página.

<nav>

<nav> é um indicador de uma área na página que contém majoritariamente links de navegação.

Nem todos os links de um documento precisam estar contidos dentro deste elemento, apenas aquelas áreas popularmente conhecidas como “menu” ou listas de links.

Semanticamente, sistemas automatizados como navegadores, mecanismos de busca ou leitores de tela não tinham como diferenciar links de navegação de conteúdo propriamente dito. Com a implementação da tag <nav>, por exemplo, leitores de tela podem pular inicialmente este tipo de área no site para usuários com deficiências.

<aside>

<aside> é um indicador de uma área de conteúdo paralelo, complementar ao conteúdo principal em sua página.

Existe uma interpretação equivocada das especificações que indica seu uso para “sidebars”Não é o caso, o conteúdo contido nesta tag é “lateral” no sentido figurado, não no sentido estrito da palavra, uma vez que, assim como as outras tags de layout, ela não guarda em si nenhuma instrução de posicionamento para o navegador.

O elemento contido dentro de <aside> funciona como uma nota, um adendo, um esclarecimento ao conteúdo que a cerca. Sua formatação fica ao critério do designer responsável e do CSS implementado.

<section>

<section> é um indicador de seção, capítulo, divisão de um determinado capítulo, cujo conteúdo está agrupado pelo mesmo tema.

Então, <section> é a boa e velha <div> com outro nome? Não exatamente.  O primeiro agrupa conteúdo que compartilha o mesmo tema. O segundo representa uma ruptura genérica no fluxo da página. Em bom português, toda seção é uma divisão do conteúdo, mas nem toda divisão chega a formar uma seção.

“Entendi, então é pra usar <section> em tudo e esquecer a DIV”. Não! A W3C é enfática: “quando um elemento é necessário apenas para fins de estilo ou como uma conveniência para scripts, os autores são incentivados a usar o elemento <div>”. Logo, não está proibido o uso de DIV, desde que seja empregada nas situações adequadas e não para “coisar” tudo.

DIV vs Tudo

Agora, vamos juntar tudo que aprendemos e perceber a diferença.

O primeiro exemplo é uma página HTML 5 em que tudo é DIV. Ela é renderizada perfeitamente no navegador, funciona direitinho. Não há nada tecnicamente errada com ela. Porém, o código é um tormento para os olhos e um pesadelo para dar manutenção, além de não trazer quaisquer benefícios de acessibilidade.






Aposente as DIVs!




  • Home
  • Contato

O título do artigo é aqui

Publicado em por Author - 30 comentários

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Entre em contato

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Copyright 2020 Código Fonte©

O segundo exemplo é semanticamente correto e traz uma gritante diferença para quem irá gerenciar, além de permitir uma acessibilidade muito maior.






Aposente as DIVs!




O título do artigo é aqui

Publicado em por Author - 30 comentários

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Copyright 2020 Código Fonte©