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

geoffrey
geoffrey
28,736 Points
Posted by geoffrey
geoffrey
28,736 Points

Should I use <section> or <div> ?

Hello guys, I've been working on a little mobile project. And I have now a little doubt about the use of < section > and < div >, I don't know If I should use < div > instead of < section > in this case. Here is my code, what do you think, Is it still good to use section here ?

<div class="wrap"  data-enhanced=”false”>

    <section id="landing-page" class="" data-role="">

        <!-- loading page -->

    </section>

    <section id="main-screen-to-park" class="" data-role="page">

        <h1>select parking type</h1>

        <img class="meter_off" src="images/img_park_off.png" alt="meter off">
        <img class="disc_off" src="images/img_disc_off.png" alt="disc off">

         <div class="btn-group">

            <a href="" class="blueBtn" data-role="none" data-transition="flip">park here</a>
            <a href="#report-controller" class="redBtn" data-role="none" data-transition="flip">report controller</a>
        </div>

    </section>


    <section id="park-here-meter" class="" data-role="page">

        <img src="images/img_park_on.png" alt="parking meter on" data-role="none">

        <label for="time"><input type="text" name="time" id="time" placeholder="enter time" data-role="none"/></label>

        <div class="btn-group">
            <a  href="#park-here-notes" class="greenBtn" data-role="none" data-transition="flip">parking notes</a>
            <button type="submit" class="blueBtn" data-role="none">confirm</button>
        </div>

    </section>

    <section id="park-here-disc" class="" data-role="page">

        <img src="images/img_disc_on.png" alt="parking disc">

            <span><time>2:00</time></span> <!-- attribut datetime required otherwise not valid-->

        <div class="btn-group">
            <a href="#park-here-notes" class="greenBtn" data-role="none" data-transition="flip">parking notes</a>
            <button type="submit" class="blueBtn" data-role="none">confirm</button>
        </div>

    </section>

    <section id="park-here-notes" class="" data-role="page">

        <h1>notes</h1>
        <label for="notes"><textarea id="notes" name="notes" data-role="none">type your notes here...</textarea></label>

        <div class="btn-group">
            <button class="greenBtn" type="submit" data-role="none">save</button>
            <button class="redBtn" type="submit" data-role="none" >cancel</button>
        </div>

    </section>

    <section id="main-screen-parked" class="" data-role="page">

        <h1>Time remaining</h1>

        <span><time>00:14</time></span>

        <div class="btn-group">
            <button type="submit" class="greenBtn" data-role="none">go</button>
            <a href="#" class="blueBtn" data-role="none">+ extend stay</a>
            <a href="google.com" class="lightBlueBtn" data-role="none">dude, where is my car ?</a>
            <a href="#report-controller" class="redBtn" data-role="none" data-transition="flip">report controller</a>
        </div>

    </section>


    <section id="report-controller" class="" data-role="page">
        <nav>
            <span><a href="" data-role="none" data-transition="flip">back</a></span>
            <span><a href="" data-role="none" data-transition="flip">cancel</a></span>
        </nav>

        <img src="images/whistle.png" alt="red whistle report controller">

        <div class="thank-you">
            <h1>thank you </h1>
            <p>We thank you very much for reporting the controllers. All your fellow
            citizen will be noticed right away !</p>
        </div>

    </section>    

</div>
</body>


</html>

1 Answer

Cameron Bourke
Cameron Bourke
10,198 Points
Cameron Bourke
Cameron Bourke
10,198 Points

When it comes to semantics in html I always just check the html5 doctor. I've linked the part of the website that covers the section tag. But if you go to the home page you will see all html elements listed. Just a side note, if you dont know already, make sure you change the section tags display to block because by default it cannot be styled. Took me awhile to figure that out aha.

http://html5doctor.com/element-index/#section

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

Yes I googled a little bit about the section tag, but I was still unsure of the fact I use it rightly in this project. To me, in my project It's used in this context as HTML doctor says "A web site's home page could be split into sections for an introduction, news items, contact information." Except here, It's different section where I have each time an id such as #report-controller, #main-screen-parked and etc...

Not all the time easy to be sure to use the right tag.

Cameron Bourke
Cameron Bourke
10,198 Points
Cameron Bourke
Cameron Bourke
10,198 Points

It really just comes down to your personal preference of what you feel is more semantic and easier to maintain. Looking at your html, I personally would call the "select parking type, "notes" and "time remaining" sections. They are blocks of content that establish the layout of the page.