Dentro do main: dando estrutura própria ao conteúdo
O esqueleto está construído: agora preencha com significado
O curso anterior construiu o esqueleto de uma página: header, main e footer. Cada um vira um marco (banner, main, contentinfo) para onde um usuário de leitor de tela pula direto. Aquele esqueleto ainda não diz nada sobre o que está dentro do <main>. Uma página de produto, um post de blog, e uma página de resultados de busca cabem no mesmo esqueleto enquanto precisam de estruturas internas completamente diferentes.
<main>
<!-- Tudo que este curso cobre acontece aqui -->
</main>
Quatro tags novas e seus papéis
Este curso cobre as quatro tags que o curso de Layout prometeu. nav, aside e section com nome são marcos; article tem um papel, mas não é marco:
| Tag | Marca | Papel de acessibilidade |
|---|---|---|
<article> |
Conteúdo independente e autocontido | article |
<section> |
Um agrupamento temático dentro de um todo maior | region: mas só com um nome acessível (Aula 3) |
<nav> |
Um bloco importante de links de navegação | navigation |
<aside> |
Conteúdo relacionado a, mas não essencial para, a ideia central | complementary no nível de página ou com nome (Aula 5) |
Dá para verificar cada um do jeito que a Aula 5 do curso anterior mostrou: as ferramentas de acessibilidade das DevTools exibem o papel que um leitor de tela recebe.
Por que esse conjunto de quatro, especificamente
Cada um resolve um problema estrutural distinto que <div> e <main> sozinhos não conseguem:
- Uma página com três posts de blog separados nela: onde um post termina e o próximo começa? (
article) - Um artigo longo com Introdução, lista de Features e Conclusão: como um leitor, ou o leitor de tela, pula entre as partes? (
section) - Uma página com um menu principal, uma trilha de breadcrumb, e links de paginação: quais desses são "navegação" versus só uma lista? (
nav) - Uma barra lateral com produtos relacionados, anúncios ou uma citação em destaque: conteúdo que vale incluir, mas que não é o motivo da visita (
aside)
O teste que continua do curso anterior
O teste da Aula 6 do curso de Layout continua valendo: sem o CSS, esse agrupamento ainda seria uma unidade significativa e distinta? Cada aula aqui ensina um tipo de "sim". A Aula 6 junta as quatro num único processo de decisão, porque as tags se confundem entre si e também com a div.
Como este curso está organizado
- Aula 2:
article, conteúdo independente e autocontido - Aula 3:
section, agrupando conteúdo relacionado sob um heading - Aula 4:
nav, marcando os links que importam - Aula 5:
aside, relacionado, mas não essencial - Aula 6: escolhendo entre
article,section,diveasidecom um único processo de decisão - Aula 7: estruturando o conteúdo de uma página de produto de verdade, de ponta a ponta
Pontos-chave
- Este curso adiciona quatro tags semânticas de conteúdo dentro do
<main>:article,section,naveaside, cada uma com seu papel de acessibilidade. - Cada tag resolve uma ambiguidade estrutural específica que
divs simples e headings sozinhos deixam sem resolver. - O teste "isso ainda faria sentido sem CSS?" do curso de Layout continua valendo. Agora ele também separa essas quatro tags entre si.
- Toda afirmação deste curso é conferível no painel Accessibility das DevTools, do mesmo jeito que demonstrado no curso anterior.
Continue com a aula 2
article: conteúdo independente e autocontido
Usa o teste da sindicação para identificar um article, com header e footer locais e comentários aninhados.
Com uma conta grátis você também tem os quizzes, seu progresso e suas anotações, e a discussão.