freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of...

---
id: 587d78aa367417b2b2512aec
title: Define the Head and Body of an HTML Document
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP'
forumTopicId: 301096
dashedName: define-the-head-and-body-of-an-html-document
---

# --description--

You can add another level of organization in your HTML document within the `html` tags with the `head` and `body` elements. Any markup with information about your page would go into the `head` tag. Then any markup with the content of the page (what displays for a user) would go into the `body` tag.

Metadata elements, such as `link`, `meta`, `title`, and `style`, typically go inside the `head` element.

Here's an example of a page's layout:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta />
  </head>
  <body>
    <div>
    </div>
  </body>
</html>
```

# --instructions--

Edit the markup so there's a `head` and a `body`. The `head` element should only include the `title`, and the `body` element should only include the `h1` and `p`.

# --hints--

There should be only one `head` element on the page.

```js
const headElems = code.replace(/\n/g, '').match(/\<head\s*>.*?\<\/head\s*>/g);
assert(headElems && headElems.length === 1);
```

There should be only one `body` element on the page.

```js
const bodyElems = code.replace(/\n/g, '').match(/<body\s*>.*?<\/body\s*>/g);
assert(bodyElems && bodyElems.length === 1);
```

The `head` element should be a child of the `html` element.

```js
const htmlChildren = code
  .replace(/\n/g, '')
  .match(/<html\s*>(?<children>.*)<\/html\s*>/);
let foundHead;
if (htmlChildren) {
  const { children } = htmlChildren.groups;

  foundHead = children.match(/<head\s*>.*<\/head\s*>/);
}
assert(foundHead);
```

The `body` element should be a child of the `html` element.

```js
const htmlChildren = code
  .replace(/\n/g, '')
  .match(/<html\s*>(?<children>.*?)<\/html\s*>/);
let foundBody;
if (htmlChildren) {
  const { children } = htmlChildren.groups;
  foundBody = children.match(/<body\s*>.*<\/body\s*>/);
}
assert(foundBody);
```

The `head` element should wrap around the `title` element.

```js
const headChildren = code
  .replace(/\n/g, '')
  .match(/<head\s*>(?<children>.*?)<\/head\s*>/);
let foundTitle;
if (headChildren) {
  const { children } = headChildren.groups;
  foundTitle = children.match(/<title\s*>.*?<\/title\s*>/);
}
assert(foundTitle);
```

The `body` element should wrap around both the `h1` and `p` elements.

```js
const bodyChildren = code
  .replace(/\n/g, '')
  .match(/<body\s*>(?<children>.*?)<\/body\s*>/);
let foundElems;
if (bodyChildren) {
  const { children } = bodyChildren.groups;
  const h1s = children.match(/<h1\s*>.*<\/h1\s*>/g);
  const ps = children.match(/<p\s*>.*<\/p\s*>/g);
  const numH1s = h1s ? h1s.length : 0;
  const numPs = ps ? ps.length : 0;
  foundElems = numH1s === 1 && numPs === 1;
}
assert(foundElems);
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html>
  <title>The best page ever</title>

  <h1>The best page ever</h1>
  <p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

</html>
```

# --solutions--

```html
<!DOCTYPE html>
<html>
 <head>
  <title>The best page ever</title>
 </head>
 <body>
  <h1>The best page ever</h1>
  <p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
 </body>
</html>
```
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00			`---`
			`id: 587d78aa367417b2b2512aec`
			`title: Define the Head and Body of an HTML Document`
			`challengeType: 0`
			`videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP'`
fix(curriculum): Added forumTopicId to remaining 1200 challeng… (#36558) 2019-08-05 16:17:33 +00:00			`forumTopicId: 301096`
feat(curriculum): restore seed + solution to Chinese (#40683) * feat(tools): add seed/solution restore script * chore(curriculum): remove empty sections' markers * chore(curriculum): add seed + solution to Chinese * chore: remove old formatter * fix: update getChallenges parse translated challenges separately, without reference to the source * chore(curriculum): add dashedName to English * chore(curriculum): add dashedName to Chinese * refactor: remove unused challenge property 'name' * fix: relax dashedName requirement * fix: stray tag Remove stray `pre` tag from challenge file. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> Co-authored-by: nhcarrigan <nhcarrigan@gmail.com> 2021-01-13 02:31:00 +00:00			`dashedName: define-the-head-and-body-of-an-html-document`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00			`---`

Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00			`# --description--`

			You can add another level of organization in your HTML document within the `html` tags with the `head` and `body` elements. Any markup with information about your page would go into the `head` tag. Then any markup with the content of the page (what displays for a user) would go into the `body` tag.

			Metadata elements, such as `link`, `meta`, `title`, and `style`, typically go inside the `head` element.

feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00			`Here's an example of a page's layout:`
fix(curriculum): Convert blockquote elements to triple backtick syntax for Responsive Web Design (#35993) * fix: converted blockquotes to code fences 2019-05-14 08:11:58 +00:00
			```html
			`<!DOCTYPE html>`
			`<html>`
			`<head>`
fix(learn): abstract comments from code (#40869) 2021-02-03 16:58:33 +00:00			`<meta />`
fix(curriculum): Convert blockquote elements to triple backtick syntax for Responsive Web Design (#35993) * fix: converted blockquotes to code fences 2019-05-14 08:11:58 +00:00			`</head>`
			`<body>`
fix(learn): abstract comments from code (#40869) 2021-02-03 16:58:33 +00:00			`<div>`
			`</div>`
fix(curriculum): Convert blockquote elements to triple backtick syntax for Responsive Web Design (#35993) * fix: converted blockquotes to code fences 2019-05-14 08:11:58 +00:00			`</body>`
			`</html>`
			```

Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00			`# --instructions--`

			Edit the markup so there's a `head` and a `body`. The `head` element should only include the `title`, and the `body` element should only include the `h1` and `p`.

			`# --hints--`

			There should be only one `head` element on the page.

			```js
			`const headElems = code.replace(/\n/g, '').match(/\<head\s>.?\<\/head\s*>/g);`
			`assert(headElems && headElems.length === 1);`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00			```

Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00			There should be only one `body` element on the page.
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00			```js
			`const bodyElems = code.replace(/\n/g, '').match(/<body\s>.?<\/body\s*>/g);`
			`assert(bodyElems && bodyElems.length === 1);`
			```

			The `head` element should be a child of the `html` element.

			```js
			`const htmlChildren = code`
			`.replace(/\n/g, '')`
			`.match(/<html\s>(?<children>.)<\/html\s*>/);`
			`let foundHead;`
			`if (htmlChildren) {`
			`const { children } = htmlChildren.groups;`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00			`foundHead = children.match(/<head\s>.<\/head\s*>/);`
			`}`
			`assert(foundHead);`
			```

			The `body` element should be a child of the `html` element.

			```js
			`const htmlChildren = code`
			`.replace(/\n/g, '')`
			`.match(/<html\s>(?<children>.?)<\/html\s*>/);`
			`let foundBody;`
			`if (htmlChildren) {`
			`const { children } = htmlChildren.groups;`
			`foundBody = children.match(/<body\s>.<\/body\s*>/);`
			`}`
			`assert(foundBody);`
			```

			The `head` element should wrap around the `title` element.

			```js
			`const headChildren = code`
			`.replace(/\n/g, '')`
			`.match(/<head\s>(?<children>.?)<\/head\s*>/);`
			`let foundTitle;`
			`if (headChildren) {`
			`const { children } = headChildren.groups;`
			`foundTitle = children.match(/<title\s>.?<\/title\s*>/);`
			`}`
			`assert(foundTitle);`
			```

			The `body` element should wrap around both the `h1` and `p` elements.

			```js
			`const bodyChildren = code`
			`.replace(/\n/g, '')`
			`.match(/<body\s>(?<children>.?)<\/body\s*>/);`
			`let foundElems;`
			`if (bodyChildren) {`
			`const { children } = bodyChildren.groups;`
			`const h1s = children.match(/<h1\s>.<\/h1\s*>/g);`
			`const ps = children.match(/<p\s>.<\/p\s*>/g);`
			`const numH1s = h1s ? h1s.length : 0;`
			`const numPs = ps ? ps.length : 0;`
			`foundElems = numH1s === 1 && numPs === 1;`
			`}`
			`assert(foundElems);`
			```

			`# --seed--`

			`## --seed-contents--`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00
			```html
			`<!DOCTYPE html>`
			`<html>`
			`<title>The best page ever</title>`
fix(challenge-md): Fix quotes that failed in the transform 2018-10-08 00:01:53 +00:00
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00			`<h1>The best page ever</h1>`
			<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
fix(challenge-md): Fix quotes that failed in the transform 2018-10-08 00:01:53 +00:00
			`</html>`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00			```

Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00			`# --solutions--`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00
Expected solution for the challenge seed code (#32522) * Expected solution for the challenge seed code I have updated the expected output for the challenge seed code. * fix: corrected solution syntax 2019-02-12 16:19:56 +00:00			```html
			`<!DOCTYPE html>`
			`<html>`
			`<head>`
			`<title>The best page ever</title>`
			`</head>`
			`<body>`
			`<h1>The best page ever</h1>`
			<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
			`</body>`
			`</html>`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00			```