Slow transition to content separation

In february, I wrote a three-part article on slow transition to XHTML (part 1, 2, 3). In case you haven’t read them and your pages are not already XHTML, I suggest you read them first.

Content separation

What is content separation? Well easy it is the separation of content from layout. What happens when you separate content from layout is that you are left with a page with meaning and apply a layout to it so that it looks good. This layout should be in CSS (preferably in a separate file). To achieve this, all or at least most of the layout should be removed from your (X)HTML pages.


How a certain piece of text should look, is defined in the attibutes of the tags. When you want to separate layout from content, it’s mostly those attibutes that need to be replaced. I’ll cover the most used things here. If you’re looking for a tableless layout, you also might want to read the two column layout without tables post. The big question is what attributes should be removed and what not? The easiest answer is if an attribute described what the tag or its content is, it is ok, if it describes how the content should look or where it should be placed, it is wrong…

First let’s start with images. A image tag like this isn’t uncommon: <img border="0" src="main.jpg" width="554" height="246" />. The most important attribute here is the src="main.jpg", which obviously should stay. All other, however, should be removed. Removing them will result in this: <img src="main.jpg" />. The problem is now, that is doesn’t look like it did before. So we need to add CSS. img { border: 0; } That should do it. All images’ borders have been removed, which is mostlikely what needs to be done.

Secondly, paragraphs. Paragraphs like this <p> align="right" for aligning text to the right or combinations like this: <div align="center"><p><p/></div> or <center><p><p/></center> aren’t uncommon. Yet they should all be transformed to this <p class="rightalign"></p> with some CSS that looks like this: .rightalign { text-align: right; }. (Yes I know, “rightalign” isn’t the best choice for a classname since it implies layout too).

Thirdly and lastly, the body tag. This tag shouldn’t have any attributes. Any attribute you think of giving it, can be put in CSS. Going from background colors, fonts, links colors, …

These are only a few, but probably the most used layout-content mixings. One point to remember, if it is for layout, put it in a CSS file.

No Responses to “Slow transition to content separation”.

Comments are closed.