Internet - Web design

I have always had a bit of an obsession with valid markup. My sites always validate, and the tougher the validation the happier I am.

The problem with strict validation is that most, if not all, of the plugins and extensions we would like to use on our websites were coded without a thought towards valid markup. Because of this, you either have to decide to live without certain creature comforts with a strict validating website, or learn how to alter other people's PHP to generate valid code. 

So yesterday while converting this site from valid XHTML 1.0 Transitional to valid HTML 5, I was reminded about a simple issue that makes all the difference between validating transitional but not validating strict.

The align attribute of the img element in HTML has been deprecated. No longer valid markup. Now, all web browsers know what they're supposed to do with align, and the attribute is valid in transitional markup, so it works, and it's easy. The big content management systems still use align liberally, and they still validate transitional, but this is not the proper way to skin that cat.

Now the elegant and proper way to address this is to move that styling info to CSS where it belongs. You can add img styling cues to a new or existing CSS file, creating classes for the different image alignments that you need to use on your site. Then it's a simple matter of adding the appropriate class to your image markup. 

Example CSS followed by use in HTML:

img.floatLeft {float:left;}

<img alt="w3c.jpg" class="floatLeft" width="135" height="135" src="http://pseudoexpert.com/images/w3c.jpg" />

The quick and dirty solution, since your CMS is already using the align attribute, is to set your content up the way you always have in your editor, and then switch to source view. Once you're looking at the HTML version of your content, find the offending instance of align and replace it with float.

BAD STRICT HTML

 <img alt="w3c.jpg" align="right" width="135" height="135" src="http://pseudoexpert.com/images/w3c.jpg" />

GOOD STRICT HTML

<img alt="w3c.jpg" style="float:right;" width="135" height="135" src="http://pseudoexpert.com/images/w3c.jpg" />

It's a good idea to keep styling out of your HTML, so take the time to add your image classes to your CSS and call them with class in your markup. Including the styling info in your markup will work, but it's not the way we're supposed to be implementing it.

What's the difference between float and text-align you ask? Float is not inherited by the rest of the block and text-align is. Also, there is no center attribute to float, so for centering images you will need to use text-align. Like before, adding this to your CSS is the elegant way to do it. Then you just need to use the class for each instance of a p-contained image you want to center.

Example CSS followed by HTML:

p.center {text-align:center;}

<p class="center">

You can also do this on a per instance basis, but again, it's best not to put CSS in your HTML. Example below.

The quick and dirty fix:

<img alt="w3c.jpg" style="text-align:center;" width="135" height="135" src="http://pseudoexpert.com/images/w3c.jpg" />

My CSS for image handling is four lines long, and certainly easier than doing it on a per instance basis. All I need to do is include the class I need with my object. Better yet, it's proper use of CSS and HTML.

 /* Image alignment */
img.floatRight {float:right;}
img.floatLeft {float:left;}
p.center {text-align:center;}