September 24, 2006

Uncommon XHTML Tags, Part 7

The <label> <label> tag. Maybe this is not as uncommon as some other tags, but I was unaware of this tag for a while. This tag is probably most commonly used for radio buttons and helps with website accessibility and usability.

Use this tag to label your radio buttons. When this happens, the user can click on the text for that radio button to select it; the user does not have to select the radio button itself.

Example:
<p>What is your favorite color?</p>
<input type="radio" name="color" id="blue" />
<label for="blue">Blue</label>
<br />
<input type="radio" name="color" id="yellow" />
<label for="yellow">Blue, no yellow ahhhhhhh!</label>

What is your favorite color?









Yes, I must have Monty Python's Quest for the Holy Grail on the mind.

September 10, 2006

Uncommon XHTML Tags, Part 6

There are two tags I learned about for using with forms but never really knew they existed - <fieldset> <fieldset> and <legend> </legend>. They would be used for grouping fields within a form together - the fields may be street, city, state, and zipcode and would be contained within the fieldset tag. The legend tag would then contain text reading "Address". This resulted in those fields being surrounded by one big box with Address being in the upper-left corner of the box. I had seen it done before, but never gave it a second thought.

Fieldset and legend need not be limited to forms, however. It could be used to contain a set of instructions or an error message, like so:

<fieldset>
<legend>Error</legend>
This page no longer exists. If you believe this is in error, please contact the webmaster.
</fieldset>

becomes:


Error
This page no longer exists. If you believe this is in error, please contact the webmaster.

September 3, 2006

Uncommon XHTML Tags, Part 5

Definitions, definitions, definitions! As mentioned in my previous XHTML post, <dfn> </dfn> is the definition term tag. Using the title attribute will give you the text assigned to the attribute as a little message when you hover over the text contained within the definition term tag. Use it when you are mentioning a term for the first time in a web page.

<dfn title="An online diary">blog</dfn> in use:
blog

Then there's the definition list (<dl> </dl>), term (here it's <dt> </dt>, not to be confused with <dfn> </dfn>), and description (<dd> </dd>). You'll want to use this you're listing terms and their definitions in one place. The definition list works like the ordered list (<ol> </ol>) and unordered list (<ul> </ul>).

<dl>
<dt>blog</dt>
<dd>An online diary</dd>
<dt>Reiki</dt>
<dd>A system of hands-on touching based on the belief that such touching by an experienced practitioner produces beneficial effects by strengthening and normalizing certain vital energy fields held to exist within the body</dd>
</dl>

becomes


blog

An online diary

Reiki

A system of hands-on touching based on the belief that such touching by an experienced practitioner produces beneficial effects by strengthening and normalizing certain vital energy fields held to exist within the body