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 Semantic HTML: <header>, <footer> and <section>

Posted by Victor Mercier
Victor Mercier
Courses Plus Student 565 Points

Don’t really understand the section tag

Why isn’t the top Vr ressources not nested in a section tag?

3 Answers

Steven Parker
Steven Parker
230,230 Points
Steven Parker
Steven Parker
230,230 Points

You're getting a little ahead of things. Guil has a more specific container in mind to use with that part of the code, and you will find out about it in the next video. Just hold on to that question as you move on.

Johnny Garces
PLUS
Johnny Garces
Courses Plus Student 8,551 Points
Johnny Garces
Johnny Garces
Courses Plus Student 8,551 Points

Hi Victor Mercier- section elements are ambiguously defined and at times it's up for our judgment to know when they should be used.

Here are some guidelines to help you decide when to use section elements. Remember that it's best practice to make your HTML meaningful and easy to understand for users who use assistive technologies (i.e. screen-readers) and also for search-engines that try to make sense of your website.

A <div> and a <section> element seem to serve the same purpose- they both "contain" sections of content. However there's more to it than just "structure" and "look." The difference is that the <div> element holds NO semantic meaning- so if you use a screen-reader (i.e. NVDA, JAWS, or VoiceOver), then the device will ignore any <div> elements as it doesn't know how to interpret them. However if the screen-reader sees an element like <section> then the screen-reader will essentially "group" the related section elements together and help the user know what that content is about.

so... here are the guidelines:

1) Section elements group thematically related content 2) Section elements can also group certain sections within a document as Guil did in this video. 3) Section elements can group a bunch of articles, and articles can also group sections inside of them.

Phew... a mouthful... let's look at an example website that illustrates <section> elements better.

Say I'm making a blog for surfers, and I want to write articles on the world of surfing. I can write a bunch of <articles> (i.e. blog posts), but then I need to ask myself if there's a way to organize those articles by theme, or topic.

For example, I can write articles on "surfer technique" and on "picking the right surf board" and on "community of surfers" but then I need a way to organize them by theme.

So I can do this: 

<body>
<header>
            <nav>
                <ul>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">About us</a>
                    </li>
                    <li>
                        <a href="#">Our service</a>
                    </li>
                    <li>
                        <a href="#">Contact us</a>
                    </li>
                </ul>
            </nav>
            <main>
                <h1>Surfer News</h1>
                <section role="contentinfo" aria-label="Content on how to pick surf boards">
                    <h2>Articles on boards</h2>
                    <article>
                        <h3>How to pick your first board</h3>
                        <div>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quidem, libero laudantium sint fugit id culpa a necessitatibus debitis commodi delectus laboriosam veniam harum. Voluptatum voluptates obcaecati magnam quasi nobis.
                            </p>
                        </div>
                    </article>
                    <article>
                        <h3>Are you a longboarder or a surfer?</h3>
                        <div>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quidem, libero laudantium sint fugit id culpa a necessitatibus debitis commodi delectus laboriosam veniam harum. Voluptatum voluptates obcaecati magnam quasi nobis.
                            </p>
                        </div>
                    </article>
                </section>
                <section role="contentinfo" aria-label="Content on how to surf correctly">
                    <h2>Articles on Technique</h2>
                    <article>
                        <h3>How to mount your board</h3>
                        <div>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quidem, libero laudantium sint fugit id culpa a necessitatibus debitis commodi delectus laboriosam veniam harum. Voluptatum voluptates obcaecati magnam quasi nobis.
                            </p>
                        </div>
                    </article>
                    <article>
                        <h3>How to not wipe out</h3>
                        <div>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quidem, libero laudantium sint fugit id culpa a necessitatibus debitis commodi delectus laboriosam veniam harum. Voluptatum voluptates obcaecati magnam quasi nobis.
                            </p>
                        </div>
                    </article>
                    <article>
                        <h3>Are you ready for pipeline?</h3>
                        <div>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quidem, libero laudantium sint fugit id culpa a necessitatibus debitis commodi delectus laboriosam veniam harum. Voluptatum voluptates obcaecati magnam quasi nobis.
                            </p>
                        </div>
                    </article>
                </section>
                <aside>
                    <h2>Additional articles</h2>
                    <ul>
                        <li>
                            <a href="#">surfer news</a>
                        </li>
                        <li>
                            <a href="#">competitions near you</a>
                        </li>
                        <li>
                            <a href="#">surfer community worldwide</a>
                        </li>
                    </ul>
                </aside>
            </main>
        </header>
</body>

play around with this code and if you use a Mac, try to use voice-over to see section in action!

vamosrope14
vamosrope14
14,932 Points

Johnny Garces Why was the header tag at the bottom of the HTML document. Shouldn't you have wrapped it around the navigation links? Why would all of this content be under the header tag?

boi
boi
14,241 Points
boi
boi
14,241 Points

Thanks for the detailed explanation. Your comment at the end gave me an idea, which is to test the websites I create with accessibility tools in this case voice-over.

Johnny Garces
PLUS
Johnny Garces
Courses Plus Student 8,551 Points
Johnny Garces
Johnny Garces
Courses Plus Student 8,551 Points

yikes- that was my bad! good eye :) the header should have wrapped the nav element only