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 Tevin Mugo
.a{fill-rule:evenodd;}techdegree
Tevin Mugo
Full Stack JavaScript Techdegree Student 8,649 Points

Finally, place the h2 and articles inside an element that represents the main content of the <body> of the page.

Finally, place the h2 and articles inside an element that represents the main content of the <body> of the page.?

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>
  <div>  
    <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>
    <footer>
      <p>&copy; 2017 My Blog</p>
    </footer>
 </div>
  </body>
</html>
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hi Tevin. Welcome to Treehouse.

Looking at the high number of questions you have posted for this one challenge, I would like to suggest maybe reviewing the videos again. Just getting the answers from the forum isn't the best way to retain the knowledge needed to progress further with the course. While the Community is an excellent place to come for help, I feel that a review of the videos first may benefit you much better. There are often times that I watch and rewatch videos numerous times until I finally got the concepts being taught.

Also, when posting your questions to the Community. Please include your code that you are trying, the error you are receiving and what exactly you are 'struggling' with. This way, other students can give you the best and most specific help to where you need it. Just posting and expecting an answer is not the way the Community is designed to work.

Rewatch the videos, take some notes, and then give the challenge another go. If you're still stuck, then post again, but with details as to why and where exactly you are stuck.

Thank-you and Keep Coding! :)

Jason ~Treehouse Moderator :dizzy:

Julie Dowler
Julie Dowler
7,851 Points
Julie Dowler
Julie Dowler
7,851 Points

I think you need to use the <main> tag.

12 Answers

Julie Dowler
Julie Dowler
7,851 Points
Julie Dowler
Julie Dowler
7,851 Points

Right after the end of your header ( right after your </header> tag), you have an <aside> tag which has no closing tag.

Simon walters
PLUS
Simon walters
Courses Plus Student 8,962 Points
Simon walters
Simon walters
Courses Plus Student 8,962 Points

Hi Tevin

You need to add the <main> element tags to your <h2> and <article> content. I have pasted an example and the answer to your question below. I hope this helps!

 <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>
Nadia Masiero
Nadia Masiero
3,468 Points
Nadia Masiero
Nadia Masiero
3,468 Points

Hi, I'm still having an issue with this, even when I have the same code. And then I get the ❗️Error : Bummer! Are you placing the 'h2' and articles inside an element that represents the main content of '<body>'?

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

<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>
      <h3>Follow Me on Social Media:</h3>


    <ul>
      <aside>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">Facebook</a></li>
      <li><a href="#">LinkedIn</a></li>     
        </aside>
    </ul>

    <footer>
      <p>&copy; 2017 My Blog</p>
    </footer>
  </body>
</html>
Terri Valentine
Terri Valentine
23,034 Points
Terri Valentine
Terri Valentine
23,034 Points

I'm having the same problem. What step/info am I missing?

Julie Dowler
Julie Dowler
7,851 Points
Julie Dowler
Julie Dowler
7,851 Points

Did you see that comment I wrote on Oct 19? Right after your </header> tag, you have an <aside> tag that has no closing tag. Try removing that.

Terri Valentine
Terri Valentine
23,034 Points

Even upon removing one/both <aside> </aside> tag(s), it says that I have failed either Task 1 or Task 2 depending on which tag I remove.

Julie Dowler
Julie Dowler
7,851 Points
Julie Dowler
Julie Dowler
7,851 Points

Those aren't the <aside> tags I'm talking about. Look higher. After the </header> tag.

Julie Dowler
Julie Dowler
7,851 Points
Julie Dowler
Julie Dowler
7,851 Points

You also need to do this:

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

Julie Dowler
Julie Dowler
7,851 Points
Julie Dowler
Julie Dowler
7,851 Points

Sorry I couldn't get it to look like code. Could someone please tell me why I can't get my post to look like code? I used the two backticks before and after.

Nadia Masiero
Nadia Masiero
3,468 Points
Nadia Masiero
Nadia Masiero
3,468 Points

Hii Julie! I believe you have to use three backticks! You can copy and paste this if you want: ```

Julie Dowler
Julie Dowler
7,851 Points
Julie Dowler
Julie Dowler
7,851 Points 
<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>
Julie Dowler
Julie Dowler
7,851 Points
Julie Dowler
Julie Dowler
7,851 Points

It keeps erasing my first line! The first line should say: <aside>

Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hi Julie Dowler

Your Markdown is close, but there needs to be line breaks. One separating the line before the opening ones and one separating the closing ones. Also, the backticks need to be on their own line. I have edited the above post of yours, so you should be able to click on "Edit" to see what I did. Note: Right after the opening backticks, you put the language, so there will be proper syntax highlighting.
Also, there is a Markdown Cheatsheet link you can click for "how-tos" just above the "Post" button. Or, for a really in-depth look at Markdown, you should check out Markdown Basics Course here on Treehouse.

Hope this helps. :)
:dizzy:

SHAHRUKH KHAN
SHAHRUKH KHAN
470 Points
SHAHRUKH KHAN
SHAHRUKH KHAN
470 Points

<!DOCTYPE html> <html> <head> <link href="styles.css" rel="stylesheet"> <title>My Blog</title> </head> <body> <header> <h1>My Web Design & 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>© 2017 My Blog</p> </footer> </body> </html>

Julie Dowler
Julie Dowler
7,851 Points
Julie Dowler
Julie Dowler
7,851 Points 
              <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>```