Using image tags in HTML is not necessarily bad design.
Tuesday, April 11th, 2006Todd Huss wrote about avoiding using image tags in HTML. He brings up two points about why this might be bad.
His first argument is:
It violates the separation of content and design by including a design element in your HTML
By this argument, we’re not supposed to use img tags because it violates separation of content and design? While this is basically true, it also seems a little shortsighted. Todd’s technique is actually quite well-suited for the template portion of a page, but breaks down once you’re working with pure content. Sure, HTML isn’t perfect, but what happens if your document legitimately contains an inline image?
Let’s take a simple example, a templated website. There’s a subtle yet fundamental difference between the HTML you wrap around your content, and the HTML that your content ends up as. Let’s also assume that you’re being a good developer and using a two-step view pattern for your web publishing. You have your content in some XML format, and you transform it to HTML and merge it with the page template, and then push the rest to the browser.
By making a distinction between the actual content of your page, and the template shell, you’re able to maintain an even better separation of concerns. So now, what happens when you want to legitimately want to include an image (or something else) inline in your content? The format you’re storing your content in should be able to handle it. Transform your content to HTML (or don’t, if you’re using something good like XTHML), and then merge it with the page template. Now you can completely maintain the site template separately from the page content.
Personally, I tend to use Todd’s technique when working on the site template, and then use inline image tags in the actual content. Using img tags inside your content keeps it descriptive — moreso than something like <div class=”fishImage”/>.
As far as argument #2:
Your SEO will suffer because image alt tags don’t carry as much weight as real text
I’m not a huge SEO expert, so I tend to agree with this one. Obviously you can’t put an exact number on it, but it seems logical that your SEO might take a minor hit by using an image tag for nagivation compared to an anchor tag. Your markup should be generally clean to begin with, and a clean page template (along with descriptively marked-up content) can get you most of the way there.