12 HTML Tags You May Not Know (Or May Have Forgotten)

For those of you expecting cynicism, this is a rare non-cynical, technical post. You can click away now if you like.

Sometimes when I get too caught up in designing and developing, I start going a little crazy with spans and divs. Sometimes I'll think it's easier to add some CSS styling to a class, then add the class to a span (for inline text, of course), and be on my way. However, there are plenty of proper semantic tags in HTML 4.01 / XHTML 1.0 that can do a lot of this for you. Additionally, it would be best to, for example, place sample code between <code></code> tags, rather than just throwing the sample code in a styled div, paragraph or span. Even if you plan on further styling these elements (maybe, for example, making your code sample green and bold), it still makes semantic sense to utilize the proper tags. This will allow screen readers and other utilities to properly understand the proper usage and reason for the text.

Here are some lesser-known and lesser-used valid, non-deprecated (X)HTML tags that may be helpful the next time you're developing a website. I checked out the tags with Firefox 2.0, Internet Explorer 7, Mozilla 1.7, Opera 9 and Netscape 8.1. The results are described.

Computer Code: <code>, <samp>, <tt>, <kbd> and <var>

The <code>, <samp>, <tt>, <kbd> and <var> tags all help the web developer display data as it may appear in a coding environment or console, or simply to visually specify that the text in question is actually a snippet of code or data entry. The first four tags (code, samp, tt and kbd) rendered text in the default monotype font for the browser (Courier New, in most cases). The variable tag rendered italicized, in the default serif font.

  • code
  • sample text
  • teletype text
  • keyboard input
  • variable declaration

Editing: <del> and <ins>

You may not find these very useful, but I wanted to bring them to light because these tags are two that I never knew existed. If you are creating a website in which you need to show revisions to some of your content, one way would be to use the inserted and deleted tags. Much like enabling "track changes" in a Microsoft Word document, these tags indicate changes made to your text. Additionally, it gives you a quick way to strike-through or underline text, instead of using the deprecated <u> and <s> tags. However, my first suggestion would be to use CSS if all you want is an underline or strike-through effect, because underlining a word by utilizing the insert tag, for example, is not semantically correct. You didn't really "insert" the text, you just wanted it underlined. For this, use text-decoration: underline; in your stylesheet.

  • deleted text
  • inserted text

Give Credit Where Credit Is Due: <q>, <cite> and <dfn>

The <q> tag is under-utilized by Internet Explorer. While it exists to define a short quotation (use <blockquote></blockquote> for longer quotations), Internet Explorer does not (yet) render this the way the other browsers tested do. In all other browsers, the quote tag placed quotation marks around the embedded text. In Internet Explorer, the text is as it would appear if not embedded within any tag. Take a look at the text below in different browsers.

  • This is a short quotation.

The <cite> tag is used to identify a cited source. In all browsers tested, this simply rendered as italicized text in the default serif font.

  • This is my cited source.

To indicate that a word or phrase is a definition of something, use the <dfn> tag. In all browsers tested, just like the <cite> tag, this simply rendered as italicized text in the default serif font.

  • This is some definition.

Now, you might be saying to yourself: this seems kind of silly; if I want italics I'll just use <em>. Very true. Again, however, screen readers and alternative browsers are more plentiful than you may think, so any time you can properly identify the content of your website with proper tags, you should do so.

Abbreviated Words and Acronyms: <abbr> and <acronym>

Are you ever on a technical site, and you come across a two-, three- or four-letter acronym with a delicate dotted underline? If you are, I can tell you two things: 1) you're probably not using Internet Explorer, and 2) the author of the site you're reading is using an <abbr> or <acronym> tag. When given a title attribute, these tags help you provide the full textual meaning of an acronym, or the complete word that has been abbreviated (mouse-over "SCUBA" or "Inc." for examples). Internet Explorer does not style these tags in any way. In the other browsers I tested, a faint, dotted underline was present under the abbreviated (or acronymed) word.