Do I use too much divs ?

Question

Hi folks !

Right now, I'm working on my HTML and CSS skills by reproducing free this website template https://www.freewebsitetemplates.com/preview/treepreservation/index.html I downloaded the code of the website, but before getting into it, I wanted to know what you thought of my HTML structure, and especially the number of divs I'm using...

For example, in the Top Programs and Recent blog posts sections, I couldn't see any other way to implement the design.

I also feel like I am completely misusing the h1, a and p tags

What are your thoughts ?

Thanks ;)

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>World Tree Preservation Website</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <!-- HEADER -->

    <header>
        <div class="wrapper">
            <a href="index.html"> <img src="images/logo.png" alt="logo"> </a>
            <nav>
                <ul id="nav-links">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Our Programs</a></li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- SAVE THE FUTURE -->

    <div id="save-the-future">
        <div class="wrapper">
            <p>as the saying goes <br/>
            you don't know what you've got <br/>
            'till it's gone</p>

            <p>plant a tree <br/>
            grow a tree <br/>
            save the future </p>
        </div>
    </div>

    <!-- MAIN CONTENT -->

    <section class="wrapper">
        <div id="gauche">
            <a href="#"><img src="images/help-out.jpg" alt="help out"></a>
            <p>This website template has been designed by Free Website Templates for you, for free. You can replace all this text with your own text. </p>
        </div>
        <div id="droite">
            <a href="#"><img src="images/what-we-do.jpg" alt="what we do"></a>
            <p>You can remove any link to our website from this website template, you're free to use this website template without linking back to us.</p>
        </div>
    </section>

    <!-- PROGRAMS AND BLOG POSTS, SECONDARY CONTENT -->

    <section class="wrapper">
        <div id="gauche-2">
            <a href="#">top programs</a>
            <div id="tree-planting">
                <a href="#">tree planting</a>
                <p>If you're having problem editing this website template.</p>
            </div>
            <div id="paper-recycling">
                <a href="#">paper recycling</a>
                <p>Then don't hesitate to ask for help on the.</p>              
            </div>
        </div>

        <div id="droite-2">
            <a href="#">recent blog posts</a>
            <div id="title-one">
                <img src="images/blog-post1.jpg" alt="blog post 1">
                <a href="#">blog post title one</a>
                <p>You're free to use this website template without linking back to us.If you're having problems editing this website template, then don't hesitate to ask for help on the Forums...</p>
            </div>

            <div id="title-two">
                <img src="images/blog-post2.jpg" alt="blog post 2">
                <a href="#">blog post title one</a>
                <p>You can do a lot with them. You can modify them. You can use them to design websites for clients, so long as you agree with the Terms of Use. You can even remove all our...</p>
            </div>
        </div>
    </section>

    <!-- PRE-FOOTER -->

    <div id="pre-footer">

        <div id="contact">
            <h1>24h customer service</h1>
            <ul>
                <li>512 943 1069<br>
                512 943 1068</li>
                <li>email@email.com</li>
                <li>1341 Oakmound Drive<br>
                Chicago, IL 60609 </li>
            </ul>
        </div>

        <div id="tweets">
            <h1>recent tweets</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fringilla elementum magna. </p>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
        </div>

        <div id="social-medias">
            <h1>get in touch with us</h1>
            <ul>
                <li><a href="#">Facebook</a></li>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Google +</a></li>
            </ul>
        </div>

    </div>

    <!-- FOOTER -->

    <footer>
        <nav>
            <ul id="nav-links">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Our Programs</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
        </nav>
        <p>&copy WORLD TREE PRESERVATION. ALL RIGHTS RESERVED</p>
    </footer>

</body>

</html>

Answer 1 · 2015-08-10T18:20:59Z

August 10, 2015 6:20pm

Honestly, it all depends on what you're doing. It looks ok, there are a lot of divs however if you're trying to have control over each section div works, you could use id if you wanted to or even class. It's up to you. And from what I can see you h1 and p all look ok, as long as you want to style them roughly the same in your css. See html works with the css, so if this works with the css and it looks good go with it. Later on as you learn play with changing it if you want, simplify it, mess it up, break it even. It's all up to you, how you want it to be and look. It takes practice and patience to see how you want to do it. As you go you'll find better ways of doing things and simpler options, so if it works now and you like the way it looks, go for it.

Welcome to the Treehouse Community

Looking to learn something new?

Jeremy Diallo

Jeremy Diallo

Do I use too much divs ?

1 Answer

Jamie Perlmutter

Jamie Perlmutter