Dê estrutura semântica à página
Use regiões semânticas para facilitar navegação.
- Aplicar main/nav/header/footer de forma adequada.
Elementos semânticos descrevem o propósito de cada região da página. Isso melhora leitura, manutenção e acessibilidade.
1<header><p>Northstar Garden Club</p></header>
2<nav aria-label="Main navigation">
3 <a href="/events">Events</a>
4 <a href="/join">Join</a>
5</nav>
6<main>
7 <h1>Grow together</h1>
8 <p>Learn, plant and share with your neighbors.</p>
9</main>
10<footer><p>Meeting monthly since 2012.</p></footer>Northstar Garden Club Events Join Grow together Learn, plant and share with your neighbors. Meeting monthly since 2012.
Use article para conteúdo autocontido, section para agrupamentos temáticos e div como último recurso genérico.
Principais conclusões
Aplicar main/nav/header/footer de forma adequada.
Prefira elementos semânticos para comunicar intenção.
Mantenha estrutura legível para pessoas e ferramentas assistivas.
Quiz da aula
5 perguntas · aprovação com 4 acertos · até 50 XP
Ao passar, você conclui a aula e mantém sua sequência. As perguntas erradas voltarão em sessões de revisão.
Pratique: escreva código em HTML
Escreva a marcação, veja a prévia em um frame isolado do navegador e compare o texto visível com os requisitos.
Estruture a homepage do clube
Monte header City Garden Club, link nav Upcoming events, main com Grow with us e Garden together., e footer All neighbors welcome.
- Texto da homepage
Sua marcação aparece em uma prévia isolada. Execute os testes para conferir o texto visível da página.
Dúvidas sobre esta lição
Travou em algum ponto? Pergunte. Descobriu algo? Compartilhe. Explicar também é uma ótima forma de aprender.
Carregando publicações…