Usage of <section> instead of <div> in Dasmoto's Arts & Crafts project

Hello Codecademy community!

I am going through fullstack course and in HTML course, we are recommended to use <div> as last resort if everything fails to justify other uses to make the HTML semantically correct but as I was doing Dasmoto’s Arts & Crafts project, I realized that source code uses <div>s instead of <section>s how I used in mine. Could you please explain why <div> was preferred?

Codecademy source code:

<body data-new-gr-c-s-check-loaded="14.1067.0" data-gr-ext-installed="">

  <h1>Dasmoto's Arts &amp; Crafts</h1>

  <div class="item">
    <h2 id="brush">Brushes</h2>
    <img src="https://content.codecademy.com/courses/freelance-1/unit-2/hacksaw.jpeg">
    <h3>Hacksaw Brushes</h3>
    <p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes. <span class="price">Starting at $3.00 / brush.</span></p>
  </div>

  <div class="item">
    <h2 id="frame">Frames</h2>
    <img src="https://content.codecademy.com/courses/freelance-1/unit-2/frames.jpeg">
    <h3>Art Frames (assorted)</h3>
    <p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. <span class="price">Starting at $2.00 / frame.</span></p>
  </div>

  <div class="item">
    <h2 id="paint">Paint</h2>
    <img src="https://content.codecademy.com/courses/freelance-1/unit-2/finnish.jpeg">
    <h3>Clean Finnish Paint</h3>
    <p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork. <span class="price">Starting at $5.00 / tube.</span>
  </p></div>


<script type="text/javascript" src="https://external-production.codecademy.com/assets/relay.js"></script><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="https://external-production.codecademy.com/assets/jquery.expect.js?v1"></script></body>

Here is how I wrote mine

<body>
    <header>
        <h1>Dasmoto's Arts & Crafts</h1>
    </header>
    <main>
        <section class="brushes">
            <h2>Brushes</h2>
            <img src="resources\images\hacksaw.webp" alt="">
            <h3>Hacksaw Brushes</h3>
            <p>Made of the highest quality oak, Hacksaw brushes are known for their weight and abilitiy to hold paint in
                large amounts. Available in different sizes. <span>Starting at $3.00/brush.</span></p>
        </section>
        <section class="frames">
            <h2>Frames</h2>
            <img src="resources\images\frames.webp" alt="">
            <h3>Art Frames (assorted)</h3>
            <p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be
                sanded and painted according to your needs. <span>Starting at $2.00/frame.</span></p>
        </section>
        <section class="paint">
            <h2>Paint</h2>
            <img src="resources\images\finnish.jpeg" alt="">
            <h3>Clean Finnish Paint</h3>
            <p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.).
                Clean Finnish paint microbinds to canvas, increasing the fininsh and longevity of any artwork.<span> Starting at $5.00/tube.</span></p>
        </section>
    </main>

</body>

Thank you for your help!

Hi there,

The way you sectioned out your HTML is perfectly fine–and probably preferred. I would like to take a guess that <div>s were used just for usage sake rather than something you are to imitate. I wouldn’t be too worried about it!

Also, as a side note–To make <div> or <section> appear in your message, just place a \ before the first <.

1 Like

Thank you @kirativewd! I thought that what I have learnt was wrong altogether! :smile: Thanks for the info. I will remember your suggestion for the div and section :slight_smile: <div>

1 Like