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 John Shockey
John Shockey
45,061 Points

Grouping elements in self-contained content

Problem: I can't seem to find the right answer to this. I am sure it is very simple.

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

Error: Make sure you're placing the first set of h3 and p elements inside an element that describes self-contained pieces of content.

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>   

    <main>

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

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

    </main>

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

7 Answers

John Shockey
John Shockey
45,061 Points

Got it now! Thanks.

Alex Uvere
Alex Uvere
2,235 Points

I am looking at the video and I still don't understand. What's missing.

Ary de Oliveira
Ary de Oliveira
28,298 Points
Ary de Oliveira
Ary de Oliveira
28,298 Points

Challenge Task 1 of 3

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

Well done! You're doing great! Ary

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


    <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>
Phillip Ndemera
Phillip Ndemera
7,302 Points

Did this it didn't work

Holly Cheng
Holly Cheng
4,661 Points

Thank you! It worked!

Abinet Kenore
Abinet Kenore
10,082 Points
Abinet Kenore
Abinet Kenore
10,082 Points

<h2>The Main Articles</h2>
<article> <!-- start here --> <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> <!-- End here> <h3>Follow Me on Social Media:</h3>

Mario Camara
Mario Camara
4,076 Points
Mario Camara
Mario Camara
4,076 Points

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

Christopher Youssef
seal-mask
.a{fill-rule:evenodd;}techdegree
Christopher Youssef
Front End Web Development Techdegree Student 1,677 Points
Christopher Youssef
.a{fill-rule:evenodd;}techdegree
Christopher Youssef
Front End Web Development Techdegree Student 1,677 Points

I think its the choice of words used in these questions that throw me off 'self contained pieces of content' could also be a section.

hugo valois
hugo valois
733 Points
hugo valois
hugo valois
733 Points

<article><h3>My Favorite HTML Courses</h3> </article> <article> <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> </article>
<article><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>   

<article><h3>Follow Me on Social Media:</h3></article>

LIKE THIS HAVE TO DO <ARTICLE> FOR EACH ELEMENT OF THE H3 N P

William Coshburn
William Coshburn
6,125 Points
William Coshburn
William Coshburn
6,125 Points

I had the same exact problem. Glad to see I wasn't the only one :)