HTML HTML Basics Structuring Your Content Grouping Content Challenge

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

I do not understand this one. And I think i have mesed up my code trying to to it?

Help

Doug

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

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

2 Answers

joelearner
joelearner
36,504 Points

Hi Douglas,

It does appear that your code did get a little overloaded. Here is a version to look at to help you clean up any extra tags you don't need:

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

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

Then, for the last part of the challenge, you just need to insert a <main> tag and place it so the h2 and article tags are within it.

Cheers!

Thank you for your help..

Doug