HTML HTML Basics Structuring Your Content Structuring Content Challenge

sectioning content code challenge number 3 and 4

Place the content between the header and footer (h2, p and ul) inside an element that represents standalone sections of content.

Bummer: Make sure the section element is between the header and footer.

index.html
<!DOCTYPE html>
<html>
  <head>
   <header>
    <section>
    <link href="styles.css" rel="stylesheet">
    <title>My Portfolio</title>
  </head>
  <body>
    <nav>
     <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Work</a></li>
       <li><a href="#">Contact</a></li>            
     </ul>
    </nav>
      <h1>My Web Design &amp; Development Portfolio!</h1> 
      <p>A site featuring my latest work.</p>
    </header>  

    <h2>Welcome</h2> 
    <p>Fusce semper id ipsum sed scelerisque. Etiam nec elementum massa. Pellentesque tristique ex ac ipsum hendrerit, eget feugiat ante faucibus.</p>
    <ul>
      <li><a href="#">Recent project #1</a></li>
      <li><a href="#">Recent project #2</a></li>
      <li><a href="#">Recent project #3</a></li>     
    </ul>
    </section>

    <footer>
    <p>&copy; 2017 My Portfolio</p>
    <p>Follow me on <a href="#">Twitter</a>, <a href="#">Instagram</a> and <a href="#">Dribbble</a></p>
    </footer>
  </body>
</html>

1 Answer

Hey Lauren, your header and section elements need to be in the <body> not the <head>, also the <section> needs to start after the header.

<!DOCTYPE html>
<html>
  <head>
    <link href="styles.css" rel="stylesheet">
    <title>My Portfolio</title>
  </head>
  <body>

    <header>
    <nav>
     <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Work</a></li>
       <li><a href="#">Contact</a></li>            
     </ul>
    </nav>
      <h1>My Web Design &amp; Development Portfolio!</h1> 
      <p>A site featuring my latest work.</p>
    </header>  

    <section>
    <h2>Welcome</h2> 
    <p>Fusce semper id ipsum sed scelerisque. Etiam nec elementum massa. Pellentesque tristique ex ac ipsum hendrerit, eget feugiat ante faucibus.</p>
    <ul>
      <li><a href="#">Recent project #1</a></li>
      <li><a href="#">Recent project #2</a></li>
      <li><a href="#">Recent project #3</a></li>     
    </ul>
    </section>

    <footer>
    <p>&copy; 2017 My Portfolio</p>
    <p>Follow me on <a href="#">Twitter</a>, <a href="#">Instagram</a> and <a href="#">Dribbble</a></p>
    </footer>
  </body>
</html>

Hope this helps! Dylan