About eight years ago, I was in charge of putting together a website for a group of gamers with whom I was friends. In those days, when we wanted to say something with emphasis on the site, we’d bust out with [code]B[/code]. And it made perfect sense, after all… [code]B[/code] = bold! Simple, elegant.
Little did I know at the time that I really wasn’t emphasizing the text to which I was applying [code]B[/code]. Here’s what I mean by that:
When you speak, listen to your voice as you emphasize important details or stress a point to your listeners. The style of your voice certainly does change. However, the meaning of what you said was slightly altered. The stylistic change to how you said certain words added inflection which wouldn’t have been present otherwise.
You see, there’s two aspects of what we say: style and semantics. How our words sound is the style and what they mean or how they are used is the semantics.
The same is true with what we write on the Web. As I said before, [code]B[/code] was good for one thing: making text bold. It did that well, and for sighted visitors, the text certainly did appear emphasized.
But what about those visitors who browsed using a text-to-speech reader? [code]B[/code] doesn’t provide any semantic meaning which could be translated into an accurate verbal reading. Further, because of [code]B[/code]’s lack of meaning, the text which appears emphasized to sighted users appears as plain ol’ ordinary text to search engine robots.
The bottom line is, by using [code]B[/code] as your emphasizer, you are wasting your time; you merely give the illusion of emphasis while the text itself is semantically no more or less important than the surrounding words.
The solution rests in a much more semantic tag called [code]STRONG[/code]. This tag — one of several “phrase tags” which (X)HTML provides — goes beyond [code]B[/code] by actually altering and enhancing the meaning of the text.
No longer would text-to-speech readers speak through [code]B[/code]-wrapped words with unwavering tone. No longer would important [code]B[/code]’ed keywords receive the same importance in search engine calculations.
With [code]STRONG[/code] and other semantic tags, the enhanced meaning of the text will be evident to text-to-speech readers, which is an important aspect of usability.
Of course, the differences go far beyond [code]B[/code] versus [code]STRONG[/code]:
- Instead of [code]I[/code] (i.e., <em>italic text</em>), use [code]EM[/code] (i.e., <em>emphasized text</em>).
- Instead of using [code]BLOCKQUOTE[/code] to indent text, use it only for actual quotations. For indentation which doesn’t require a change in meaning, try applying style to your paragraph or division tags.
- Instead of rendering code like [code]<span style=”font-family: monospace;”>some code</span>[/code], use the [code]CODE[/code] tag (i.e., <code>some code</code>).
- When no semantic element seems available for what you want to do, there are two rather generic elements available: [code]DIV[/code] and [code]SPAN[/code]. A [code]DIV[/code] represents a division of a page’s content; for instance, [code]DIV[/code]s may be used to separate the various parts of a basic blog page: header, content, comments, sidebar, footer. A [code]SPAN[/code] denotes, well, a span of text but is instead an inline element. An example of how I use [code]SPAN[/code] is to make up for the lack of any semantic element to refer to the title of something (whether a movie, book, ship, or anything else which is typically underlined when hand-written); I created a class called [code]TITLE[/code] in my style sheet and applied an italic style to it. It’s unfortunate that the semantic meaning of “this is a title” cannot be applied, but at the very least, the text is set apart and visually differentiated. An example of this would look like, “When it comes to captains of the [code]<span class=”title”>Enterprise</span>[/code], Picard takes the cake.”
I hope I haven’t made this introduction overly complex, but I hope I have included enough to get the beginner blogger started in more creative and semantic uses of all the code the Web allows us to use.
I will close with a warning: Just as it was a mistake to misuse the old school style elements to add meaning to a Web page, so it is also a mistake to use the new school semantic elements to add style to a page. If there is something on a page which needs to be bold (perhaps a symbol which doesn’t show up well enough by default), don’t wrap it with [code]STRONG[/code] just for its default visual effect — does the symbol really need to be emphasized for blind readers? No, instead you should use the fallback element of [code]SPAN[/code] in a manner similar to this: [code]<span class=”bold”>text to be bold but *not* emphasized</span>[/code].
Ultimately, your markup should contain only semantic and structural elements; if someone were to view your site without any styles applied to it, the semantic and structural tags should be enough to still convey your thoughts. All the fancy style definitions should be stored externally in a style sheet.
It takes some getting used to in order to speedily write for the Web with semantics in mind, but it is worth it. The payoff is not only a more meaningfully coded site, but your code will almost always be cleaner and more readily understood.