Bonnie,
There are a couple ways to approach this. If the word you're defining is an
abbreviation or acronym, to be syntactically correct, you can use whichever
of the following is appropriate:
- <abbr title="Text that pops up">defined abbreviation</abbr>
- <acronym title="Text that pops up">defined acronym</acronym>
For info on which is best to use when:
- abbr -
http://www.htmlhelp.com/reference/html40/phrase/abbr.html
- acronym -
http://www.htmlhelp.com/reference/html40/phrase/acronym.html
But if you're talking about a phrase or regular word, you should probably
just use a <span>, for example:
- <span title="Text that pops up">defined word or phrase</span>
In all of the cases, note that within the first tag I've added title="Text
that pops up." The value after the title= is what will appear when your
visitor points their cursor at your word or phrase.
I'd did a test in Internet Explorer v. 6 and it doesn't seem to even
acknowledge the <abbr> tag and styling the link (see below) doesn't appear
to work on <acronym>. You're probably best to ignore both and just use
<span> for now. Yes, IE _isn't_ the only browser on the planet, but the
majority of your visitors probably use it.
With any of the three suggestions, the described word isn't going to stand
out on the page which means your visitors won't know to point to it in the
first place. It appears the convention for highlighting definition words is
to use a dotted underline. That makes it kind of look like a hyperlink so
visitors may point to it with their mouse, but because it looks different,
they shouldn't expect it to actually _be_ a link. Your best approach for
doing this is using Cascading Style Sheets (CSS). On the page that you want
to add this functionality, include the following in the head of your page
(between the <head> and </head> tags):
<style type="text/css">
span {
border-bottom-width: 1px;
border-bottom-style: dotted;
/* change blue to fit your site's style */
border-bottom-color: blue;
/* change the cursor style */
cursor: help;
}
</style>
If you already use the <span> tag on your pages, you'll need to add a more
specific class designation or else all of the <span> tags will get the
underline even if they don't have a definition. To do that you should
change the definition spans by adding a class to them, for example:
<span class="helptip" title="Pop up text">defined text</span>
Then you would modify the CSS code I've shown above to:
<style type="text/css">
span.helptip {
border-bottom-width: 1px;
border-bottom-style: dotted;
/* change blue to fit your site's style */
border-bottom-color: blue;
/* change the cursor style */
cursor: help;
}
</style>
What this says is, "Apply this style to every <span> tag if it has a
class="helptip".
For more on CSS, check out:
http://www.w3schools.com/css/
http://www.mako4css.com
Good luck!
