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 HTML Basics Structuring Your Content Grouping Content Challenge

Posted by Sultan Sharipov
Sultan Sharipov
1,053 Points

Group each set of h3 and p elements using an element that describes self-contained pieces of content. ????

I could not understand.

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>   

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

    <footer>
      <p>&copy; 2017 My Blog</p>
    </footer>
  </body>
</html>
Nikos Papapetrou
Nikos Papapetrou
6,305 Points
Nikos Papapetrou
Nikos Papapetrou
6,305 Points

You have simple to use structural html tags like: 

<article></article>
<section></section>

If you have per say an article you put inside the article tags whatever it has relation with you article. Also you can group your article further in sections. See also: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure

4 Answers

Alana Warson
Alana Warson
5,296 Points
Alana Warson
Alana Warson
5,296 Points

This question deals with the challenge of grouping each of h3 and p elements inside a self-containing pieces of content. i put: <article> <h3> <p> and then after the second set of <h3> tag I put </article> and gives me an error stating "Make sure your placing the second set of 'h3' and 'p' elements inside an element that describes self-contained pieces of content.

Peter Vann
Peter Vann
36,425 Points
Peter Vann
Peter Vann
36,425 Points

Hi Alana!

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

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

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

Sometimes the wording of instructions makes it not perfectly clear what you need to do to pass the tasks.

Sometimes the lightbulb doesn't go on until you can just see the solution, and you're like, "Oh, that's what they meant!?!"

Happens to me all the time!?!

I hope that helps.

Stay safe and happy coding!

Paul HILL
Paul HILL
1,895 Points

This worked for me too! Thanks man.

Alana Warson
Alana Warson
5,296 Points
Alana Warson
Alana Warson
5,296 Points

I would have never gotten through this without your help. The videos are so fast I'm starting and stopping all the time. Thanks again!

Alana

Paul HILL
Paul HILL
1,895 Points

Same here. Constantly reviewing the videos...

Peter Vann
Peter Vann
36,425 Points
Peter Vann
Peter Vann
36,425 Points

No worries...

Have a great rest of the weekend!!!

(Hit me up anytime, if you need more help.)

:)