---
id: 5dc23991f86c76b9248c6eb8
title: Step 6
challengeType: 0
dashedName: step-6
---

# --description--

Nello step precedente, hai inserito gli elementi `h1`, `h2`, il commento e l'elemento `p` all'interno dell'elemento `main`. Questa operazione si chiama *annidamento*. Gli elementi annidati dovrebbero essere posizionati due spazi più a destra dell'elemento in cui sono annidati. Questa spaziatura è detta indentazione e viene utilizzata per rendere l'HTML più leggibile.

Nel seguente codice, l'elemento `h1`, l'elemento `h2` e il commento sono indentati di due spazi rispetto all'elemento `main`. Usa la barra spaziatrice della tastiera per aggiungere due spazi prima dell'elemento `p`, in modo che sia indentato nel modo corretto.

# --hints--

Il codice dovrebbe avere un elemento `h2` con il testo `Cat Photos`. Potresti averlo cancellato accidentalmente, mancano i tag di apertura e di chiusura, o il testo è cambiato.

```js
assert(
  document.querySelector('h2') &&
    code.match(/<\/h2\>/) &&
    document.querySelector('h2').innerText.toLowerCase() === 'cat photos'
);
```

Non dovresti aggiungere gli elementi `ul` o `li` dell'esempio.

```js
assert(
  !document.querySelector('ul') && !document.querySelector('li')
);
```

Non dovresti cambiare l'indentazione della riga con l'elemento `h2`. Il suo tag di apertura dovrebbe iniziare a 6 spazi dall'inizio della riga. Puoi riavviare lo step per ripristinare l'indentazione originale.

```js
assert(code.toLowerCase().match(/<\/h1\>\s*\n\s{6}<h2>/));
```

Il codice dovrebbe avere un commento. Hai rimosso il commento che era presente.

```js
assert(code.match(/<!--.*-->/));
```

Il testo del commento dovrebbe essere `TODO: Add link to cat photos`. Non modificare il testo o lo spazio del commento.

```js
assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\.?\s*-->/i));
```

Non dovresti cambiare l'indentazione della riga con il commento. Il suo tag di apertura dovrebbe iniziare a 6 spazi dall'inizio della riga. Puoi riavviare lo step per ripristinare l'indentazione originale.

```js
assert(
  code
    .toLowerCase()
    .match(/<\/h2>\s*\n\s{6}<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/)
);
```

Il codice dovrebbe avere un elemento `p`. Hai rimosso l'elemento `p` che era presente.

```js
assert(document.querySelector('p'));
```

Il testo dell'elemento `p` dovrebbe essere `See more cat photos in our gallery.` Non modificare il testo, la spaziatura o la punteggiatura dell'elemento `p`.

```js
assert(
  document
    .querySelector('p')
    .innerText.toLowerCase()
    .match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
);
```

Il tag di apertura `p` dovrebbe avere la stessa indentazione dell'elemento `h2` e del commento. Il suo tag di apertura dovrebbe iniziare a 6 spazi dall'inizio della riga.

```js
assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
```

# --seed--

## --seed-contents--

```html
<html>
  <body>
    --fcc-editable-region--
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
    <p>See more cat photos in our gallery.</p>
    </main>
--fcc-editable-region--
  </body>
</html>
```

