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

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

Your nav element should have a closing tag.

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

Your nav element should be within your header element.

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

Your ul element should have an opening tag.

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

Your ul element should have a closing tag.

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

Your ul element should be within your nav element.

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

Your ul element should contain three li elements.

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>
        
        <figcaption>Mr. Whiskers in the Garden</figcaption>
      </figure>
--fcc-editable-region--
      
--fcc-editable-region--
    </header>
  </body>
</html>

Step 4

--description--

--hints--

--seed--

--seed-contents--