Dasmoto Project - Choice to use <Div> in the Solution

Projects Skill Path Projects
1

Hi everyone, this is my first time posting so I hope I have included this in the correct section and formatted this post acceptably!

I have just completed the Dasmoto Arts and Crafts project in Build a Website with HTML and CSS. I did not use div tags to structure my HTML, whereas the solutions did.

My questions are:

  • Why use div tags if class (or id) attributes can be written inside the h2 elements instead?

  • Is this for HTML readability? Or is it to develop these habits early, before code becomes longer and more complicated?

  • Unlike the Solutions, I styled the font size in CSS using the h2 selector, rather than defining the class ‘item’ as the solutions have . Is there a benefit to using the class selector over the h2 selector, with the greater specificity?

Thanks in advance for your advice!

The Codecademy Solution HTML

<!-- Brushes Section -- >

  <div class="item">
    <h2 id="brush">Brushes</h2>
    <img src="https://s3.amazonaws.com/codecademy-content/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>

  <!-- Frames Section -- >

  <div class="item">
    <h2 id="frame">Frames</h2>
    <img src="https://s3.amazonaws.com/codecademy-content/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>

My HTML

<h2 class="brushes">Brushes</h2>
    <img src="./resources/brushes.jpg" alt="a pile of clean paint brushes">
    <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>Starting at $3.00 / brush.</span></p>

  <h2 class="frames">Frames</h2>
    <img src="./resources/frames.jpg" alt="Empty, colourful art frames">
    <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>
2

Hello @thea.alethea, welcome to the forums! Using <div> is designed so you can group lots of elements together, and give them the same styling. Say I wanted half of this code to appear red:

<h2>Red</h2>
<p>Red</p>
<p>Not red</p>

I could tyle each tag, or I could enclose them in a <div>:

<div class="red">
<h2>Red</h2>
<p>Red</p>
</div>
<p>Not red</p>

Now, if I style .red{color: red}, all of the text in the div will appear red. If the code was larger, then the savings in time would be even greater. <div>s are also useful when you are using CSS grid.

2 Likes
3

Hello @thea.alethea. I was also wondering why they use the

in the solution.
I personally used the tag because I thought it was semantic html.

@codeneutrino, what is the best habit? Using when it is possible or using a

tag with a semantic class like
?
1 Like
4

Oops some of my words disappeared…

Hello @thea.alethea. I was also wondering why they use the div in the solution.
I personally used the section tag because I thought it was semantic html.

@codeneutrino, what is the best habit? Using section when it is possible or using a class
tag with a semantic class like div class=item?

5

Sometimes <section> will fit. Other times it won’t-that is up to you. You can also have classes/ids within section tags: <section class="someClass">. Here is a good article explaining it.

1 Like
6

Thanks for the article! :+1:

1 Like
7

Thank you so much for your explanation @codeneutrino!

1 Like