2.9 KiB
2.9 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d774e367417b2b2512a9f | Jump Straight to the Content Using the main Element | 0 | Ir directamente al contenido usando el elemento principal |
Description
main
, header
, footer
, nav
, article
y section
, entre otras. Por defecto, un navegador presenta estos elementos de manera similar a la humble div
. Sin embargo, usarlos cuando sea apropiado le da un significado adicional a su marca. El nombre de la etiqueta solo puede indicar el tipo de información que contiene, lo que agrega un significado semántico a ese contenido. Las tecnologías de asistencia pueden acceder a esta información para proporcionar un mejor resumen de la página o opciones de navegación para sus usuarios. El elemento main
se utiliza para envolver (usted lo adivinó) el contenido principal, y solo debe haber uno por página. Está destinado a rodear la información relacionada con el tema central de su página. No está diseñado para incluir elementos que se repiten en todas las páginas, como enlaces de navegación o banners. La etiqueta main
también tiene una característica de hito incorporada que la tecnología de asistencia puede usar para navegar rápidamente al contenido principal. Si alguna vez ha visto un enlace "Ir al contenido principal" en la parte superior de una página, el uso de una etiqueta principal otorga automáticamente esa funcionalidad a los dispositivos de asistencia. Instructions
main
etiquetas entre la header
y footer
(cubierto en otros desafíos). Mantener las etiquetas main
vacías por ahora. Tests
tests:
- text: Su código debe tener una etiqueta <code>main</code> .
testString: 'assert($("main").length == 1, "Your code should have one <code>main</code> tag.");'
- text: Las etiquetas <code>main</code> deben estar entre la etiqueta de <code>header</code> cierre y la etiqueta de <code>footer</code> apertura.
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