Web Log Costa Blanca

My last couple of posts have been about freeing HTML. One aspect of this is making the right sort of use of the attributes id and class.

You can assign an id or class attribute to just about any HTML element. An id attribute assigns a unique identifying name to it; a class attribute assigns it to one or more classes. (As the names suggest.)

There are a couple of things here already worth taking note of.

1. Give an element an id, and it’s supposed to be unique. Only one element on the page can have that ID. Many browsers fail to enforce this rule, but as a designer/developer you should never take advantage of this laxness.
2. An element can be a member of several classes. When assigning it, just list the class names with a space between each.

This gives us a first hint in how we can make best use of these attributes. When designing a site as a collection of Web pages, or developing it (through program code and database data) to produce Web pages, we can use IDs for elements that appear just once—perhaps on every page. And we can analyse our material (‘content’) to decide what classes we need.

This will give us some useful rules of thumb for naming: good names for IDs are: “menu”, “content”, “main”, “search-box”, “navigation”, “breadcrumb”, “shell”, “extras”, “logo”, and so on. If we allow ourselves to think about hierarchies—and not get too anxious that we are on the verge of thinking about visual display—we can add “header”, “footer”, “sidebar”, “maincol”, and so on.

I have said that for class names we should analyse our material: this will give us names like “text”, “date”, “link”, “address”, “event”, “price”, “summary”, “exposition”, and so on and so on.

In other words, we can assign elements an ID based on their function—what role they have on the final page—and assign them to classes based on what they contain—or better still, are.

I know, I know. This really is train spotting or bird spotting stuff. (Why are there so few entries in Google for “HTML anorak”?) But it’s also a kind of confession.

In my last post, I wanted to emphasise that the tags I mentioned were bits of HTML, not bits of English. So I first used the tt tag to isolate them: short for ‘teletype’, this is a tag which displays its contents in a monospace font. A few minutes later, I realised my error. Old habits had swung into action while I was concentrating on something else. The tt tag is as bad as the b tag or the i tag. It’s purely presentational. And the tag I needed was there to be used: the code tag, which is there precisely to identify code.

I thought I’d make a list of similar tags: tags I hardly ever use—and have hardly ever seen used. Here they are: abbr, acronym, address, button, cite, colgroup, optgroup, q, tbody, thead, tfoot.

Lots of these tags look really useful, in principle. If you use one or more of them regularly, please leave me an example!

One of the most exciting developments in Web design in recent years has been the increasingly sharp distinction we have been able to draw between content and presentation. As more and more powerful and efficient (not to say beautiful) Web page designs appear, using nothing but style sheets for presentation, HTML markup can be freed—to return to its true semantic roots.

Of course, all this is passing by designers still muddied down in the twentieth-century, using tables for layout, and font tags for type. Like people who insist on driving four-wheel gas-guzzlers in towns, in spite of everything that we know about global warming, they will no doubt persist in their ways until the waters close over their heads.

I myself have a couple of small caveats about the dogmatic and (I believe) artificial limitations placed by some writers on what is to count as ‘content’, because it must never be forgotten that forms and colours also communicate meaning: by no means all a site’s ‘content’ is words. (I’ll come back to this in a later post.) But the main thrust of the missionary work (like the missionary work of Greens) is all to the good.

It’s good, to give one tiny example, to use an h1 tag just because what you’re inserting at that point in your page is your main page header—and not to worry about how big it’s going to be. The size of every header element can be changed in your style sheet, so that for a particular page design, the text in an h1 tag may be smaller than that in an h2 tag. What matters is that one has the text of a primary header, the other the text of a secondary header. You can think exclusively about meaning and message when creating your HTML markup, and about presentation when writing your CSS rules.

This means that we can now use list tags for all lists (such as navigation menu options), however we want them to appear on the final page. We can revive old tags like address for addresses. And so on.

I’ve actually been quite slow, I have to confess, in freeing myself up. Some of my older sites still muddle content and presentation, especially in the naming of IDs and classes. I’ll come to that in my next post!