1.9 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5dc2385ff86c76b9248c6eb7 | Step 5 | 0 | step-5 |
--description--
In HTML5 alcuni elementi identificano diverse aree di contenuto. Questi elementi rendono il tuo HTML più facile da leggere e aiutano con l'ottimizzazione per i motori di ricerca (SEO) e l'accessibilità.
Identifica la sezione principale di questa pagina aggiungendo un tag di apertura <main> dopo l'elemento h1 e un tag di chiusura </main> dopo l'elemento p.
--hints--
L'elemento main dovrebbe avere un tag di apertura. I tag di apertura hanno questa sintassi: <nomeElemento>.
assert(document.querySelector('main'));
L'elemento main dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere / subito dopo il carattere <.
assert(code.match(/<\/main\>/));
Il tag di apertura dell'elemento main dovrebbe essere al di sotto dell'elemento h1. Sono nell'ordine sbagliato.
const collection = [...document.querySelectorAll('main,h1')].map(
(node) => node.nodeName
);
assert(collection.indexOf('H1') < collection.indexOf('MAIN'));
Il tag di apertura dell'elemento main dovrebbe essere sopra l'elemento h2. Sono nell'ordine sbagliato.
const collection = [...document.querySelectorAll('main,h2')].map(
(node) => node.nodeName
);
assert(collection.indexOf('MAIN') < collection.indexOf('H2'));
Il tag di chiusura dell'elemento main dovrebbe essere al di sotto dell'elemento p. Sono nell'ordine sbagliato.
const mainNode = document.querySelector('main');
const pNode = document.querySelector('p');
assert(
mainNode.contains(pNode) &&
pNode.textContent.toLowerCase().match(/click here to view more cat photos/)
);
--seed--
--seed-contents--
<html>
<body>
--fcc-editable-region--
<h1>CatPhotoApp</h1>
<h2>Cat Photos</h2>
<!-- TODO: Add link to cat photos -->
<p>Click here to view more cat photos.</p>
--fcc-editable-region--
</body>
</html>