---
id: 5dc2385ff86c76b9248c6eb7
title: Step 5
challengeType: 0
dashedName: step-5
---

# --description--

HTML5 has some elements that identify different content areas. These elements make your HTML easier to read and help with Search Engine Optimization (SEO) and accessibility.

Identify the main section of this page by adding a `<main>` opening tag before the `h1` element, and a `</main>` closing tag after the `p` element.

# --hints--

Your `main` element should have an opening tag. Opening tags have this syntax: `<elementName>`.

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

Your `main` element should have a closing tag. Closing tags have a `/` just after the `<` character.

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

Your `main` element's opening tag should be below the `body` element's opening tag. You have them in the wrong order.

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

Your `main` element's opening tag should be above the `h1` element. You have them in the wrong order.

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

Your `main` element's closing tag should be below the `p` element. You have them in the wrong order.

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

