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

Posted by Joseph Goolsby
Joseph Goolsby
152 Points

Where does the navigation element and the unordered list element placed after the header with a link?

I am placing the elements in the incorrect place. Please help. Thank you.

index.html 
<!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>
           <nav></nav>
           <ul></ul>
      </a>
    </header>
    <section></section>
    <footer>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>

2 Answers

erdragerdragsson
PLUS
erdragerdragsson
Courses Plus Student 5,887 Points
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Hello, try this code, and see if it works. i put the nav tags around the <ul> tags and puts some <li> tags inside the <ul> tags!

try it and see how it works out!

<!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>
          <nav>
           <ul>
           <li></li>
           <li></li>
           <li></li>
          </ul>
        </nav>
      </a>
    </header>
    <section></section>
    <footer>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>
Jon Major
Jon Major
3,531 Points
Jon Major
Jon Major
3,531 Points

Close but not quite! See below.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Oh okey, :)

Jon Major
Jon Major
3,531 Points
Jon Major
Jon Major
3,531 Points

Hi Joseph,

Let's just focus on the header element - i.e. all the code between <header> and </header> - because it looks like that's where the trouble is.

I find it helpful to first visualize what it is you're trying to accomplish using pseudocode before actually getting to the work of coding. As with many websites, there are two things that are going to be in the header for this site: (1) a heading containing the name of the site, which links to the site's homepage, and (2) a navigation menu containing a list of navigation links. In pseudocode then, your site would be coded like this:

  start of header
    open the link to the homepage
      site headings
    close the link
    open the nav menu
      open the list of nav menu items
        nav menu items
      close the list of nav menu items
    close the nav menu
  end of header

Now if you compare this structure with your code, I think you'll be able to figure out where it is you're going wrong. You're close!