Web Devout tidings

Today is the first annual CSS Naked Day. This is the day we take down our stylesheets in support of structural markup.

As all professional web designers know, it is important to separate webpage content from presentation. The purpose of HTML is to express the content of the webpage — to describe the meaning of each component of the webpage in a way that would interest automated agents such as search engines that are attempting to understand the information that your webpage is expressing. CSS then provides a presenation layer to define how human beings should experience the page content.

If you aren’t following this model correctly, there will likely be problems when the stylesheet is disabled. You may see things shoved up against the right side of the page, images cut up into pieces, border or background images placed oddly here and there, or other oddities that make the webpage very difficult to use. However, if you’re following the model correctly, everything should be nicely lined up against one side of the page, the font and color should be consistant, images don’t look out of place, navigation and heirarchical information structures should be in nice organized lists, and the page should generally look like a well-organized text document ready for printing.

Annual CSS Naked Day is a way to encourage web developers to write proper structural markup. The idea is that the quality of your markup should be reflected by how readable and usable your webpage is when stylesheets are disabled. The exercise is pointless if you are using presentation elements like font, big, and b. In most cases, those elements should be replaced with some combination of structural elements like p, h2, and strong and CSS to define how the elements should appear. There are special cases where elements like b and br should be used, but they are quite rare.

And the big problem this exercise is trying to show is the use of tables for layout purposes. Table elements have structural meaning and are the correct elements to use in cases where the information being presented is tabular in nature. However, when table elements are used just to visually position things on a page, it sends the wrong message to search engines and other agents that try to make use of the markup semantics. The agent is told that each row and column is a set of strictly related data, when in fact the only relationship is the intended visual position of the table cell contents. Imagine that the agent is trying to learn something new from you and you tell it that a pig is to bacon as a list of cities is to both a book and a copyright statement. You can see how the agent might walk away quite confused by your website. That probably isn’t what you want to do to your blind visitors who expect the page to be read out in some kind of logical order, or to search engines if you want them to give you a high ranking.

So check out how your page looks without a stylesheet. In Firefox, go to the View menu » Page Style » No Style to see the current page without stylesheets. In Opera, go to the View menu » Style » User mode and uncheck any boxes below it. Internet Explorer and Safari don’t have a straight-forward way to disable author stylesheets even though it is a CSS 2.1 conformance requirement. Fix up your page if you need to, make sure it validates with a Strict doctype, and have a nice CSS Naked Day!