General Question

makemo's avatar

Putting an <IMG…> in a <SPAN> is ok, right?

Asked by makemo (531points) 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

archaeopteryx's avatar

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.

makemo's avatar

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. :)

Vinifera7's avatar

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” “”>
<html xmlns=“” xml:lang=“en-US” lang=“en-US”>
<div><span><img src=“whatever.gif” alt=”” /></span></div>

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;” />

wilhel1812's avatar

Sure, that should be valid.

kullervo's avatar

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




to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
Knowledge Networking @ Fluther