Welcome to WebmasterWorld Guest from

Forum Moderators: ergophobe

Message Too Old, No Replies

Oft-forgotten HTML Elements

7:46 am on Oct 20, 2006 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

This post will not discuss table related elements (such as CAPTION, COL, COLGROUP, TBODY, TFOOT, and THEAD) as these have been discussed extensively in a previous Accessible Tables [webmasterworld.com] post.

Sometimes it truly surprises me to realize how many key HTML elements are virtually unheard of in the business. Due to the caliber of these elements, you would think that every HTML coder would die to use them. Yet I continue to see misused SPAN elements styled to look like something they are not. From an accessibility perspective, little else can kill accessibility as effectively. "Hmm, I want a header. Let me put <B> tags around the text and wrap to the next line with a break." Yeah, right.

So, for everyone's enlightenment, here follows a list of oft-forgotten HTML elements and what they do. You should have no excuse for not using them whenever appropriate, whether targeting an audience where accessibility is an issue or not.

Abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.)
Example use:

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

An acronym (e.g. radar, NATO, etc.)
Example use:

<acronym title="North Atlantic Treaty Organisation">NATO</acronym>

Address and/or contact information
Example use:

<address>John Doe, jdoe@example.com</address>

Long quotation, typically a whole paragraph or more
Example use:

<blockquote cite="http://www.lipsum.com"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></blockquote>

Example use:

As <cite>Harry S. Truman</cite> said, <q lang="en-us">The buck stops here.</q>

Computer code fragment
Example use:

<code>$foo = "bar";</code>

Instance definition
Example use:

<dfn>HTML stands for Hypertext Markup Language</dfn>.

<dl>, <dt>, <dd>
Definition list, definition term, definition description
Example use:

<dd>Young excitable person who may mature into a <em>Nerd</em> or <em>Geek</em>.</dd>
<dd>A clever programmer.</dd>
<dd>Technically bright but socially inept person.</dd>

Example use:
<dd>A point equidistant from all points on the surface of a sphere.</dd>
<dd>In some field sports, the player who holds the middle position on the field, court, or forward line.</dd>

Example use:
<dd>How are you doing?</dd>
<dd>Great, thanks!</dd>
<dd>Glad to hear.</dd>
<dd>You smell funny.</dd>

<em>, <strong>
Emphasis, Strong emphasis
Example use:

I didn't say <em>funny</em>. I said <em>great</em>.

Example use:
I would <strong>never</strong> say that you smell <em>funny</em>.

<fieldset>, <legend>
Form control group, Fieldset legend (title)
Example use:

<legend>Address Information</legend>

Heading (Do not determine which heading to use based on the resulting text size. Heading use should indicate level, beginning with <h1> for the first and most important header on the page ... continuing with subsection headers in numerical order. Grouping with divs is preferable.)
Example use:

<div class="section">
<h1>Forest elephants</h1>
<p>In this section, we discuss the lesser known forest elephants.
<div class="subsection">
<p>Forest elephants live in trees, most commonly in leafy trees.

Inserted content
Example use:

It has been said about forest elephants that they <q>most commonly <ins>live</ins> in leafy trees.</q>

Text to be entered by user
Example use:

You can reload this page by pressing <kbd>F5</kbd>.

Form field label text
Example use:

<input type="radio" name="color" value="red" id="colorred"> <label for="colorred">Red</label>
<input type="radio" name="color" value="blue" id="colorblue"> <label for="colorblue">Blue</label>

Alternate content for non script-based rendering
Example use:

<script type="text/javascript">
<p><a href="info.html">Additional information</a>.</p>

Option group
Example use:

<select name="shipping">
<optgroup label="UPS">
<option value="ups_std">UPS Standard</option>
<option value="ups_exp">UPS Overnight</option>
<optgroup label="FedEx">
<option value="fdx_std">FedEx Standard</option>
<option value="fdx_exp">FedEx Overnight</option>

Short inline quotation
Example use:

It has been said about forest elephants that they <q cite="http://www.example.com">live in trees.</q>

Sample (program output, scripts, etc.)
Example use:

Typing <kbd>0215</kbd> on the numeric keypad while holding down the <kbd>Alt</kbd> key yields <samp></samp>.

Teletype or monospaced text
Example use:

A typical DOS prompt displays <tt>C:\</tt>.

Instance of a variable or program argument
Example use:

The <var>$_SERVER['REMOTE_ADDR']</var> variable contains an <abbr title="Internet Protocol">IP</abbr> address.

A complete list of all HTML elements can be found at [w3.org...]

8:32 pm on Oct 20, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Thanks, DrDoc - I don't have much to say in this forum, but I always learn something from it.

The one thing I don't understand from your examples is using definition elements with lines of dialogue. It looks as if you're using <dt> to designate who's speaking, and <dd> for the dialogue. I've never thought of dialogue in terms of "definition description" or the speaker as a "definition term". Could you say a little more about that? I assume it's just when the dialogue is set up as in a script, rather than as in a regular text, right? Thanks. (I use a lot of dialogue on one of my sites, but it's only rarely in script form.)

8:48 pm on Oct 20, 2006 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

You are absolutely correct. A perfect example of an instance where a dialog can successfully be marked up using a Definition List is an interview, or an otherwise longer ongoing dialog between two or more people.

It is interesting to note that this is indeed one of the intended uses for this element.

HTML 4.01 Spec [w3.org]

Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.
10:29 pm on Oct 24, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Thanks - I can see how it could be very helpful in interviews.