Tech Center Current

The second annual CSS Naked Day is coming April 5. This is the day that many sites will intentionally remove their webpage’s stylesheets in an effort to draw attention to something called “semantic markup”.

Before CSS was widely used, most websites used HTML elements and attributes for visual stylistic purposes. <font> tags and nested tables were everywhere, and it made webpage source very difficult to read and maintain.

Once CSS started to obtain enough browser support, web standards experts began promoting the idea of “separation of content and presentation”, where all of the stylistic aspects of the page, such as fonts, colors, and visual layout, were moved to a separate modular CSS stylesheet. This offered many benefits, including significantly reducing bandwidth usage and dramatically improving maintainability of the site design and content.

Unfortunately, many web developers threw out the baby with the bathwater. While they stopped using the purely stylistic elements like <font>, many also stopped using meaningful elements like <p>, <ul>, and <table> where those elements were appropriate. Something known as “divitis” occurred: instead of using HTML elements that presented meaning, many web developers started using the mostly meaningless <div> and <span> elements for almost everything on the page.

The most useful and efficient way to write HTML is to use “semantic markup”. This is the idea of using HTML elements and attributes for what they mean, in order to maximize the understanding of your page by a search engine, accessibility agent, or other “intelligent” web applications. If you have a paragraph, you use a <p> element. If you have a list, you use a <ul> or <ol> element. If you have tabular data such as a spreadsheet, you use a <table> element. Those elements are then styled by a separate stylesheet like before, but the benefit is that a program can now understand the context of your content without needing to see the visual presentation offered by the stylesheet.

A web developer who is well-versed in web standards can often quickly judge the HTML quality of the site simply be turning off the stylesheet and seeing how it appears. In Firefox, you can disable the page’s stylesheet by going to the View menu, then Page Style, and then selecting No Style. (Internet Explorer doesn’t offer a way for the end user to do this.) If the page looks chopped up a bit but still seems to have side-by-side columns for the page sidebars, etc., then it’s probably using presentational markup (which it shouldn’t). If the entire page looks like a big heap of uniform text, no space between paragraphs, no lists, etc., then it’s probably suffering from divitis.

What it should look like (when using semantic markup) is something along the lines of a basic text document in Microsoft Word. The page should be black-on-white, main navigation links should be in simple bulleted lists, paragraphs should be spaced normally, headings should appear large and bold, lower-level headings should be smaller than higher-level headings, and so on. I should mention that just because a page looks like this doesn’t necessarily mean it was written correctly, but it’s usually a good quick indicator for most sites on the Web.

CSS Naked Day is the one day of the year when web developers of many sites will take down their stylesheets and hopefully show something that looks like the above description. It is an effort to bring awareness to semantic markup and the benefits it brings. It will mostly be smaller sites participating in this event, since mainstream websites don’t want to turn off their visitors for something that only interests web developers, but there are already over 1500 websites that have announced their participation at the moment I’m writing this.