2.8 KiB
id | title | challengeType | videoUrl | forumTopicId | dashedName |
---|---|---|---|---|---|
bad87fee1348bd9aecf08801 | Introducción a los elementos HTML5 | 0 | https://scrimba.com/p/pVMPUv/cBkZGpt7 | 301097 | introduction-to-html5-elements |
--description--
HTML5 introduce etiquetas HTML más descriptivas. Estas incluyen main
, header
, footer
, nav
, video
, article
, section
, entre otras.
Estas etiquetas dan una estructura descriptiva a tu HTML, hacen que tu HTML sea más fácil de leer, ayudan con la Optimización de Motores de Búsqueda (SEO) y mejoran la accesibilidad. La etiqueta HTML5 main
ayuda a los motores de búsqueda y otros desarrolladores a encontrar el contenido principal de tu página.
Por ejemplo, un elemento main
con dos elementos hijos anidados en su interior:
<main>
<h1>Hello World</h1>
<p>Hello Paragraph</p>
</main>
Note: Muchas de las nuevas etiquetas HTML5 y sus beneficios están cubiertos en la sección Accesibilidad Aplicada.
--instructions--
Crea un segundo elemento p
con el siguiente texto de gatito ipsum: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
Luego, crea un elemento main
y anida los dos elementos p
dentro del elemento main
.
--hints--
Debes tener 2 elementos p
con texto Ipsum Gatuno.
assert($('p').length > 1);
Cada uno de tus elementos p
debe tener una etiqueta de cierre.
assert(
code.match(/<\/p>/g) &&
code.match(/<\/p>/g).length === code.match(/<p/g).length
);
Tu elemento p
debe contener las primeras palabras del texto ipsum gatuno
adicional proporcionado.
assert.isTrue(/Purr\s+jump\s+eat/gi.test($('p').text()));
Tu código debe tener un elemento main
.
assert($('main').length === 1);
El elemento main
debe tener dos elementos párrafo como hijos.
assert($('main').children('p').length === 2);
La etiqueta de apertura main
debe aparecer antes de la primera etiqueta párrafo.
assert(code.match(/<main>\s*?<p>/g));
La etiquete de cierre main
debe aparecer después de la segunda etiqueta de cierre párrafo.
assert(code.match(/<\/p>\s*?<\/main>/g));
--seed--
--seed-contents--
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
--solutions--
<h2>CatPhotoApp</h2>
<main>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>