2020-09-03 19:12:42 -07:00
---
id: 5f33310c1851c6c4da013250
2021-10-21 10:07:52 -07:00
title: Step 8
2020-09-03 19:12:42 -07:00
challengeType: 0
2021-10-21 10:07:52 -07:00
dashedName: step-8
2020-09-03 19:12:42 -07:00
---
2020-11-27 19:02:05 +01:00
# --description--
2020-09-03 19:12:42 -07:00
2021-07-21 12:03:09 -07:00
It's time to add some menu content. Add a `main` element below the existing `header` element. It will eventually contain pricing information about coffee and desserts offered by the cafe.
2020-09-03 19:12:42 -07:00
2020-11-27 19:02:05 +01:00
# --hints--
2020-09-03 19:12:42 -07:00
2021-07-21 12:03:09 -07:00
Your code should have an opening `<main>` tag.
2020-09-03 19:12:42 -07:00
2020-11-27 19:02:05 +01:00
```js
2021-07-21 12:03:09 -07:00
assert(code.match(/< main > /i));
```
Your code should have a closing `</main>` tag.
```js
assert(code.match(/< \/main > /i));
```
You should not change your `header` element. Make sure you don't accidentally delete your closing tag.
2020-09-03 19:12:42 -07:00
2021-07-21 12:03:09 -07:00
```js
assert($('header').length === 1);
```
Your `main` tag should come after your `header` tag.
```js
const main = document.querySelectorAll('main')[0];
assert(main.previousElementSibling.tagName === 'HEADER');
2020-09-03 19:12:42 -07:00
```
2020-11-27 19:02:05 +01:00
# --seed--
2020-09-03 19:12:42 -07:00
2020-11-27 19:02:05 +01:00
## --seed-contents--
2020-09-03 19:12:42 -07:00
```html
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" / >
2022-03-14 15:54:43 +00:00
< title > Cafe Menu< / title >
2020-09-03 19:12:42 -07:00
< / head >
< body >
2020-11-27 19:02:05 +01:00
--fcc-editable-region--
2020-09-03 19:12:42 -07:00
< header >
< h1 > CAMPER CAFE< / h1 >
< p > Est. 2020< / p >
< / header >
2020-11-27 19:02:05 +01:00
--fcc-editable-region--
2020-09-03 19:12:42 -07:00
< / body >
< html >
```
