Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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 :)