Very quick question about the <div> element

1

Hi, quick question about <div>:
Is there a good reason why one should use so many <div> elements so often as it seems unnecessary and makes the code look confusing?

Using this w3schools page as an example (http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_img_thumbnail2&stacked=h), why for instance, do they nest the image within <div class="thumbnail"> instead of just giving the image class="thumbnail"?
Also for the caption, they nest it within <div class="caption"> instead of just writing it as <p class="caption">TEXT</p>

I’m sure there’s a good reason for it but I have no clue as completely new to programming.

Many thanks,Michael

2

Some of the ways w3schools does things are not the best, so don’t try to model them.
There are that many divs for the purpose of nesting. The reason they have the thumbnail in a separate class, is because the div is a container for an image, caption, and link which are nested in it:

<div class="thumbnail">

  <!-- This is a nested link. Nested inside this link is the image and caption -->
  <a href="/w3images/lights.jpg" target="_blank">
    <img src="/w3images/lights.jpg" alt="Pulpit Rock" style="width:100%">
    <div class="caption">
      <p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
    </div>
  </a>

</div>

It should be obvious that there needs needs to be two elements for the thumbnail - an image and a caption. w3schools does it like this:

<img src="/w3images/nature.jpg" alt="Moustiers Sainte Marie" style="width:100%">
<div class="caption">
  <p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
</div>

I think it would be fine and possibly better to do it like this. It is a matter of personal style:

<img src="/w3images/lights.jpg" alt="Pulpit Rock" style="width:100%">
<p class="caption">Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>

Both of these items are nested in the a tag, because this lets the whole thumbnail be a link. With it setup like this, when you click either the image or the caption, you are clicking the link because it is nested inside the link:

<a href="/w3images/lights.jpg" target="_blank">
  <img src="/w3images/lights.jpg" alt="Pulpit Rock" style="width:100%">
  <p class="caption">Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
</a>

I hope you understand so far that these two elements need to be nested inside the <a> tag. Now, why do we nest all of this in the div with class thumbnail? Because the Bootstrap .thumbnail class adds a nice little border and padding around the elements. We want the Boostrap .caption class to be nested inside the thumbnail class (the documentation tells us to do this too). If we applied the thumbnail class to the image, the caption would not be with the image but outside of it.

So to summarize, we need the image and caption nested in a link, and we need that nested in the .thumbnail to stylize the whole element. So w3schools has something like this.

<div class="thumbnail">

  <a href="/w3images/lights.jpg" target="_blank">
    <img src="/w3images/lights.jpg" alt="Pulpit Rock" style="width:100%">
    <div class="caption">
      <p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
    </div>
  </a>

</div>

We already said we could simplify the caption with this:

<p class="caption">Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>

Since the image and caption are nested in the image, we can simplify things by adding .thumbnail to the link tag:

<a href="/w3images/lights.jpg" target="_blank" class="thumbnail">
  <img src="/w3images/lights.jpg" alt="Pulpit Rock" style="width:100%">
  <p class="caption">Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
</a>

This will do the exact same thing. Is it more concise or easier to understand? Maybe, maybe not. w3schools thinks it is easier for beginners to understand with all the nested divs. I personally prefer it the way I did it above. It is a matter of style, and since it is your work, it is up to you to decide.

One more thing. If you take anything from what I say, take this. The purpose of nesting elements inside of a div instead of applying classes to themselves, is if you want to stylize a container with several elements inside. To demonstrate this lets look at the caption again.

<div class="caption">
  <p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
</div>

Since there is only one element, we can easily do it like this:

<p class="caption">Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>

However, if we wanted to have several elements in the caption, we would have to have the div, because we are stylizing a container with several elements in it:

<div class="caption">
  <h1>Title</h1>
  <p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
</div>

I hope this makes sense to you. To understand it the best, try playing around with thumbnails! To demonstrate everything, I copied my code above and put it on codepen:
Link to Example

Here is my full example code, you can try it in w3schools editor and it will work:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Image Gallery</h2>
  <p>The .thumbnail class can be used to display an image gallery.</p>
  <p>The .caption class adds proper padding and a dark grey color to text inside thumbnails.</p>
  <p>Click on the images to enlarge them.</p>
  <div class="row">
    <div class="col-md-6">
        <a href="http://www.w3schools.com/w3images/lights.jpg" target="_blank" class="thumbnail">
          <img src="http://www.w3schools.com/w3images/lights.jpg" alt="Pulpit Rock" style="width:100%">
          <p class="caption">Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
        </a>
    </div>
    <div class="col-md-6">
      <div class="thumbnail">
        <a href="http://www.w3schools.com/w3images/nature.jpg" target="_blank">
          <img src="http://www.w3schools.com/w3images/nature.jpg" alt="Moustiers Sainte Marie" style="width:100%">
          <div class="caption">
            <h1>Title</h1>
            <p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

</body>
</html>
1 Like
3

Generally I think of <img> and < p> are inline level content attributes. Meaning they are meant to flow together in a block. Where as div elements are block sturctural. Think of it as<p> and <img> are water (inline) and meant to fill the container <div> (block element).

With regards to placing an <img> in a <div>, you have better control of how the image displays, especially with cropping. So you can have the <div> set to width: 100px; height: 100px; overflow: hidden; then set the <img> to width: 100%; height: auto. Then the image will stretch to fill the <div> and the remaining <img> will be cropped.

Edit: <p> is a block level element. <img> is inline. I just think of <p> as used for styling and <div> for providing structure. Updated with corrections from @Surogo.

4

@tophermurphy <p> is block level; w3schools has a page on inline and block level elements here: http://www.w3schools.com/html/html_blocks.asp. Sorry for being pedantic! :slight_smile:

5

You are correct my bad.

I tend to think of <h> elements and<p> elements as content elements and <div> as structural elements. But that is just me.