HTML HTML Basics Structuring Your Content Semantic HTML: <header>, <footer> and <section>

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
173,958 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.

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!

Amandeep Pasricha
Amandeep Pasricha
14,928 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?

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