---
id: 5dc2385ff86c76b9248c6eb7
title: الخطوة 5
challengeType: 0
dashedName: step-5
---

# --description--

يحتوي HTML5 على بعض العناصر التي تحدد مناطق المحتوى المختلفة. هذه العناصر تجعل HTML الخاص بك أسهل للقراءة وتساعد في تحسين محرك البحث (SEO) وتسهيل المنال (accessibility).

حدد القسم الرئيس من هذه الصفحة بإضافة علامة فتح `<main>` بعد عنصر `h1`، و علامة إغلاق `</main>` بعد عنصر `p`.

# --hints--

يجب أن يحتوي العنصر `main` على opening tag. Opening tags تكتب هكذا: `<elementName>`.

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

يجب أن يحتوي العنصر `main` على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.

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

يجب أن تكون العلامة الافتتاحية لعنصر `main` الخاص بك أسفل العلامة الافتتاحية لعنصر `body`. لقد وضعتهم بترتيب خاطئ.

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

يجب أن تكون علامة أفتاح (opening tag) عنصرك `main` افوق عنصر `h1`. لقد وضعتهم بترتيب خاطئ.

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

يجب أن تكون clossing tag عنصر `main` الخاص بك تحت عنصر `p`. لقد وضعتهم بترتيب خاطئ.

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

