Garbage Burrito!

I was perusing the W3C HTML 4.0 spec, as I often do (JOKE!), and I ran across a number of tags that I had never heard of. Some are simple, yet others struck me as very useful. I can see how they would have been ignore in the days of yore, when tables and font tags where king. But now that we're drinking the CSS koolaid, I can see some good uses for these forgotten tags.

The first tag I found was the Definition List tag <dl>. It's meant to display a word, with it's definition indented under it.

Code:

<dl>
<dt>Scrumtralescent</dt>
<dd>Exceedingly excellent in all ways</dd>
</dl>


Output:

The first use that came to my mind was for forms.

Code:

<style>
  form dt { float: left; width: 150px; }
</style>
<form>
  <dl>
    <dt>Favorite Cartoon?</dt>
    <dd><input type="text" value="Futurama"></dd>
    <dt>Favorite Character?</dt>
    <dd><input type="text" value="Bender"></dd>
  </dl>
</form>

Output:

Of course the same thing can be done with a table, or labels and divs, but this is just an example.

Then I found a whole list of text modification tags that I'd never heard of.

<dfn> - Definition

<code> - Computer code

<samp> - Sample computer code

<kbd> - Keyboard text

<var> - Variable

<cite> - Citation

It makes sense that no one used these in the pre CSS days. Why use <dfn> when you have <i>? Now that you can easily redefine the formatting of these tags, they are great for semantic markup. Of course it's nothing you couldn't do with a <span class="dfn">, but it's fun to play around with. Here's an idea, use javascript to turn <dfn> tags into dictionary links.

Code:

<dfn>plebeian</dfn>
<script language="javascript">
<!--
  dfns = document.getElementsByTagName('dfn');
  for (i=0;i<dfns.length;i++) {
    dfn = dfns[i].innerHTML
    dfns[i].innerHTML = '<a xhref="http://dictionary.reference.com/browse/' + dfn + '">' + dfn + '</a>';
  }
-->
</script>

Two more that I found very interesting are the <ins> and <del> tags. They actually do very little, just underline and strikethrough respectively. But I think these could be put to good use in things like Wiki software. Maybe you use it for diffs, and have some javascript where when you mouseover the ins, it shows the dels, or sumpin like that.

Probably the most useful tags that I found are the <thead> and <tfoot>. I had heard of <tbody> but always thought it was useless until now. Using these three tags you can group rows of your table together, and use CSS to apply styles to the sub tags.

Code:

<style>
  thead td {
    background: orange;
  }
  tbody td {
    border: dashed 1px lightblue;
  }
  tfoot td {
    background: lightgreen;
  }
</style>
<table>
  <thead>
    <tr>
      <td>Fry</td>
      <td>Leela</td>
    </tr>
    <tr>
      <td>Bender</td>
      <td>Zoidberg</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><q>There's nothing wrong with anything.</q></td>
      <td><q>I'm back baby!.</q></td>
    </tr>
    <tr>
      <td><q>Hey, hey! We can all fight when we're drunk.</q></td>
      <td><q>Woo WooWoWooWoo Woo</q></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>He's got that brain thing</td>
      <td>Mutant Cyclops</td>
    </tr>
    <tr>
      <td>Beer Guzzling Robot</td>
      <td>A weird monster who smells like he eats garbage and does. </td>
    </tr>
  </tfoot>
</table>

Output:

Again you can accomplish the same thing using class attributes, however I think this is a bit more elegant.

All in all for me these tags have sparked my imagination, and made me think of new ways to use semantic markup. They are easy to discount, because they don't really give you functionality that you can't replicate in other ways. However it's opened my eyes to forgotten features that can have a newly found use in the modern web world.

And it gave me an excuse to make Zoidberg noises and run around like a crab.

Oh yeah, and if you've made it this far, you have to check out the ISINDEX tag, this one is just weird.