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

Posted by egaratkaoroprat
egaratkaoroprat
16,630 Points

When to use <main>, <article>, <section>, etc?

Hi community

After reading a few articles and consulting the MDN reference about those mentioned tags, I am still confused when to use them. Can someone shed some light to this topic, so that I can understand the usage of them? If for example, I would create a personal portfolio webpage, would this be a proper way to use these tags?

<!DOCTYPE html>
<html>
  <head>
    <!-- head information -->
  </head
  <body>
    <header>
      <nav>
        <!-- navigation -->
      </nav
    </header>
    <main>
      <section id="about">
        <p>Hello I am....</p>
      </section>
      <section id="projects">
        <ul>
          <!-- projects listing -->
        </ul>
      </section>
      <!-- and so forth -->
    </main>
    <footer>
      <!-- footer -->
    </footer>
  </body>
</html>

If this example displays the correct usage, what is the correct way to style the document? Do I have to use a <div>-wrapper around them or can I directly style <main> and the <section>-id? This has been bugging me for a while now...

Thanks for any reply!

1 Answer

Matt Milburn
Matt Milburn
20,787 Points

Hello Egarat,

Your usage of these tags is correct! Its safe to think of tags like <header>, <nav>, <main>, <section> and <footer> as regular <div>s that have semantic meaning for computers to better understand the nature of the content.

egaratkaoroprat
egaratkaoroprat
16,630 Points

Thanks Matt.

So in the end I understood it correctly. :)