HTML 101

Like a lot of other people, I like to crash out on a Saturday night in front of a television set with a movie DVD. I hadn’t really explored a DVD’s “options” menu before, other than to take the odd peek at out-takes or documentaries about special effects, so last Saturday night I thought I would investigate further.

I understood the concept of “captions” but what did “commentary on/off” mean? Well, switching on the commentary and running the beginning of the film again made it all clear. There was a voice-over on top of the soundtrack, describing what was happening in the plot—such as it was! Hey, it was just like a radio play. So this DVD could be used by people who couldn’t see it, with the commentary switched on, and by people who couldn’t hear it, with the subtitles on. Great! So technology does have its uses after all. Actually, this particular film would have been improved by switching off the captions, subtitles and TV set, but that’s another story.

“Accessibility” is another of those buzzwords being used a lot in Web design circles these days, but what does it really mean? Everybody has his or her own ideas about accessibility but to me, it’s all about “design.” The word “design,” in its proper sense, means making something better suited for its intended purpose. A well-designed car will take you from A to B (and hopefully back again) with the minimum of fuss. This is totally regardless of what the car looks like. It could be an ugly, imitation wood-grain station wagon or a sleek, shiny sports car. If it does its job well, it is “well designed.”

Unsightly as it might be, the station wagon is actually a better solution for getting a family of five, their luggage and the two dogs from A to B than any two-seater sports car. What the car looks like is a matter of its “styling.” When it comes down to it, styling is a marketing ploy. Like fashion, it changes with the seasons—it is ephemeral. It is a way of selling you the same thing over and over again. As a selling aid, it is nothing to do with “design” other than in helping fulfill the requirement that the car be attractive and desirable in the eyes of potential customers—and thus more sellable.

So, “design” and “styling” are two entirely separate things. In many cases, you need some of both.

Long ago, the World Wide Web or Internet’s purpose was to allow government departments and academic institutions to share documents. The computers at that time weren’t much good for graphics, so the document were mainly plain text. The Web today is still very document-centric; in fact, the “T” in HTML means Text. Sure, we now use pictures, animation, sound and streaming video with varying degrees of success but the Web is primarily a textual medium.

The “H” in HTML means “Hyper,” which doesn’t make much sense without the word “Text” after it, but it refers to the ability to jump to other text by clicking on a recognizable link. At this point, I’m not defining the term “recognizable link”—that comes later.

Mark-up, the “M” in HTML is all about specifying what a particular piece of text does, not how it looks, although its appearance might well change depending on its function. A section of text could be a heading, a list, a link, or just plain body text. Just like the station wagon, “style” doesn’t come into it.

The “L” means “Language” and yes, HTML is a language. It’s a language that browsers understand and has its own vocabulary and syntaxes just like any other language.

The purpose of HTML is to tell a browser how to display the text. If you want to tell the browser what the text should look like, you should use a “style sheet.” You see, we are now back to “design” and “styling” again.

Unfortunately, before style sheets became widely understood, people tried to style their pages using HTML and found that it didn’t do a very good job of it. Then they started using various hacks to adjust spacing and positioning. Then, pages started to break. HTML was never designed to do this and it’s no big surprise that it doesn’t.

Bad style is something else. As the song goes, “You’ve either got or you haven’t got style.” If you are tone deaf, you will sing out of tune and be totally unaware of the fact until somebody else tells you. If you have bad visual style, you are probably equally unaware that your communications are “out of tune,” too.

Communicating at an emotive level is impossible to avoid, you don’t have to do anything to send a message of some kind. Saying nothing is a statement in its own right. “Did you take the last can of beer from the fridge?” “I’m saying nothing!”

You have to make sure that the (subliminal) message being received is the same one you intended to send. A more common fault is where the function and style are not necessarily bad, but in the wrong order. “Function with style” is generally to be applauded, as is “style with function,” if somewhat more difficult to achieve. “Style, or self-expression, getting in the way of function” is probably the greatest pitfall for novice designers. Like cotton candy, something can look sweet but have no substance.

Fortunately, situations like this are fairly easily identified. If somebody tells you that something you’ve done looks “cool”—worry! Years ago, the word “nice” was used. Believe me, these are derogatory terms, not compliments!

(Franco O. Mendoza is systems administrator of Verizon. For comments, e-mail Mendoza at franco.mendoza@vzpacifica.com.)