HTML semântico: conteúdo
HTML semântico: conteúdo trata das quatro tags que estruturam o que fica dentro do main: article, section, nav e aside. Cada aula explica o que uma tag marca e qual papel de acessibilidade ela expõe, um papel que dá para conferir no painel Accessibility das DevTools. O curso mostra quando uma section precisa de nome acessível, como diferenciar vários blocos nav e quando um aside mantém o papel complementary. No fim, há um processo de decisão com quatro perguntas e uma página de produto completa em Rails.
O que você vai aprender
- ✓Marcar conteúdo autocontido com article, incluindo comentários aninhados
- ✓Agrupar partes temáticas com section e dar a cada uma um nome acessível
- ✓Reservar o nav para blocos de navegação importantes e rotular cada um com aria-label
- ✓Usar aside para conteúdo tangencial e entender o papel complementary
- ✓Escolher entre div, article, aside e section com quatro perguntas em ordem
- ✓Conferir cada papel no painel Accessibility das DevTools
Dentro do main: dando estrutura própria ao conteúdo
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…
Ler a aula completa grátis →Currículo
7 aulasDentro do main: dando estrutura própria ao conteúdo
Apresenta article, section, nav e aside, o problema estrutural que cada um resolve e seus papéis de acessibilidade.
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.
section: agrupando conteúdo relacionado sob um heading
Define section como parte temática de um todo maior, que precisa de nome acessível para ganhar o papel region.
nav: marcando os links que realmente importam
Reserva o nav para blocos de navegação importantes, rotula vários nav com aria-label e monta breadcrumbs com ol.
aside: relacionado, mas não essencial
Marca com aside o conteúdo tangencial e removível, e explica quando ele mantém o marco complementary.
Escolhendo entre article, section, div, e aside
Aplica quatro perguntas em ordem para escolher entre div, article, aside e section na mesma marcação.
Juntando tudo: estruturando o conteúdo de uma página de produto de verdade
Estrutura uma página de produto completa em Rails com todas as tags e confere os papéis esperados nas DevTools.