---
id: 5dc2385ff86c76b9248c6eb7
title: Hatua ya 5
challengeType: 0
dashedName: step-5
---

# --description--

HTML5 ina baadhi ya vipengele vinavyotambulisha maeneo tofauti ya maudhui. Vipengele hivi hurahisisha kusoma HTML yako na kusaidia kwa Uboreshaji wa Injini ya Utafutaji (SEO) na ufikivu.

Tambua sehemu kuu ya ukurasa huu kwa kuongeza tagi ya ufunguzi ya `<main>` kabla ya kipengele cha `h1`, natagi ya kufunga ya `</main>` baada ya kipengele cha `p`.

# --hints--

Kipengee chako cha `main` kinapaswa kuwa na tagi ya ufunguzi. Tagi za ufunguzi zina sintaksia ifuatayo: `<elementName>`.

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

Kipengele chako cha `main` kinapaswa kuwa na tagi ya kufunga. Tagi za kufunga zina `/` mara baada ya herufi ya `<`.

```js
assert(code.match(/<\/main\>/));
```

Tagi ya ufunguzi ya kipengele chako cha `main` inapaswa kuwa chini ya tagi ya ufunguzi ya kipengele cha `body`. Unazo katika mpangilio mbaya.

```js
const main = document.querySelector('main');
assert.equal(main?.previousElementSibling, null);
```

Tagi ya ufunguzi ya kipengele chako cha `main` inapaswa kuwa juu ya kipengele cha `h1`. Unazo katika mpangilio mbaya.

```js
const collection = [...document.querySelectorAll('main,h1')].map(
  (node) => node.nodeName
);
assert(collection.indexOf('MAIN') < collection.indexOf('H1'));
```

Tagi ya kufunga ya kipengele chako cha `main` inapaswa kuwa chini ya kipengele cha `p`. Unazo katika mpangilio mbaya.

```js
const mainNode = document.querySelector('main');
const pNode = document.querySelector('p');
assert(
  mainNode.contains(pNode) &&
    pNode.textContent.toLowerCase().match(/see more cat photos in our gallery/)
);
```

# --seed--

## --seed-contents--

```html
<html>
  <body>
--fcc-editable-region--

    <h1>CatPhotoApp</h1>
    <h2>Cat Photos</h2>
    <!-- TODO: Add link to cat photos -->
    <p>See more cat photos in our gallery.</p>

--fcc-editable-region--
  </body>
</html>
```

