Maybe I’m being a bit too picky, but styling images with inline code doesn’t (always) seem like the best option. To me, it isn’t even a question of utility, such as whether inline or imported styles are the most effective and easiest to use. No, it seems to be more of an issue of what is correct and proper. I question myself on this constantly, as any good semanticist should. I ask myself:
- Where, grammatically, should this content go?
- What markup is available that would correctly show this?
- If necessary, how can I style this so that it appears like it seems it should?
From these questions I try to find the best way to mark up content. In this way I want to look at images, most particularly images in blog posts, and see what the best way to mark them up might be.
Where, grammatically, should this content go?
An image is a unique form of content. There seem to be two uses for images, and I’ll attempt to define them below.
- Decorative images
- Used to decorate the design of a website, usually not critical to the consumption of content
- Content images
- Used as a substantial source of content within the site, and usually is critical to the consumption of content
A couple of examples of what I’m talking about:
The above screen is taken from Church Marketing Sucks, an offshoot of the Center for Church Communication, something I’m pretty passionate about. As you can see, the background image on the site is for decoration, as is the header sweeper design. I consider these decorative because they could be stripped away without the content of the site going away.
I use a different technique, depending on whether the image is intended to contribute to content vs. decoration. If something is intended for decoration, I will do my best to make the image the background of a
div. Only if the image is intended to contribute to the content (such as the ALA example) will I use an
What markup is available that would correctly show this?
One of my pet peeves is when designers use class titles like
alignright when styling content images. The issue I have with this is the same I would have if these class names were used to name
divs being floated to the right or the left. The problem is simple: the purpose of class names is to identify the purpose of the element, and not describe them according to how you will style them. This way, if you change the style of these elements later, they aren’t classified incorrectly.
This same principle applies to content images. If content images are styled with
alignleft, either by the user or a WYSIWYG editor, their positions can’t be changed later without having awkwardly classified images.
I suggest three classes for content images.
With this system, I analyzed how images could be aligned and matched them up with appropriate semantic classifications. A main image, for instance, is centered horizontally and text doesn’t wrap around it. A major image floats to the right and wraps text to the left. A minor image floats to the left and wraps text to the right.
The CSS for the images would look like the following.
margin: 0 auto 1em auto;
margin: 0 0 1em 1.5em;
margin: 0 1.5em 1em 0;
Then all you have to do is add
class=“main” or other classes to the
img tag and there you have it. Images with proper classifications and correct alignment that could later be changed to fit a new hierarchy or site layout.
Benefits to Proper Image Classification
- Uses classes correctly
- Makes content forward–compatible
- It’s proper semantics
Negatives to Proper Image Classification
- Won’t work well with WYSIWYG editors
- Requires more work/case by the user
These are techniques with kinks which I’m still working out. For instance, I still want to figure out a solid way to use this technique in conjunction with captions. I’m addicted to Arun Kale’s technique in The Morning After theme which I’ve been using at Theme Playground. I’ll post once I perfect this technique.
This post was initiated, in part, by Sarah over at BlueJar with her post How to Position Your Photos and Images Using CSS. I’m kind of a semantics dork, so this topic caught my attention. Overall, I look forward to seeing these things develop, especially as far as valid, semantic blogging is concerned.