Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Creating HTML Content Create Navigation with Lists

Marc-Adems Dor
Marc-Adems Dor
2,854 Points
Posted by Marc-Adems Dor
Marc-Adems Dor
2,854 Points

How to create a navigation element with an unordered list element after the link inside the header tutorial

Hello I just finished listening to the vide and I can't seem to add the navigation element on the page correctly. Now this is what I did: <nav></nav> the opening one was right after the header element and the closing one was at the end right before the other header one. Please help and let me know what I am doing wrong

Arthur Verschaeve
Arthur Verschaeve
20,816 Points

Maybe you can post the code you are having?

Marc-Adems Dor
Marc-Adems Dor
2,854 Points
Marc-Adems Dor
Marc-Adems Dor
2,854 Points

Yes here it is ... <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nick Pettit</title> </head> <body> <header> <nav> <a href="index.html"> <h1>Nick Pettit</h1> <h2>Designer</h2> </a> </nav> </header> <section></section> <footer> <p>© 2013 Nick Pettit.</p> </footer> </body> </html> ...

2 Answers

Jovanny Elias
Jovanny Elias
16,204 Points

Hey in order to Creat a navigation you need to have an unordered list inside a nav tag. Once you have your unordered list you can add list items with links and with a little css they I'll look like a navigation rather than just a list. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Nick Pettit</h1>  <h2>Designer</h2>
      </a>
      <nav>
         <ul>

         </ul>
      </nav>
    </header>
    <section></section>
    <footer>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>
Marc-Adems Dor
Marc-Adems Dor
2,854 Points
Marc-Adems Dor
Marc-Adems Dor
2,854 Points

Thanks a lot really helpful :)