HTML semântico: layout
O curso trata dos três elementos HTML que formam o esqueleto de uma página: header, main e footer. Ele compara essas tags com marcação feita só de div e mostra o que cada uma comunica a navegadores, mecanismos de busca, leitores de tela e outros desenvolvedores. As aulas ligam cada tag ao seu marco na árvore de acessibilidade e mostram como inspecionar essa árvore nas DevTools. Também explicam quando div e span continuam sendo a escolha certa e terminam com um layout Rails completo, com link de pular.
O que você vai aprender
- ✓Por que tags semânticas carregam significado que nomes de classe num div não carregam
- ✓Como header, main e footer de nível de página viram os marcos banner, main e contentinfo
- ✓A regra de um main visível por página e como o link de pular aponta para ele
- ✓Como conferir papéis no painel Accessibility das DevTools e testar com um leitor de tela
- ✓Quando div e span são a escolha precisa para layout ou ganchos de estilo
- ✓Como montar e conferir o esqueleto de um layout Rails compartilhado
Por que tags semânticas ganham da sopa de div
Com o CSS certo, essas duas páginas conseguem renderizar pixel a pixel idênticas. O modelo de árvore do curso de DOM Basics se aplica igualmente às duas: toda caixa, todo nó de texto, no mesmo formato. O que é diferente é invisível na tela e ainda assim importa enormemente.
Ler a aula completa grátis →Currículo
7 aulasPor que tags semânticas ganham da sopa de div
Compara duas páginas visualmente iguais e mostra por que header, main e footer carregam significado que divs não têm.
header: mais do que só o topo da página
Explica o header de nível de página, seu uso num layout Rails compartilhado e quando ele vira o marco banner.
main: a única tag que toda página precisa exatamente uma vez
Trata o main como a área de conteúdo única, a regra de um por página, links de pular e o lugar do yield.
footer: fechando a página com significado
Descreve o conteúdo típico do footer, seu marco contentinfo e um ano de copyright automático num layout Rails.
Marcos de acessibilidade e a árvore de acessibilidade, de forma concreta
Mostra a árvore de acessibilidade nas DevTools, compara marcos com divs genéricas e sugere testar com leitores de tela nativos.
Quando o div ainda é a escolha certa e honesta
Explica quando div e span servem para layout ou estilo puro e por que abusar de section entulha a lista de marcos.
Juntando tudo: estruturando um esqueleto de página de verdade
Monta um esqueleto completo de layout Rails, confere nas DevTools e aplica um checklist para layouts novos.