freeCodeCamp/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-eleme...

3.3 KiB

id title challengeType videoUrl localeTitle
bad87fee1348bd9aecf08801 Introduction to HTML5 Elements 0 Introducción a los elementos HTML5

Description

HTML5 introduce etiquetas HTML más descriptivas. Estos incluyen header , footer , nav , video , article , section y otros. Estas etiquetas hacen que su HTML sea más fácil de leer y también ayudan con la optimización del motor de búsqueda (SEO) y la accesibilidad. La etiqueta main HTML5 ayuda a los motores de búsqueda y otros desarrolladores a encontrar el contenido principal de su página. Nota
Muchas de las nuevas etiquetas HTML5 y sus beneficios se tratan en la sección de accesibilidad aplicada.

Instructions

Cree un segundo elemento p después del elemento p existente con el siguiente texto de kitty ipsum: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Envuelva los párrafos con una etiqueta main apertura y cierre.

Tests

tests:
  - text: Necesitas 2 elementos <code>p</code> con el texto de Kitty Ipsum.
    testString: 'assert($("p").length > 1, "You need 2 <code>p</code> elements with Kitty Ipsum text.");'
  - text: Asegúrese de que cada uno de sus elementos <code>p</code> tenga una etiqueta de cierre.
    testString: 'assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure each of your <code>p</code> elements has a closing tag.");'
  - text: Su elemento <code>p</code> debe contener las primeras palabras del <code>kitty ipsum text</code> adicional proporcionado.
    testString: 'assert.isTrue((/Purr\s+jump\s+eat/gi).test($("p").text()), "Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.");'
  - text: Su código debe tener un elemento <code>main</code> .
    testString: 'assert($("main").length === 1, "Your code should have one <code>main</code> element.");'
  - text: El elemento <code>main</code> debe tener dos elementos de párrafo como niños.
    testString: 'assert($("main").children("p").length === 2, "The <code>main</code> element should have two paragraph elements as children.");'
  - text: La etiqueta <code>main</code> apertura debe aparecer antes de la etiqueta del primer párrafo.
    testString: 'assert(code.match(/<main>\s*?<p>/g), "The opening <code>main</code> tag should come before the first paragraph tag.");'
  - text: La etiqueta <code>main</code> cierre debe aparecer después de la segunda etiqueta de párrafo de cierre.
    testString: 'assert(code.match(/<\/p>\s*?<\/main>/g), "The closing <code>main</code> tag should come after the second closing paragraph tag.");'

Challenge Seed

<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>

Solution

// solution required