HTML HTML Basics Structuring Your Content Grouping Content Challenge

Pedro Azedo
Pedro Azedo
433 Points

Exercise

I keep getting this error "Make sure you're placing the first set of h3 and p elements inside an element that describes self-contained pieces of content."

They're wrapped inside div, main and article... what else can I try?

index.html
<!DOCTYPE html>
<html>
  <head>
    <link href="styles.css" rel="stylesheet">
    <title>My Blog</title>
  </head>
  <body>
    <div>
      <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>   

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

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

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

    </main>

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

  </div>
  </body>
</html>

2 Answers

Steven Parker
Steven Parker
173,944 Points

You'll probably never want to wrap a single article in a section, or for that matter, a single section in an article. And you can count on not needing "div" here. It's a generic container only used when none of the semantic elements are more appropriate.

The descriptions of the semantic elements take a bit of getting used to. This little "semantic element summary" may help:

  • "a group of introductory content" :point_right: <header>
  • "a major section of navigation" :point_right: <nav>
  • "the main content of the <body> of the page" :point_right: <main>
  • "standalone sections of content" :point_right: <section>
  • "self-contained pieces of content" :point_right: <article>
  • "content that's indirectly related to the main content of the page" :point_right: <aside>
  • "information about the site, copyright data or related links" :point_right: <footer>
Pedro Azedo
Pedro Azedo
433 Points

I deleted the "section" and it worked. Thank you :)