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

Muhamad Asymawi Ismail
Muhamad Asymawi Ismail
823 Points
Posted by Muhamad Asymawi Ismail
Muhamad Asymawi Ismail
823 Points

i'm still not understand about how to use <section></section>,<nav></nav>, and <aside></aside>

i'm still not understand about how to use <section></section>,<nav></nav>, and <aside></aside>

index.html 
<!DOCTYPE html>
<html>
  <head>
    <link href="styles.css" rel="stylesheet">
    <title>My Portfolio</title>
  </head>

  <body>

    <nav>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>            
      </ul>
    </nav>

    <section>
      <h1>My Web Design &amp; Development Portfolio!</h1> 
      <p>A site featuring my latest work.</p>
    </section>

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

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

    <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

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Hi Muhamad,

I wanted to expand on some of Matthew's comments about the reasoning behind some of those tags. For me it really helps you in being more semantically specific about your content. For the most part I don't really see any benefits for SEO however these tags can have a huge accessibility benefit for accessible technologies (like screenreaders).

Anything within an aside should be considered non-essential to the page, it's secondary or sidebar content. Pull quotes for example are great for this. Like Matthew outlined, you could probably benefit by adding a header here, but you might also consider adding a main which was a tag you didn't actually mention within your question. The <main> tag tells the browser where the main content of the page is. There's also a footer tag you might consider. Using an aside didn't really seem to be the best use of the tag, so I removed it from my suggestion.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link href="styles.css" rel="stylesheet">
  <title>My Portfolio</title>
</head>
<body>
  <header>
    <nav class="primary-nav">
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>            
      </ul>
    </nav>
    <h1>My Web Design &amp; Development Portfolio!</h1> 
    <p>A site featuring my latest work.</p>
  </header>

  <main role="main">
    <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>
    <nav class="project-nav">
      <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>
    </nav>
  </main>

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

They are basically ways to group content for seo and they make it easy to target content for styling purposes. I believe in your code you are missing the <header> tag from the first part of the challenge. Try taking it from here!

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