10 HTML tags you’ve probably forgotten or don’t know

We all do it. We get into a funk when designing applications, or we just take what we are given by our wizardy-like design interfaces. As such we get stuck in the same rut of using the same old design elements and styles and forget that there are a plethora of HTML/XHTML tags that we either have totally ignored, or just plain forgotten. We’ll here is a reminder and where you might be able to use them.

1 – ACRONYM

This is is useful for abbreviating an acronym but giving the user an easy mouse-over popup to explain this to a user. Being that I work primarily with IBM software, I have a minefield of acronyms I have to deal with and some may have multiple meanings. I use this technique a lot with HATS (which is used for dynamically converting mainframe or as/400 green screen apps into web pages), to give acronyms a popup, which can really improve usability and reduce training time for such applications. This tag is nearly identical to the ABBR tag. The attributes and events are identical and can be used interchangeably – just be sure to close the tag with the same one of course. Heck, I even used both tags in this definition!

2 – DL

DL is ‘Definition List’, and is use for defining a list of terms. the DT and DD tags are nested in between. It is more appropriate for say a list of “10 HTML tags you’ve probably forgotten or don’t know”, than using an ordered or unordered list (UL/LI or OL/LI). The elements are separately styleable. Think name/value pairs.

2 – DT

Just as mentioned above, this is nested in DL tags and is paired with the DD tag. This is the first part of the definition or the ‘name’ part.

3 – DD

You guess it – this is the ‘Data Definition’ part or the value part.

4 – BLOCKQUOTE

This by default in most browsers will indent and italicize the text. It is also easier than adding a div with a separate class attribute. This type of element is ideal for quoting persons in a conversation, or text from a referenced article. A similar tag is the Q tag, or ‘quote’ tag. This will insert quotation marks around your text, but otherwise offers you similar styling.

5 – CITE

This type of element is used for citing a reference. Don’t confuse it with the BLOCKQUOTE element. Here is an example of usage of the two elements:

80% of development costs are spent identifying and fixing defects. 
U.S. Commerce Department's National Institute of Science and Technology (NIST)

6 – CODE

This element has traditionally been used to style computer code. By default the browser renders it with a mono spaced font, which can be overiden with a style sheet.

7 – PRE

If you need to ensure indentations, and spacing, be sure to nest your CODE tag between a PRE tag, which PREserves white space in the browser rendering. It does not however allow you to paste in HTML code and render the brackets as you see it in your editor. You will still need to encode those brackets. The same applies to the CODE tag.

8 – LABEL

This tag should be used with the INPUT tag, and defines a caption or label for a text input field. When used with the next element you can almost entirely break away from traditional table based layouts.

9 – FIELDSET

The FIELDSET element is used to logically group elements together within a FORM. It also draws a box around the group. It also needs a LEGEND element to define the group, which is usually the first child element. The following is an example of using FIELDSET, LEGEND, LABEL, and INPUT altogether:

Your Info:

Name:
Name: Email:
Name: Date of birth:

10 – FONT

This is a trick one. If you have forgotten this tag, give yourself a pat on the back. If you are still using it, give yourself a good kick. This tag has been deprecated and should NEVER be used today! Some tools still spit out the FONT tag, along with several other deprecated tags such as I, B, S, and CENTER. These tags override any and all Cascading Style Sheet elements, and cannot be properly styled themselves. You would better served by surrounding the affected text with a STYLE tag, or a SPAN tag with a style attribute. Note too that depending upon the text, you could use and separate your elements with CITE, BLOCKQUOTE, SPAN, P, H1-H6, VAR, CODE, STRONG, or EM elements, which are more easily styled using an external style sheet.

Take a look at the source above to see how the examples were written. The list above is a DL, with nested DT and DD tags.