---
id: 669fcb5106eeb13ab7afcd09
title: Step 1
challengeType: 0
dashedName: step-1
demoType: onLoad
---

# --description--

In this workshop, you will practice working with semantic HTML by building a blog page dedicated to Mr. Whiskers the cat. 

The first section you will build out is the page <dfn>header</dfn>. 

The `header` element is used to represent introductory content like page navigation and other introductory information. 

Here is an example using the `header` element:

```html
<header>
  <h1>Main Page Title Goes Here</h1>
  <img src="example-logo.png" alt="Example logo" />
</header>
```

Inside the `body` element, add a `header` element.

# --hints--

You should have an opening `header` tag.

```js
assert.match(code, /<header>/i);
```

You should have a closing `header` tag.

```js
assert.match(code, /<\/header>/i);
```

Your `header` element should be inside the `body` element.

```js
assert.exists(document.querySelector('body > header'));
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Mr. Whiskers' Blog</title>
    <meta charset="UTF-8" />
  </head>
  <body>
  --fcc-editable-region--
    
  --fcc-editable-region--
  </body>
</html>
```
