Properly Seperate Content Images from Layout Using CSS
When I started making websites in the 1990s we had a much smaller set of tools and a lot of websites were what we would today call “static.” A static site was nothing more than a folder of html files that contained both the content and layout of the site. If we wanted to change the layout of our site, we would either need to get new content or go through each individual file and update the layout.
Today we have CSS which introduced the paradigm of sperating content from layout. A site that applies this principle throughout its implementation will be a site that can easily be “reskined” or “re-templatized” without needing to port the content from the old site.
I have been working with CSS for some time, but one item about the WC3 standards always eluded me: the requirement for all HTML image tags to have an alt tag. Why should an image have an alt tag? Afterall, not every image has a suitable alt tag. Any given site contains drop shadows, gradients, invisible spacers, little meaningless image flourishes. Should we label each and every one? Then I realized why this rule is in place: the image tag must be reserved for content!
Lorem ipsum dolor sit amet, in cum possit oporteat, et vel aperiam apeirian. No
quem graece referrentur eum, ei his case gloriatur appellantur. Nec error
consetetur an, est dicam semper imperdiet ea. Eu duo choro recusabo. Qui at
velit aperiam, volumus sensibus deseruisse ei ius, mea an homero primis
scripta. Ex elit maiestatis signiferumque sea. Mei vidit efficiendi disputando
ex, ei erat soluta sed. Sit at nulla putent, ancillae honestatis eos an. Ius
nisl audire noluisse in, per ea commodo nominati, usu brute adversarium id.
Quem alia tamquam mel at. In atqui admodum vix.
There exists no real reason that the two curved images used to create the rounded corners on the above div should need an alt tag. Indeed, if we look at the source code, we would find this solution rather messy:
<span style="color: #009900;"><<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"width: 454px; margin: 0 auto;"</span>></span>
<span style="color: #009900;"><<a href="http://december.com/html/4/element/img.html"><span style="color: #000000; font-weight: bold;">img</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"float: left;"</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"example_left.png"</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"Example Upper Left Curve"</span> <span style="color: #66cc66;">/</span>></span>
<span style="color: #009900;"><<a href="http://december.com/html/4/element/img.html"><span style="color: #000000; font-weight: bold;">img</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"float: right;"</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"example_right.png"</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"Example Upper Right Curve"</span> <span style="color: #66cc66;">/</span>></span>
<span style="color: #009900;"><<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"width: 340px; background: #dfe5e6; margin-left: 57px; height: 57px;"</span> ></span>
<span style="color: #009900;"><<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"clear: both;"</span>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>></span>
<span style="color: #009900;"><<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"width: 434px; background: #dfe5e6; padding: 0px 10px 0px 10px;"</span>></span>Text Here<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>></span>
How do we know if an image is layout or content?
An image is content if it conveys a meaning or invokes an action. That is, if you can
- Call an event on the image (click or mouseover)
- List item Write a caption for the image. If one or two is true, then the image is content. Otherwise the image is reserved for the dregs of layout.
How should a layout image be reperesented?
Here is where CSS comes into play via the background property and where my earlier mistake takes place. I had assumed that the background property was expressed for the purpose of backgrounds! That is, since a div collapses if it contains no content, then the background property ought to be preserved only for divs that contain content in which case the background goes behind that content. My discovery is this: the background property is for *much more than just backgrounds!
It is best to think of the background tag as a means of adding stylized images or colored blocks into a design’s layout. So if we desired rounded corners on our divs we shouldn’t resort to using the image tag, but rather ought to use the background property on an empty div then add width and height to ensure it does not collapse such as so:
<span style="color: #009900;"><<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"width: 454px; margin: 0 auto;"</span>></span>
<span style="color: #009900;"><<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"float: left; width: 57px; height: 57px; background: url('/images/posts/2012-02-21-properly-seperate-content-images-from-layout-using-css/example-ul.png');"</span>></span>
<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>></span>
<span style="color: #009900;"><<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"float: right; width: 57px; height: 57px; background: url('/images/posts/2012-02-21-properly-seperate-content-images-from-layout-using-css/example-ur.png');"</span>></span>
<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>></span>
<span style="color: #009900;"><<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"width: 340px; height: 57px; background: #dfe5e6; margin-left: 57px;"</span>></span>
<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>></span>
<span style="color: #009900;"><<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"clear: both;"</span>></span>
<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>></span>
or as we see in it’s final output:
Lorem ipsum dolor sit amet, in cum possit oporteat, et vel aperiam
apeirian. No quem graece referrentur eum, ei his case gloriatur appellantur.
Nec error consetetur an, est dicam semper imperdiet ea. Eu duo choro recusabo.
Qui at velit aperiam, volumus sensibus deseruisse ei ius, mea an homero primis
scripta. Ex elit maiestatis signiferumque sea.
Mei vidit efficiendi disputando ex, ei erat soluta sed. Sit at nulla putent,
ancillae honestatis eos an. Ius nisl audire noluisse in, per ea commodo
nominati, usu brute adversarium id. Quem alia tamquam mel at. In atqui admodum
vix.
A much cleaner solution to using alt tags! I hope this clears up some misconceptions about how to properly use the image tag and how to utilize CSS for layout images.