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 Louis Espinoza
Louis Espinoza
470 Points

Quick question about nesting certain elements.

Can we add a section element inside of a main element? I am not sure if there is some sort of standard on how elements are nested with other elements. Would that be okay?

<!DOCTYPE html>
<html>
  <head>  
    <meta charset='utf-8'>
    <title>Louis Espinoza<title>
  </head>
  <body>
    <header>

    </header>
    <main>
      <section>

      </section>
    </main>
    <footer>

    </footer>
  </body>
</html>

1 Answer

Alex Koumparos
seal-mask
.a{fill-rule:evenodd;}techdegree
Alex Koumparos
Python Development Techdegree Student 36,887 Points
Alex Koumparos
.a{fill-rule:evenodd;}techdegree
Alex Koumparos
Python Development Techdegree Student 36,887 Points

Hi Louis,

The short answer is 'yes', you can nest <section> inside of <main>, and the way you have nested <section> inside of <main> in your example would be valid.

The <main> tag represents the "dominant content of the <body>" and any more specific semantic elements, such as <section> or <article> would be nested inside of <main>. As the "<section> element represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an HTML document.", it makes sense that in most cases when you are using <section> it would be inside <main>.

One word of caution with <main>, you mentioned nesting inside "a main element" rather than nesting inside "the main element". Remember that "A document must not have more than one <main> element that does not have the hidden attribute specified".

Cheers

Alex