freeCodeCamp/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-ca.../5dc1798ff86c76b9248c6eb3.md

2.3 KiB

id title challengeType dashedName
5dc1798ff86c76b9248c6eb3 Paso 2 0 step-2

--description--

Los elementos de título de h1 a h6 se utilizan para indicar la importancia del contenido debajo de ellos. Entre menor sea el número, el contenido será más importante, por lo tanto, el elemento h2 es menos importante que el elemento h1. Solo utiliza un elemento h1 por página y coloca encabezados de menor importancia debajo de encabezados de mayor importacion.

Debajo del elemento h1, añade un elemento h2 con este texto:

Cat Photos

--hints--

Tu elemento h1 debe tener una etiqueta de apertura. Las etiquetas de apertura tienen esta sintaxis: <elementName>.

assert(document.querySelector('h1'));

Tu elemento h1 debe tener una etiqueta de cierre. Las etiquetas de cierre tienen una / inmediatamente después del carácter <.

assert(code.match(/<\/h1\>/));

Solo deberías tener un elemento h1. Elimina el que está de más.

assert(
  document.querySelector('h1') && document.querySelectorAll('h1').length === 1
);

El texto de tu elemento h1 debe ser 'CatPhotoApp'. Probablemente no has añadido el texto o tienes un error tipográfico.

assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp');

Tu elemento h2 debe tener una etiqueta de apertura. Las etiquetas de apertura tienen esta sintaxis: <elementName>.

assert(document.querySelector('h2'));

Tu elemento h2 debe tener una etiqueta de cierre. Las etiquetas de cierre tiene una / después del carácter <.

assert(code.match(/<\/h2\>/));

El texto de tu elemento h2 debe ser 'Cat Photos'. El texto Cat Photos debe estar entre las etiquetas de apertura y cierre del elemento h2.

assert(document.querySelector('h2').innerText.toLowerCase() === 'cat photos');

Tu elemento h2 debe estar debajo del elemento h1. El elemento h1 tiene mayor importancia, por lo tanto, debe estar encima del elemento h2.

const collection = [...document.querySelectorAll('h1,h2')].map(
  (node) => node.nodeName
);
assert(collection.indexOf('H1') < collection.indexOf('H2'));

--seed--

--seed-contents--

<html>
  <body>
--fcc-editable-region--
    <h1>CatPhotoApp</h1>
--fcc-editable-region--
  </body>
</html>