HTML HTML Basics Structuring Your Content Grouping Content Challenge

Emily Strobl
Emily Strobl
5,243 Points

Bummer: Make sure you're placing the second set of `h3` and `p` elements inside an element that describes self-contained

I keep getting the same error message no matter what I do. What am I doing wrong

index.html
<!DOCTYPE html>
<html>
  <head>
    <link href="styles.css" rel="stylesheet">
    <title>My Blog</title>
  </head>
  <body>
    <header>
      <h1>My Web Design &amp; Development Blog!</h1> 
      <nav>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Articles</a></li>
          <li><a href="#">Recent Work</a></li>            
        </ul>
      </nav>
    </header>

    <h2>The Main Articles</h2>   

    <article>
      <h3>My Favorite HTML Courses</h3> 
      <p>Fusce semper id ipsum sed scelerisque. Etiam nec elementum massa. Pellentesque tristique ex ac ipsum hendrerit, eget <a href="#">feugiat ante faucibus</a>.</p>

      <h3>10 Handy CSS Features</h3> 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et <a href="#">ultrices posuere</a>.</p>    

      <h3>Follow Me on Social Media:</h3>
      <ul>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">LinkedIn</a></li>     
      </ul>
    </article>

    <footer>
      <p>&copy; 2017 My Blog</p>
    </footer>
  </body>
</html>

1 Answer

Peter Vann
MOD
Peter Vann
Treehouse Moderator 31,439 Points

Hi Emily!

Mainly they want you to group the two h3/p parings in article tags and the social media links in an aside tag, and of course, all that should be inside the main tag, including the h2 tag.

This passes all three tasks:

<!DOCTYPE html>
<html>
  <head>
    <link href="styles.css" rel="stylesheet">
    <title>My Blog</title>
  </head>
  <body>
    <header>
      <h1>My Web Design &amp; Development Blog!</h1> 
      <nav>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Articles</a></li>
          <li><a href="#">Recent Work</a></li>            
        </ul>
      </nav>
    </header>

    <main>
      <h2>The Main Articles</h2>   

      <article>
        <h3>My Favorite HTML Courses</h3> 
        <p>Fusce semper id ipsum sed scelerisque. Etiam nec elementum massa. Pellentesque tristique ex ac ipsum hendrerit, eget <a href="#">feugiat ante faucibus</a>.</p>
      </article>
      <article>
        <h3>10 Handy CSS Features</h3> 
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et <a href="#">ultrices posuere</a>.</p>    
      </article>
      <aside>
        <h3>Follow Me on Social Media:</h3>
        <ul>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">Facebook</a></li>
          <li><a href="#">LinkedIn</a></li>     
        </ul>
      </aside>
    </main>

    <footer>
      <p>&copy; 2017 My Blog</p>
    </footer>
  </body>
</html>

Sometimes the instructions of the challenge are not always worded optimally and so sometimes picturing exactly what they are wanting you to do can be difficult. Sometimes I have to Google someone else's challenge solution before I even understand the instructions!?! LOL

I hope that helps.

Stay safe and happy coding!