HTML & CSS Tips and Tricks

SEMANTICS  vs.  FUNCTIONALITY

At this time, a few words on the HTML/CSS 'official' mindset are in order.

One design principle underlying the latest approach to HTML tags is that they be 'semantic' — that is, denoting meaning and intent rather than low-level instruction.  The classic test is, "Can your tags be meaningfully used in a browser for the blind?"

Is that a useful criterion, though?  The answer is — it depends.  Personally, I couldn't care less what a computer makes of my markup; I care only how it looks to a human viewer.  If, however, it is important to you that a screen-reader be able to precisely interpret your every thought via examination of your HTML tags, then so be it.  Should that be your goal, then some of my ideas might be incompatible with your objectives.

Additionally, many online bloggers and pseudo-tutorials proclaim that I should do something a certain way, or that I must not use tag so-and-so except in certain circumstances.  To all that, I say <b></u>llsh<i>t!

Web browsers care not a whit about meaning; they simply do what they are told.  Also, search engines are primarily interested in keywords, not tags.  On top of that, I'd like to think that there is nothing so ambiguous or cryptic about my own presentation that it cannot be assimilated simply by reading it.  Acknowledge­ment of these realities means that I can ignore any claims of alleged "proper usage" of tags, and exploit them at will to streamline both my code and my workflow.

I just want to create a few web pages, fergodsake — not spend countless hours online learning how to complicate simple tasks because of some panel's arbitrary directives.  Having a considerable life away from the computer keyboard, the more quickly I can dispatch the more mundane aspects of page-markup, the better.

Perhaps that notion appeals to you as well; but of course if you are writing web pages for someone else or trying to sell something online, then your options probably are limited.  Nevertheless, I entreat you not to be a CSS Sheeple.  Free your mind of semantic constraints in favor of increased product­ivity and enjoyment.  I assure you that life is better on the 'other side'!

Others seem to agree with me.  There is a strong movement toward Object-Oriented CSS (OOCSS), also known as Functional CSS or Atomic CSS — a coding style that emphasizes functionality, readability, and compactness over a blind adherence to semantics.  Having come to this way of thinking years ago, I read my first article on the subject after writing most of this series.  I am pleased to see that so many others have joined the bandwagon, and more about that later.