I recently checked out the source code written by our in-house web designer for the main page of the Housing and Residence website. To my surprise she had used some tags that I initially didn’t believe was valid markup. I quickly realized how wrong I was, kicked my self for my ignorance and set off to learn all the HTML tags I was missing out on. There are quite a few tags in the HTML 4.01 standard developed by the W3C so really I shouldn’t have been too surprised that I didn’t know them all.

Just for fun here is a complete list of all the 81 HTML tags in the standard (not including those that are deprecated). A, ABBR, ACRONYM, ADDRESS, AREA, B, BASE, BDO, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIV, DL, DT, EM, FIELDSET, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, HEAD, HR, HTML, I, IFRAME, IMG, INPUT, INS, KBD, LABEL, LEGEND, LI, LINK, MAP, META, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PARAM, PRE, Q, SAMP, SCRIPT, SELECT, SMALL, SPAN, STRONG, STYLE, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, TT, UL, VAR. By show of hands how many people can say what each and every tag in that list is for? Probably a very select few of you and certainly not I. In this article I will cover the function of some of these tags with a code example for each. I plan on leaving the set of table tags, form tags and coding tags for other articles since there are so many.

ABBR

W3C: Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.)
The abbreviation tag is used to provide the expanded meaning of the abbreviation used in your web content. It is a very useful tag since it allows you to always use the abbreviation without wasting space on defining it. It also adds accessibility to your site since screen readers know exactly how to process it. One very unfortunate issue with this tag is that it is not supported by IE6 which simply ignores it.

<abbr title="World Wide Web">WWW</abbr>

ACRONYM

W3C: Indicates an acronym (e.g., WAC, radar, etc.)
The acronym tag is very similar to the abbreviation tag which causes quite a bit of confusion. The general consensus is that if the short form is spelled out letter by letter than it is an abbreviation otherwise use an acronym tag. Definition-wise an acronym IS an abbreviation and there is some speculation that the W3C will deprecate the acronym tag in a future HTML version. IE6 does support this tag.

<acronym title="What You See Is What You Get">WYSIWYG</acronym>

ADDRESS

W3C: …used by authors to supply contact information for a document…
The address tag is for semantic purposes. By default browsers will render the contained text in italics unless you style it with CSS but its primary purpose is to provide search engines and other tools with a better picture of how your content is laid out. Many people use the address tag to wrap their entire hCard and others use it only for physical addresses. There is also debate as to whether it is proper to put any contact info or address in the tag only that of the page maintainer/author.

<address class="vcard">
  <a class="url fn" href="http://adamhewgill.com/">Adam Hewgill</a>
  <div class="org">dev|sushi</div>
</address>

BDO

W3C: allows authors to turn off the bidirectional algorithm for selected fragments of text
I didn’t look much into bi-directional text since I don’t do any internationalization. The tag is an abbreviation of Bi-Directional Override and does just that. It overrides the dir property of parent tags for certain problem areas.

<p>
  <bdo dir="ltr">Some Text</bdo>
  <bdo dir="rtl">Some Other Text</bdo>
</p>

CITE

W3C: Contains a citation or a reference to other sources
The citation tag causes browsers to render the content in italics. This may or may not be the desired result that was intended. There is a very good discussion on the proper use of the cite tag at thescripts. The issues stem from the difference between print typography and semantic markup. Semantically it makes sense to use a cite tag when referencing external works but typographers only italicize citation names when the reference is to a book or magazine not a person.

<blockquote>
I've thought of an ending for my book -
“And he lived happily ever after… to the end of his days.”
</blockquote>
- <cite>Bilbo Baggins</cite>

DL, DT, DD

W3C: Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description
I’ve never really seen this in the wild and a quick Google search doesn’t do much to fix that. There may be some rendering weirdness with this tag but more than likely people just do definitions differently. The definition list would work well for a synopsis of definitions at the end of a document but that isn’t very convenient. Definitions work better spread out so that if your reading a document and you reach a word you don’t know you don’t have to scroll far to find it. (In my opinion anyway)

<dl>
  <dt>Water</dt><dd>fluid substance comprised of H2O molecules</dd>
  <dt>Ice</dt><dd>frozen water</dd>
</dl>

DEL, INS

W3C: used to markup sections of the document that have been inserted or deleted with respect to a different version of a document
These tags are very odd so to get the low down it is best to read the standard. You can include a citation for the reason for the change and the date of the change via properties. I suspect that these tags are really bad for the accessibility of your document although it may improve search hits (however I have no proof either way).

<p>I have <del>one</del><ins>two</ins> grey cat<ins>s</ins>.</p>

DFN

W3C: Indicates that this is the defining instance of the enclosed term
A good discussion of this tag is held on the juicy studio blog. The gist is that the content text is rendered in italics and the title attribute is provided as a tooltip on mouse-over.

<dfn title="unsolicited email">spam</dfn>

Q

W3C: short quotations (inline content) that don’t require paragraph breaks
For the most part the quote tag is just an inline version of the blockquote tag with a few differences worth noting when it comes to rendering. A blockquote is usually rendered as an indented block where the quote tag is rendered as a quoted inline length of text. The standard says that the quotes are not to be entered by the author and instead are rendered by the browser. Unfortunately IE6 doesn’t do this so you must work around the issue. There is a great article written by Stacey Cordoni at A List Apart that discusses a CSS based solution. Update: Roger Johansson adds his two cents about the Q tag issues and brings up some great points about accessibility and effecting the least number of people. I am now leaning toward the JavaScript solution, thanks Roger.

<p>I have always enjoyed the saying <q>Carpe Diem!</q>,
it says so much in so few words.</p>

SUB, SUP

W3C: Many scripts (e.g., French) require superscripts or subscripts for proper rendering. The SUB and SUP elements should be used to markup text in these cases
The subscript and superscript tags are very simple and do exactly as you would expect. Both tags render the contained text much smaller and the difference lies in the final placement. The superscript tag raises it off the base of the line and the subscript tag lowers it below. These are primarily used for footnote numbers or the “st, nd, rd, th” markers when referring to position.

<p>Itō Hirobumi was the 1<sup>st</sup> Prime Minister of Japan.<p>

There are several other tags that I don’t know but chances are I will cover them at some time in the future but for now here are the three groups. Form tags: FIELDSET, LEGEND and LABEL. Table tags: CAPTION, COL, COLGROUP, TH, TBODY, THEAD and TFOOT. Code display tags: CODE, SAMP, KBD, VAR. They all have their uses and for the most part are very infrequently used to markup their respective categories. If we start to expand our knowledge of the basic elements of the language we use we become better developers. If you want to start somewhere try adding a hCard to your site using Mike Jolley’s microformats article.