---
id: 669fd6fd12918e3de87854d4
title: Step 4
challengeType: 0
dashedName: step-4
---

# --description--

For your blog, there should be a way for users to navigate to different sections on the page.

The `nav` element is used to provide navigation links to other sections in the document or other sections in the website. A lot of times you will see the `nav` element used for menus or table of contents. 

Here is an example of using the `nav` element:

```html
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
```

Below your `figure` element, add a `nav` element with a `ul` element nested inside.

Inside the `ul` element, add three `li` elements.

# --hints--

Your `nav` element should have an opening tag. 

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

Your `nav` element should have a closing tag. 

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

Your `nav` element should be within your `header` element.

```js
const navElement = document.querySelector('nav');
assert.strictEqual(navElement?.parentElement.tagName, 'HEADER');
```

Your `ul` element should have an opening tag. 

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

Your `ul` element should have a closing tag. 

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

Your `ul` element should be within your `nav` element.

```js
const ulElement = document.querySelector('ul');
assert.strictEqual(ulElement?.parentElement.tagName, 'NAV');
```

Your `ul` element should contain three `li` elements.

```js
const ulElement = document.querySelector("ul");

const liElements = ulElement?.querySelectorAll("li");
assert.strictEqual(liElements?.length, 3);
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Mr. Whiskers' Blog</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <header>
      <h1>Welcome to Mr. Whiskers' Blog Page!</h1>
      <figure>
        <img
          src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"
          alt="a cat in the garden"
        />
        <figcaption>Mr. Whiskers in the Garden</figcaption>
      </figure>
--fcc-editable-region--
      
--fcc-editable-region--
    </header>
  </body>
</html>
```
