When should div tags be used, and when should they not be used?

The reason why I’m asking is because this code below, on almost every site, this type of code is not encapsulated in div tags.

<div>
  <img src="map.gif"
      onmouseover="this.src='map_location_revealed.gif';"
      onmouseout="this.src='map.gif';"/>
</div>

Personally, I like to have inline elements (like images) contained in a block-level element. But it’s just a preference. (It used to be you weren’t supposed to have an inline element directly inside the body element, but I’m not sure that’s the case in HTML5.) But without a container on an inline element, you’re often relying solely on CSS to make sure elements play nicely together (such as inline elements butting up against block elements), and I haven’t always found this is a good idea.

3 Likes

Are you talking about only thie <img> tag or are you including the <div> tags shown in your code?

I am inclined to believe that the <img> element is within some kind of parent container, even though it may not be a <div>. Generic <div>s are not as popular in HTML5 as they were in HTML4 because there are newer, semantically named tags to use instead. Regardless of the name, they are still containers.

I was only referring to div tags.

Why would one encapsulate <div> tags within <div> tags?

So the <img> tag is irrelevant?

I found that example here: https://www.sitepoint.com/web-foundations/onmouseover-html-element/

Hmm, and not all that old.

@Adam is that your doing?

:wave:

That article was from our older (much older!) Eeference section, part of a series of popular posts we copied over to Web Foundations. So it’s not something I’m super knowledgeable about.

If it’s incorrect, I’m happy to update the article to drop the <div> elements from the example.

1 Like

Thanks Adam.

I’ll leave discussion about which container element is more appropriate to others more knowledgeable than I.
My take is although using div tags is now considered to be “as a last resort, only when no other more appropriate tag is available” much depends on context and designer preference.

I have more issue with the inline JavaScript eventHandler and would use a JavaScript eventListener - i.e. JavaScript separate from the HTML

But indeed. is any JavaScript at all needed for this? eg. with only CSS

.....
<style type="text/css">
img#noinlinejs {
  background-image: url('./images/image2.png');
}
img#noinlinejs:hover {
  background-image: url('./images/image4.png');
}
</style>
</head>
<body>
<h1>Img in Div</h1>
<div>
  <img src="./images/image2.png"
      onmouseover="this.src='./images/image4.png';"
      onmouseout="this.src='./images/image2.png';"
      width="60" height="60" />
</div>
<div>
 <img id="noinlinejs" width="60" height="60"/>
</div>
.....

results in the same effect.

2 Likes

My understanding is that they always have been. Just now there are fewer situations where you end up with that last resort

.[quote=“Mittineague, post:9, topic:228092”]
I have more issue with the inline JavaScript eventHandler
[/quote]

They definitely don’t work with JavaScript code that has been properly wrapped in an IIFE. At the very least you have to move the handler inside the IIFE for it to work.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.