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 Structuring Content Challenge

Michael Zito
PLUS
Michael Zito
Courses Plus Student 4,073 Points
Posted by Michael Zito
Michael Zito
Courses Plus Student 4,073 Points

structuring content challenge

I tried the tags aside, section, article, and nav. Not sure if supposed to include them or not, but feeling lost with this challenge.

index.html 
<!DOCTYPE html>
<html>
  <head>
    <link href="styles.css" rel="stylesheet">
    <title>My Portfolio</title>
  </head>
  <body>
    <aside>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Contact</a></li>            
    </ul>
    <h1>My Web Design &amp; Development Portfolio!</h1> 
    <p>A site featuring my latest work.</p>
    </aside>

    <h2>Welcome</h2> 
    <p>Fusce semper id ipsum sed scelerisque. Etiam nec elementum massa. Pellentesque tristique ex ac ipsum hendrerit, eget feugiat ante faucibus.</p>
    <ul>
      <li><a href="#">Recent project #1</a></li>
      <li><a href="#">Recent project #2</a></li>
      <li><a href="#">Recent project #3</a></li>     
    </ul>


    <p>&copy; 2017 My Portfolio</p>
    <p>Follow me on <a href="#">Twitter</a>, <a href="#">Instagram</a> and <a href="#">Dribbble</a></p>
  </body>
</html>

2 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

The terminology does take a bit of getting used to.

This little "semantic element summary" may help:

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

Thanks, Steven! Your "semantic element summary" above ^ will come in handy the next time I'm privileged to answer the question before you or someone else. G'Day DM:)

Nick Renteria
Nick Renteria
10,258 Points
Nick Renteria
Nick Renteria
10,258 Points

The type of element it wants for "introductory information" should be a header tag:

    <header>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>            
      </ul>
      <h1>My Web Design &amp; Development Portfolio!</h1> 
      <p>A site featuring my latest work.</p>
    </header>

The aside tag is typically used for information that isn't the "main" content (not the meat and potatoes, as they say) but is still somewhat important. Nav is for navigation, article is for an article that could potentially reappear on another page on the same site, footer is for info like copyright, metadata, maybe contact info, etc. I hope this helps!