HTML HTML Basics Structuring Your Content Structuring Content Challenge

Emily Strobl
Emily Strobl
5,259 Points

Error

I keep getting an error message. What am I doing wrong?

index.html
<!DOCTYPE html>
<html>
  <head>
    <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>

    <article>
      <h1>My Web Design &amp; Development Portfolio!</h1> 
      <p>A site featuring my latest work.</p>
    </article>

    <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>
    </section>

    <aside>
      <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>
    </aside>

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

Hello,

If you are on the first challenge, it says, "Place the ul, h1 and p elements at the top of the page inside an element that represents a group of introductory content."

The element for the "group of introductory content" the challenge refers to is the "header" tag. It wants you to find the unordered list, the h1 header and the paragraph at the top of the HTML document and place it in <header></header> tags.

This is unrelated to the first challenge, but the h2 and p elements in your section tags aren't indented.

Hope this makes sense.

1 Answer

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

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

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