When to use <section> vs <div>? HELP! :)

Question

Still new to HTML/CSS. Can't figure out when I should be using <div> or <section>.

Let's say I am building a biography page. At the top there will be a Heading with a nav. The nav will link to different anchors on the same page.

The content of the page would be an Overview, followed by Early Life, Career, Personal Life, etc. Each one of these topics would be linked to the Navigation and would have a description or timeline beneath it(again, all in one page).

Should these topics be separated using <div> or <section>? What if I wanted to place a picture within the topics? What if I wanted to give each topic it's own separate page?

Answer 1 · 2016-05-27T05:13:12Z

May 27, 2016 5:13am

"The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline."

This is taken directly from the w3c documentation here: https://www.w3.org/TR/html5/sections.html

Divs have no meaning in and of themselves and generally are only used for styling purposes as indicated above. We use sections to give our document meaning for screen-readers and search engines.

Hope this helps!

Answer 2 · 2016-05-27T05:24:30Z

May 27, 2016 5:24am

Section is semantic (and newer). Div can be used similarly but doesn't have the implicit meaning (see Jennifer Nordell's explanation). Some courses in treehouse use sections and some stick with divs for sections. There are also a couple other tags that are similar (<main>, <article>, <aside>, <footer>, <header>, or <nav>). Section is a large scale idea of what content on the page is. Div can be used for smaller things, such as a container for presentation, or where there is no semantic idea to be communicated. You can always look at these elements at mozilla's developer network. But having your HTML be semantic is ideal. (to be honest, i had the same question, and a lot of older code does make things murkier)

Answer 3 · 2016-05-27T05:34:19Z

May 27, 2016 5:34am

Thank you both for your answers. In my example above, would it be ideal to use the <section> tag for each topic? Or should I separating each topic using the <div> tag?

For further discussion purposes only, what if I were to create 4 equal sized boxes for each of the topics, with a brief description in each box? Would I then use the <div> tag for each box and the <section> tag for the text, or do leave out the <section> tag and just continue with the descriptions by using a <p> tag within each div?

I feel like I'm wasting too much time with this issue.. but I have to know, lol.

Answer 4 · 2016-05-27T05:52:01Z

May 27, 2016 5:52am

Thank you both, again! I think I got it now. I've seen divs in sections and vice versa, but was still confused because where Guil used div, Nick used section.

As you stated, Simon, I've seen many people just use <div> (ie Jennifer Nordell and your Robin Williams Tribute, really cool by the way). I think I've also ready somewhere that <section> is better for search engine optimization?

Anyway, cheers guys! Really appreciate all the help.

Answer 5 · 2016-05-27T05:54:30Z

May 27, 2016 5:54am

In case anyone in the future has trouble with this, I found a link with another discussion underneath.

http://www.impressivewebs.com/html5-section/

Answer 6 · 2016-09-21T22:53:15Z

September 21, 2016 10:53pm

Hi All

I was about to post the exact same question until I come across this great post which was very insightful but I have some questions of my own about this topic and which are based on my code content.

Here is my code:

<!doctype html>
<html class="no-js" lang="">

<head>

   <!--This HTML file started out as a copy of the html5 boilerplate-->
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title></title>

    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>

    <!--START OF HEADER SECTION-->
    <header>

        <!--LOGO PLACEMENT-->
        <a href="index.html">
            <img src="img/logo.png" alt="logo">
        </a>
        <!--END OF LOGO PLACEMENT-->

        <!--NAVIGATION LINKS-->
        <nav>
            <ul>
                <li><a href="work.html">WORK</a></li>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="contact.html">CONTACT</a></li>
                <li><a href="">DOWNLOAD RESUME</a></li>
            </ul>
        </nav>
        <!--END OF NAVIGATION LINKS-->

    </header>
    <!--END OF HEADER SECTION-->


    <!--START OF MAIN-->
    <main>

       <!--START OF THE TOP BANNER SECTION-->
        <section id="banner-top">
           <hr>
            <h1 title="Tyler's Tickets"><span class="small-title">Website - UX - Branding</span>Tyler's Tickets</h1>
        </section>
        <!--END OF THE TOP BANNER SECTION-->

        <!--START OF PROJECT LOGO-->
        <div id="project-logo">
            <img src="img/tt-logo.png" alt="tyler's tickets">
        </div>
        <!--END OF PROJECT LOGO-->

        <!--START OF PROJECT DESCRIPTION-->
        <section id="project-description">
            <h2 title="Project Description">Project Description</h2>
            <p>This was my entry for a client brief from the outsourcing website 99designs.   The client wanted a brand makeover for his ticket ecommerce website which was starting to look very outdated.  When I was putting my ideas togther for re-design, I took the green from the orginal design but decided to soften it to give it a more softer, modern and friendly feel.</p>
        </section>
        <!--END OF PROJECT DESCRIPTION-->

        <!--START OF PROJECT SHOWCASE-->
        <section id="project-showcase">
            <img src="img/tt-homepage.png" alt="tyler's tickets homepage">
            <img src="img/tt-ticket-dates-page.png" alt="tyler's tickets dates ordering page">
        </section>
        <!--END OF PROJECT SHOWCASE-->

        <!--START OF PORTFOLIO NAVIGATION-->
        <div id="portfolio-navigation">
            <ul>

                <li class="prev">
                    <a href="/work/jetpack.html">
                        <span class="prev-next-headings">Previous Project</span>
                        <span class="project-title">Jetpack</span>
                    </a>
                </li>

                <li class="next">
                    <a href="/work/amelia's-adventures.html">
                        <span class="prev-next-headings">Next Project</span>
                        <span class="project-title">Amelia's Adventures</span>
                    </a>
                </li>

            </ul>
        </div>
        <!--END OF PORTFOLIO NAVIGATION-->        

        <!--START OF CONTACT SECTION-->
        <section id="contact">
            <hr>
            <h2 title="Get in Touch"><span class="small">Go Ahead</span>Get In Touch</h2>
            <p>I'm currently seeking a full time position for a digital design agency, if you feel I would be a good fit for your team, I would love to hear from you</p>
            <a href="mailto:deanconway007@gmail.com" title="Contact" class="btn btn-lg btn-primary">Contact Me</a>
        </section>
        <!--END OF CONTACT SECTION-->

    </main>
    <!--END OF MAIN-->

    <!--START OF FOOTER-->
    <footer>
        <a href="http://www.facebook.com" target="_blank">Facebook<i class="fa fa-facebook"></i></a>
        <a href="http://www.twitter.com" target="_blank">Twitter<i class="fa fa-twitter"></i></a>
        <a href="#">Download CV<i class="fa fa-resume"></i></a>
        <a href="https://www.behance.net" target="_blank">Behance<i class="fa fa-behance"></i></a> 
        <a href="https://www.linkedin.com" target="_blank">LinkedIn<i class="fa fa-linkedin"></i></a>
        <p>&copy; 2016 Dean Conway. All rights reserved.</p>
    </footer>
    <!--END OF FOOTER-->

</body>

</html>

Preface: *The code I have posted is based on a blueprint I will use to structure all my interior project pages, when someone clicks on one of my portfolio thumbnail images.

Here are questions about my posted code:

Should the logo and navigation always be wrapped inside of a <header> tag?
Based on my example code Have I used the section and div tags appropriately? My thinking behind using the div tag where I have done is that I did not consider the logo part of the page outline, it's really just a presentation thing, similarly I don't consider the navigation at the bottom part of the page outline either, it's really just a UX pattern I am fond of to make it easier to move between the projects.
Slightly off top when I ask this, but still don't know when to hook my sections and divs with an id or a class, does it matter much which I use? As you can see I have used an id in all cases here, but would I have been better off using a class?
On the topic of adding unique hooks, do I need to add a unique hook to my <main> and <footer> tags?

Thanks for reading

Dean

Answer 7 · 2017-08-22T01:52:19Z

August 22, 2017 1:52am

I had a similar question - I wasn't sure what the difference was between <section> and <main>. One Treehouse instructor used <section> while another used <main> for what seemed like the same type of content. I think the difference is this:

<section> is used for content that fits into a category which ought to be defined by a heading of that section. For example, if you had a page about soil in your gardening website, and on the page there was a section about nitrogen-phosphorus ratios, you would put that content into a "section", and give it a heading like this: <h1>Nitrogen-Phosphorus Ratios</h1>. (You wouldn't want to use <div> because the <section> and <h> tags give the content semantic value - like telling a browser, "This stuff means something, and if someone is searching for "nitrogen-phosphorus" information, you might want to show them this.") (Divs are more for styling purposes.)

Content in <main> tags should pertain to the main message of the page. Using the example above, <main> might be used if the content was all about soil.

Welcome to the Treehouse Community

Looking to learn something new?

J V

J V

When to use <section> vs <div>? HELP! :)

7 Answers

Jennifer Nordell

Jennifer Nordell

Simon Coates

Simon Coates

J V

J V

Jennifer Nordell

Jennifer Nordell

Simon Coates

Simon Coates

J V

J V

Simon Coates

Simon Coates

J V

J V

Dean Conway

Dean Conway

Audra Ogilvy

Audra Ogilvy