The W3C has worked hard to remove presentational elements from HTML. Unfortunately, old habits don’t die easily. This has resulted in some standard generic CSS classes that are contradictory to the intention of HTML and CSS. If you are using classes like .left
, .right
, and .clear
you are guilty as charged.
The case of center
Back before HTML 4.01 we had the center
element. Its sole purpose was to center text. It was used like this:
[html]
Lorem ipsum dolor sit amet.
[/html]
However, when HTML 4.01 came along the W3C gave it the axe:
The CENTER element is exactly equivalent to specifying the DIV element with the align attribute set to “center”. The CENTER element is deprecated.
What happened to align?
?
Fortunately, we designers are a savvy bunch and quickly resorted to the align
attribute. This crafty attribute aligns an object to the left, right, center, or justified.
[html]
[/html]
But the W3C was one step ahead. They had already deprecated that attribute as well.
I hope this is clear
Since that fight was lost, we up and started using the clear attribute. Its purpose was simple, to clear floated objects on either side of an element. But they had thought of that one too.
[html]
[/html]
Without hesitation or regard they stole it away.
W3C intention
By definition HTML is a markup language. Its purpose is simply to define what a portion of text is NOT how it should look. From big
to small
, b
, font
, and i
they W3C eliminated whatever defined presentational aspects of a document.
Bold and italic
Folks get confused about bold and italic so the W3C took care of care of those elements too. We did receive some replacements that are more semantically accurate, however. The strong
and em
tags describe the function of some text. Either it is a strong point that should be made or something that deserves emphasis.
These elements are regularly styled as bold and italic but they can be styled any way the designer chooses.
Back to CSS
[html]
[/html]
Do you see any similarities between this modern, CSS based code and the classic, deprecated elements and properties I mentioned above? Yeah, it's not that much different. There would be some accompanying styles that float the element to the left or right or clear it, but the concept is the same. Presentation is being controlled from within the markup.
I will consider my point made.
Conclusion
Rather than using generic classes, try using a class name that accurately describes the content. For example, if you use a big image at the beginning of your posts, give it a class of main-image
. You can still float it the same way as always, but you have avoided semantics that confuse markup and presentation.
Kudos
This article was inspired by a section of Web Design+. It is a great document that details some common best practices for working with HTML and CSS. I recommend reading it.
Furthermore, this should not be construed as a criticism of the author. My hope is that it will help to promote a better understanding of HTML and its intent as defined by the W3C.