The `<div>` tag

Hi! I’m quite new to codecademy (16th day here. :stuck_out_tongue:) and coding in general. But as I start doing more of my own projects I was wondering something.

When I look at websites with google dev tools I see an ocean of <div> tags. Within codecademy exercises I’ve only ever used the <div> tag on select occasions, but mostly I go for <header>,<nav>,… and more specific tags to divide my coding.

So I’m really confused on when to best use <div> in general or if there’s a “best practice” on how to include it in my code, since it seems like something essential if I look at websites “in the wild”.

For example the Cheat Sheet exercise seems pretty straight forward, and the sample solution looks kind of like what I came up with. But compared to when I did Dasmoto’s Arts and Crafts the solution had a LOT of <div> tags.

Should I include them in future projects? And if yes, how’s the best way to do so?

Thanks for the help and happy coding!

A lot of past code used DIV with descriptive classes or an ID to help identify its purpose. (Plus an experienced programmer may have habits that are hard to break.)

<div id="header">
    <div id="nav"></div>
</div>

But HTML5 included more ‘semantic’ tags such as nav, header, footer, main, section, article, aside with the intention of making code more readable and plus easier for assisted technologies (screen readers) to recognize parts of a website.

So semantic HTML is the better way to go.

Now, use DIV when it’s really a ‘division’ of a larger parent container. Of course, you can also use a section element as well. It’s up to you.

In addition to those helpful semantic tags, also be skillful in how you name their classes and IDs so that it helps you later on understand how you organized your code. It tells you what’s what without much head-scratching (:astonished: “What the heck was I trying to write here?”)

1 Like

So basically, I’m not making my life harder by using the semantic tags? And if I want to divide something into bigger chunks I can use a div with a class or ID that makes sense even if someone else reads it? So, in theory, if I want to re-structure a site that is pre-HTML5 (or made by someone with an old habit), I can throw all the divs out and replace them with semantic tags to make everyone’s life easier? The more I learn, the more questions I have,… :thinking:

Take a look at this code for some examples:

<header>
  <img id="logo" src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="">  
  <nav id="menu-cont">
    <ul id="menu">
      <li><a href="#top-section">Mission</a></li>
      <li><a href="#mid-section">Featured Tea</a></li>
      <li><a href="#bottom-section">Locations</a></li>
    </ul>
  </nav>
</header>

<!-- TOP SECTION -->
<section id="top-section">
  <div class="heading-band">
    <h2>Our Mission</h2>
    <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae debitis!</h4>
  </div>
</section>


<!-- MIDDLE SECTION -->
<section id="mid-section">
  <div class="heading-band">
    <h2>Tea of the Month</h2>
    <h4>What's Sleeping at The Tea Cozy?</h4>
  </div>
  <div id="images-cont">
    <figure>
      <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-berryblitz.jpg" alt="Berry Blitz" class="mid-img">
      <figcaption>Full Berry Blitz Tea</figcaption>
    </figure>
    <figure>
      <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-spiced-rum.jpg" alt="Spiced Rum" class="mid-img">
      <figcaption>Spiced Rum Tea</figcaption>
    </figure>
    <figure>
      <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-donut.jpg" alt="Donut" class="mid-img">
      <figcaption>Seasonal Donuts</figcaption>
    </figure>
    <figure>
      <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-myrtle-ave.jpg" alt="Myrtle Avenue Tea" class="mid-img">
      <figcaption>Myrtle Ave Tea</figcaption>
    </figure>
    <figure>
      <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-bedford-bizarre.jpg" alt="Bedford Bizarre" class="mid-img">
      <figcaption>Bedford Bizarre Tea</figcaption>
    </figure>
  </div>
</section>

That last section I divided it up into 2 DIVs but it could have been 2 SECTIONs. I thought it made more sense and was more readable to use the DIVs.

1 Like