Putting an <IMG…> in a <SPAN> is ok, right?
Asked by
makemo (
531
)
February 8th, 2009
Just to be sure, there’s nothing wrong, putting anything else than text inside a <span> … </span> element, right? For example:
<span id=”…”><img src=”…” width=”…” height=”…” alt=”…”></span>
In my The Ultimate HTML Reference book it says, quote:
“A span is an inline element, and must only contain text content or nested inline or phrase elements. It shouldn’t be used to surround block-level elements…”
Observing members:
0
Composing members:
0
5 Answers
The <span> tag is usually used to apply a certain cascading style on more than on a group of elements together.
For example, you can assign the font color to be red and then using the span element to make the font of one or two separated text elements red. So, I guess it’s okay, to place an <img> element within the <span> element, but I don’t see what’s the point of doing that. Unless you want to put two or more image together within that <span> element so that they carry the same width, height, margin, padding.. etc.
Yeah. The reason why I was experimenting with putting an IMG inside a SPAN was that I experienced that seeing the very IMG being squashed/stretched in size at various times. I don’t know why, but for some reason I seem to prefer putting IMGs inside a block or inline element. Don’t ask me why; maybe it’s an amateur thing that I have to outgrow. :)
If your <img> is an inline element, then there’s nothing wrong with it. Regardless, the WC3 Validator will not throw an error on you.
Try validating the following code yourself:
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en-US” lang=“en-US”>
<head>
<title>Test</title>
</head>
<body>
<div><span><img src=“whatever.gif” alt=”” /></span></div>
</body>
</html>
However there’s no reason to place an <img> inside of a <span> just to keep it from changing shape. That’s why you can specify dimensions:
<img src=“whatever.gif” alt=”” style=“width:100px; height:100px;” />
Sure, that should be valid.
Remember that you can make any element block or inline if needed. So if you have trouble with a image in a div because it’s a block level element just set the div to display: inline
If you have some css which is forcing the dimensions of your image then see if you can remove this or over-ride it from the stylesheet rather than bloating your code with lots of inline styles. If you are looking to keep images a consistant width you can set just the width only and then the height will change proportionally to keep the image from being stretched. If you want to go a step further you can set the containing element (div or span) to have a black background and have the image and the containing element set to the same height but only set a width for the container and not the image. Then set the container to have overflow hidden. Also set the image to display: block and margin: 0 auto. This way your images will fit in the same shape space but if it is too narrow it will have black borders on the left and right.
Answer this question 
This question is in the General Section. Responses must be helpful and on-topic.
Composing members:
0
