Is surrounding <img> with <div> really necessary?

**happyoink** · Nov 14, 2009 11:30

Hi,

It's been absolutely ages since I wrote any HTML and my memory needs jogging. I've checked out the reference here but it didn't answer my question.

My question is, when I insert an <img> in the markup (for example just the logo, nothing else), is it best to surround the <img> with <div> like so:

HTML Code:

<div><img src="path/to/my/image.jpg" alt="Insert description here."></div>

or just have the <img> stand alone like so:

HTML Code:

<img src="path/to/my/image.jpg" alt="Insert description here.">

I ask because I tried the second option and the validator threw up an error saying that I needed to surround it with a block level tag like <div>, <p>, etc. I thought that was weird seeing that it was just an image. Is it really necessary to surround all my images with <div>?

**rguy84** · Nov 14, 2009 11:56

There was a post here a few days ago on this subject, maybe browse that thread?
http://www.sitepoint.com/forums/showthread.php?t=643675

**happyoink** · Nov 14, 2009 11:59

Thanks. I haven't been here for ages either.

But it's a slightly different scenario there, however I get the point. So technically it's a good thing to surround <img> with a block level element like <div>. I get it.

**rguy84** · Nov 14, 2009 12:11

I'd argue it all depends on your layout. I'd say

Code:

<body>
<div id='container'>
<div id='heading'>
 <img ...> 
 <h1>My company</h1>
</div>
<div id='content'>
...
</div></div>
</body>

is a fine method for layouts.

**happyoink** · Nov 14, 2009 12:14

I thought so too until the validator threw up errors. Now that I've surrounded my <img> tags with <div> tags, it validates properly which is still a mystery to me because I don't recall having to do this before.

**bluedreamer** · Nov 14, 2009 12:47

Don't forget to close the tag...

Code:

<img src="image.png alt="whatever" />

**dogFang** · Nov 14, 2009 12:57

img is an inline element, so must be wrapped in a block level element.
If the image adds content use img, but if it is purely decorative then include it as the background to an element.

**dogFang** · Nov 14, 2009 12:57

Originally Posted by bluedreamer

Don't forget to close the tag...

Code:

<img src="image.png alt="whatever" />

Only in xhtml

**happyoink** · Nov 14, 2009 13:04

Originally Posted by dogFang

Only in xhtml

I'm using HTML4 Strict.

**Raffles** · Nov 14, 2009 13:40

Good.

HTML 4.01 Strict is what all the cool kids do.

**happyoink** · Nov 14, 2009 13:48

Yep. I hate it when I go to somewhere like ThemeForest and find cool looking stuff only to find it's written in (X)HTML Transitional.

I should slap myself, no wonder I forget the basics when I don't write markup for ages.

**felgall** · Nov 14, 2009 14:06

The only two doctypes anyone should be writing new pages in now are HTML 4.01 strict or XHTML 1.0 strict and unless you have a good reason for using the second of these you should be using the first one.

**welshwarrior** · Nov 15, 2009 10:34

hi,

mate i insert my images using this

<p><img src="divers-circle.jpg" width="200" height="162"
alt="A circle of divers practice their skills"/></p>

hope it helps

dean

**happyoink** · Nov 15, 2009 10:38

Thanks but on the page I'm doing, there are no images within paragraphs.

**gary.turner** · Nov 15, 2009 14:32

Your initial problem is likely due to the image being a child of body. Body may have only block level elements, scripts, and the chameleon elements, ins and del, as children.

See §7.5.1 The BODY element.

cheers,

gary

**happyoink** · Nov 15, 2009 14:45

Ah that would explain the error the validator spat out. Thanks Gary!

It also explains why I don't recall having to wrap my <img> tags with other elements such as <div>. It's because most of the time I used a wrapper.

User Tag List

Thread: Is surrounding <img> with <div> really necessary?

Thread Tools

Display

Is surrounding <img> with <div> really necessary?

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions