63 lines
2.3 KiB
Markdown
63 lines
2.3 KiB
Markdown
|
---
|
||
|
|
id: 587d774e367417b2b2512a9f
|
||
|
|
title: Saltar para o conteúdo diretamente usando o elemento main
|
||
|
|
challengeType: 0
|
||
|
|
videoUrl: 'https://scrimba.com/c/cPp7zuE'
|
||
|
|
forumTopicId: 301018
|
||
|
|
dashedName: 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`.
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert($('main').length == 1);
|
||
|
|
```
|
||
|
|
|
||
|
|
A tag `main` deve estar entre a tag de fechamento `header` e a tag de abertura `footer`.
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
|
||
|
|
```
|
||
|
|
|
||
|
|
# --seed--
|
||
|
|
|
||
|
|
## --seed-contents--
|
||
|
|
|
||
|
|
```html
|
||
|
|
<header>
|
||
|
|
<h1>Weapons of the Ninja</h1>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<footer></footer>
|
||
|
|
```
|
||
|
|
|
||
|
|
# --solutions--
|
||
|
|
|
||
|
|
```html
|
||
|
|
<header>
|
||
|
|
<h1>Weapons of the Ninja</h1>
|
||
|
|
</header>
|
||
|
|
<main>
|
||
|
|
|
||
|
|
</main>
|
||
|
|
<footer></footer>
|
||
|
|
```
|