No-Style Test for Web Pages
Introduction
(X)HTML is a language primarily designed to mark up information semantically. That means it marks the purpose and meaning, not the presentation.
Over time, HTML was infused with presentation mark-up elements such as the <font> tag. Also, web designers started using tables to create layouts. This made it hard to separate the basic information from its form of presentation.
With the adoption of CSS, it is possible to separate meaning from style. But old habits (and old sites) die hard.
The test
So here’s a rough test that you can do to see whether a page is using HTML correctly or not: remove all traces of style from a page and then try to read it (under the browser’s default style).
How to do it in:
- Mozilla Firefox (image)
- View (menu), Page Style (submenu), No Style (item)
- Opera (image)
- View (menu), Style (submenu), User mode (item)
Interpreting the data
- Table-like layout
- Tables are not meant to be used for layout. Their only legitimate purpose is to convey tabular data.
- Centering
- Text alignment is purely a presentation attribute. (Exception: Right-to-left scripts align to the right by default.)
- Simulated lists
- A contiguous bunch of short paragraphs/
divs is not a list. A bunch of links in a single paragraph is not a list. Also, separators between list items (such as "|", vertical bar) have no meaning and should not be coded in the (X)HTML text. A real list shows bullets when styles are disabled.
Why bother?
Because XHTML continues to drop support for presentation attributes that didn’t belong in the first place.
Because once you have a page properly marked up, you can create and change styles easily. You can even provide a choice of styles, such as themes, or styles for different devices (screen and print, for the most part).
Going further
Maybe there are programs specially designed for this, but for now, you’ll have to look in the source code yourself to find these abuses:
- Bold tags, except for illustrating the concept of bold
- Italic tags, except for titles, foreign words (is this allowed?), and illustrating the concept of underline
- Underline tags, except for illustrating the concept of underline
- Center tags
- Font tags
- Teletype tags
- Alternate text for images
- These attributes in various tags:
align,valign,color,bgcolor, etc.
Last modified: 2007-05-20-Sun
Created: 2007-04-20-Fri