2.3 KiB
| id | title | challengeType | videoUrl | forumTopicId | dashedName |
|---|---|---|---|---|---|
| 587d774e367417b2b2512a9f | Saltar para o conteúdo diretamente usando o elemento main | 0 | https://scrimba.com/c/cPp7zuE | 301018 | jump-straight-to-the-content-using-the-main-element |
--description--
O HTML5 introduziu uma série de novos elementos que fornecem aos desenvolvedores mais opções, ao mesmo tempo em que incorporam recursos de acessibilidade. Essas tags incluem main, header, footer, nav, article e section, entre outros.
Por padrão, um navegador torna esses elementos semelhantes ao elemento div. No entanto, usá-los onde eles forem apropriados fornece um significado adicional ao código. O nome da tag, sozinho, pode indicar o tipo de informação que esta contém, o que adiciona significado semântico a esse conteúdo. As tecnologias assistivas podem acessar essas informações para fornecer um resumo melhor da página ou opções de navegação para seus usuários.
O elemento main é usado para envolver (você adivinhou) o conteúdo principal, e deve haver apenas um por página. O objetivo é envolver as informações relacionadas ao tópico central da página. Ele não tem como objetivo incluir itens que se repetem nas páginas, como links de navegação ou banners.
A tag main também possui um recurso de referência incorporado que a tecnologia assistiva pode usar para navegar rapidamente até o conteúdo principal. Se você já viu um link "Ir para o conteúdo principal" no topo de uma página, usar a tag main automaticamente fornece essa funcionalidade aos dispositivos assistivos.
--instructions--
O Camper Cat tem grandes ideias para a página de armas ninja que ele criou. Ajude-o a configurar o código adicionando tags de abertura e fechamento main entre o header e o footer (abordados em outros desafios). Mantenha a tag main vazia por enquanto.
--hints--
O código deve ter uma tag main.
assert($('main').length == 1);
A tag main deve estar entre a tag de fechamento header e a tag de abertura footer.
assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
--seed--
--seed-contents--
<header>
<h1>Weapons of the Ninja</h1>
</header>
<footer></footer>
--solutions--
<header>
<h1>Weapons of the Ninja</h1>
</header>
<main>
</main>
<footer></footer>