Practical Use for Those Rarely Used HTML Tags

There's been a lot of talk lately about rarely used HTML tags (or the HTML tags you didn't know existed). Most give one line sentences about how they are supposed to be used but, fail to provide any meat. They don't show how the tags can be useful, so, the info just gets filed away.

To be fair, part of the problem is how some of them are defined and rendered. Lets take the CITE tag for instance. It is defined, it "indicates a reference to work, such as a book, report or web site." Most browsers just italicize the text. <sarcasm> thats real useful... How about linking to the web site, proving some information about the book or report?

The BLOCKQUOTE is litle better. What about ABBR of ACRONYM? Well, instead of just traffic whoring, listing the tags and giving their semantic meaning (like everyone else). I'm going to traffic whore by providing some examples of practical, pragmatic, and semantic ways to use these tags. Hopefully, some of this might prove useful. It might even please the promoters of the semantic web.

The tags I am going to demonstrate usages are:

ABBR (Abreviation) and ACRONYM

These two are very similar and fairly useful in their basic form. When the title attribute is present, mousing over the text contents will cause the title text to show up as a tool tip in just about every browser around. But, what else can be done to spruce it up a little? How about little bubble tooltips? The semantics of the HTML are maintained and, a little javascript makes for a better user experience.

On this page, you might notice a few acronyms and abbreviations with grey backgrounds. On mousing over them, you should notice bubble tooltips appearing.

My page describing how to make balloon tips provides the code to make it happen and an explanation of the code so you can customize it to meet your needs.

ADDRESS

The ADDRESS tag is an interesting one. It is supposed to be used to wrap both standard and email addresses. So, the cases where it will be used are pretty small. Before simply throwing this one out there, run a google for the hCard micro-format. A problem arises with the use of this tag correctly. By providing correct semantic usage, it becomes easier for spammers to slurp the data out of the page. One idea behind micro-formats is that a visitor, could drag contact information from a page into their email client's address book. This is a very powerful and useful concept that could enhance the usability of a site. Just be aware of how it could be misused. However, on an intra-net, permission controlled pages, etc, it could be a cool addition.

A sample markup using the address follows (ripped off from ObscureTags.com).

Mayor McCheese 1234 Burger St. McDonaldland, NY 12404 USA

The markup for it is:

  1. <address class="vcard">
  2.   <span class="fn">Mayor McCheese</span>
  3.   <span class="street-address">1234 Burger St.</span>
  4.   <span>
  5.     <span class="locality">McDonaldland</span>,
  6.     <span class="region">NY</span>
  7.     <span class="postal-code">12404</span>
  8.   </span>
  9.   <span class="country-name">USA</span>
  10. </address>

The idea behind hCard is to embed vCard type data into HTML without changing the semantics of the HTML. It adds a little layer of extra meta-data. So, if you had the right browser plugin, you could just drag the Mayor's info right into your address book. Also, with a little CSS, you could hide everything except his name, and have a big chunk of data behind it.

Now, you've seen how ugly an engineer can make this. Take a look at how well designer can do it.

BLOCKQUOTE

Giving credit where credit is due. The BLOCKQUOTE is meant to be used for long quatations where it is desired to separate the quotation form the document somewhat. The significan attributes that should make it useful are the CITE attribute, and the TITLE. In the default state, the CITE attribute, doens't do much more than let search engines (or somebody looking at the source) know where citatiation came from. In most browsers, the title simply renders as a tooltip on mouseover. Of course, you can always add CSS tricks to make it render in interesting ways.

What else could we do with this? How about on mouseover show a little box with the title and a link? How about allow a user to visit the source document?

First up, let me present a little sample of the idea (hover your mouse over the blockquote below).

Any fool can write code that a computer can understand. Good programmers write code that humans can understand.

- Martin Fowler

This is just a blockquoted section, the title say's the name of the book containing the quote. The cite attribute contains a URL to the Amazon page of the same book. When the mouse hovers over the element, a hover thingy (thats a technical term) is displayed containing the title text and a link with the URL.

I have posted the source code and an explanation of the code in the tips section.

CITE

The CITE tag presents a bit of a conundrum. It is meant to be located inside of another tag to indicate that the text there is a citation. So, the CITE tag would contain the name of the reference the citation was taken from. For example,

<p>Flying kites from battleships... - Thomas Pynchon <cite>Gravity's Rainbow</cite> </p>

One concept is that a bibliography could be automatically constructed for a document by a search engine. Well, until that day comes, I bet we could do something similar to the trick with DFN and definition. A definition list (DL) would be an appropriate way to build a bibliography. Having the bibliographic data show up on mouseover could be useful to a user.

DFN DL/DT/DD

The DFN (Definition tag) at first glance appears to be of little use. But, what if you combine it with the DL definition list tag, and its children (DT and DD). Some time ago, I build a demonstration page That combines them. It searches through the page looking for DT elements that share the same text as the DFN tag. It then creates a mouseover event to diplay the definition defined in the DD tag.

Definition lists (DL/DT/DD) can also be used when you want a list where each item is composed of multiple parts. For example, if you have some images with titles and descriptions. Instead of creating <LI> tags with nested div or span tags, DT and DD tags could be used instead. This keeps associated information together both code wise and semeantically. CSS can then be used to create the right "look".

Another case could be when you want to keep associated information together. Take a look at the source of this page. Notice how the definition list is used for the information about the photograph (date,exposure,equipment,location).

Q

The quote tag Q is meant for inline quotes within a document. The concept is that the browser should surround the text with the correct quote character(s) for the language. A web browser should also use the proper nested quation marks as well. In recent times, this is fairly well implemented on everything except Internet Explorer.

Here is a very simple behavior to add quotes to the Q tag in Internet Explorer:

  1. <public:attach event="oncontentready" onevent="init();" />
  2. <script>
  3. function init() {
  4.   var openQ = document.createTextNode(String.fromCharCode(8220));
  5.   var closeQ = document.createTextNode(String.fromCharCode(8221));
  6.   this.insertBefore(openQ,this.firstChild);
  7.   this.appendChild(closeQ);
  8. }
  9. </script>

To use this behavior, just save it in a file named fixQuotes.htc, and add a CSS reference to point to it. (The (Yoda) quote in the next paragraph provides a demonstration.) To see a slightly more complex behavior that can also deal with nested quote tags, take a look at my page on fixing quotes in Internet Explorer.

q { behavior: url('fixQuotes.htc'); }

Some have gone to the extreme that no quotes should be used in a page, and only the markup should be used. Others argue that it is pointless because, the text should have the same quotes as the language that it is written in, thus it is the responsibility of the author. Who is right? I don't know. I would rather investigate what else can be done with this tag. As Yoda would say, Do or do not, there is no try. Since the Q, quote tag, also supports the CITE attribute, like the BLOCKQUOTE tag then it seems that providing a similar hover, pop-up thingy would be a good idea. You know, let a visitor actually have an opportunity to see the source of the citation.

Resources



Sponsors:

About willCode4Beer