Rowan Malin said:
I'd like to know what the
'correct' or 'preferred' approach is (if any) for defining anchor
tags whose contents are solely abbreviations or accronyms.
For
example, should I write:
<a href="x"><acronym>HTML</acronym></a>
or:
<acronym><a href="x">HTML</a></acronym>
?
Both are valid, and there is no known difference in their effects, except
when style sheets assign properties to <acronym> in a manner that may
conflict with the default or styled presentation of <a>.
For example, suppose a user style sheet sets
acronym { background: yellow; color: purple; }
(which _might_ be sensible, for highlighting purposes
In the first case, the background color for <acronym> hides the link
underline and makes the link text purple, irrespectively of the state of
the link, since it's primarily <acronym> text and takes its color
accordingly.
For such reasons, I have usually recommended that when <a href> elements
are nested with other text level markup, the <a href> markup is
(BTW - I don't want to get into a fight over what is or is not an
acronym! Use <abbr> if you prefer.)
Well, if it is unclear whether HTML is an acronym or an abbreviation,
what's the point of using <acronym> or <abbr> markup for it? That is,
what is the expected _gain_ from using the markup? For example,
do you wish to hear a speech browser try to pronounce "HTML" as a word?
The "fight" _is_ the most relevant question. And since there is no
consensus, there is normally no reason to use either markup, except
perhaps in specialized cases (e.g., a special application in an intranet
where you can explain to users what the dotted lines mean, etc.). More on
this:
http://www.cs.tut.fi/~jkorpela/html/abbr.html
On a related note (and again, forgive me if this should be asked
elsewhere), I notice that some browsers default-render the above with
*both* underline and under-dottedline which, in my opinion, looks
odd.
To the extent that the dotted underline is useful at all (which I doubt),
it's useful also when there is a link underline. If it acts as a signal
saying "here's an abbreviation/acronym for which some explanation is
available if you put the cursor on it", then this would say just the same
thing even when there's another presentational idiom saying "here's a
link".
However, note that if both elements have a title attribute, browsers seem
to use just one of those attributes. For example, if you have
<acronym title="HyperText Markup Language">
<a href="
http://www.w3.org/Markup" title=
"HyperText Markup Language (HTML) Home Page - W3C's HTML Activity">
HTML</a></acronym>
then browsers that I tested now show the title of <a href> as tooltip and
ignore the title of <acronym>. That is, they use the title of the
innermost element. But I remember vaguely having seen the opposite
behavior too. Anyway, there's usually no point in using title attributes
that way, since it's better that the author decides which attribute is
more essential. But if e.g. some HTML-generating software creates markup
that may have nested elements with title attributes, it is generally best
to make it put <a href> innermost for this reason too - the title of
<a href> is usually more important and useful than other title
attributes.
What would be the suggestions of the group regarding the
preferred suggested rendering (using CSS, of course)?
Technically, the dotted underline is a bottom border in CSS terms, so you
can suggest suppressing it by using e.g.
acronym.with-link { border-bottom: none; }
and <acronym class="with-link" ...><a href=...>...</a></acronym>. There's
currently no selector in CSS that would mean 'acronym elements containing
a elements'. Contextual selectors work the other way around. If you used
<a href=...><acronym ...>...</acronym></a>
(despite the arguments above), then you could use simply
a:link acronym, a:visited acronym { border-bottom: none; }
