2.8 KiB
2.8 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d774e367417b2b2512a9f | Jump Straight to the Content Using the main Element | 0 | Ir direto ao conteúdo usando o elemento principal |
Description
main
, header
, footer
, nav
, article
e section
, entre outras. Por padrão, um navegador renderiza esses elementos de forma semelhante ao div
humilde. No entanto, usá-los quando apropriado dá significado adicional à sua marcação. O nome da tag sozinho pode indicar o tipo de informação que contém, o que adiciona significado semântico a esse conteúdo. As tecnologias de assistência podem acessar essas informações para fornecer um melhor resumo 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. É destinado a cercar as informações relacionadas ao tópico central da sua página. Não é para incluir itens que se repetem nas páginas, como links de navegação ou banners. A tag main
também possui um recurso de marco incorporado que a tecnologia assistencial pode usar para navegar rapidamente para o conteúdo principal. Se você já viu um link "Ir para conteúdo principal" na parte superior de uma página, o uso automático de uma tag principal fornece aos dispositivos de assistência essa funcionalidade. Instructions
main
abertura e fechamento entre o header
e o footer
(abordadas em outros desafios). Mantenha as tags main
vazias por enquanto. Tests
tests:
- text: Seu código deve ter uma tag <code>main</code> .
testString: 'assert($("main").length == 1, "Your code should have one <code>main</code> tag.");'
- text: As tags <code>main</code> devem estar entre a tag de <code>header</code> fechamento e a tag de <code>footer</code> abertura.
testString: 'assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi), "The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.");'
Challenge Seed
<header>
<h1>Weapons of the Ninja</h1>
</header>
<footer></footer>
Solution
// solution required