We've all seen this structure many times:

<ul>
<li><a href="..." >Click here</a></li>
<li><a href="..." >Click here</a></li>
</ul>

Now it's obvious good practice to have sensible link texts, and also
sensible use of title attributes on either the<a> or <li> elements.
What's a good rule of thumb for these attributes ?

Place them on the <a> ? On the <li> ? Both ? What should be in this
text, and would this vary between the two locations?


Comments appreciated.

On Sat, 13 Aug 2005, Andy Dingley wrote:
[color=blue]
> We've all seen this structure many times:
>
> <ul>
> <li><a href="..." >Click here</a></li>
> <li><a href="..." >Click here</a></li>
> </ul>[/color]

For "seen" read "scoffed at". Seen all too often on commercial web
pages, but no author who has the slightest sensitivity to how the web
works and what the user needs would ever do that.
[color=blue]
> Now it's obvious good practice to have sensible link texts, and also
> sensible use of title attributes on either the<a> or <li> elements.
> What's a good rule of thumb for these attributes ?[/color]

If I might say so, the choice of the link text, which you've so
quickly skipped over, is quite a bit more important than that, and
deserves more consideration. See also
http://www.w3.org/Provider/Style/NoMechanics.html

The link text should say enough, in context, about what's found at the
target of the link for the user to be able to decide whether they want
to go there. However, it needs to make sense only within the context
of the current page: for example it will appear on the "summary of
links on this page" which some browsers (MSIE5 extension, Lynx,
Mozilla's "View> Page Info> Links", etc.) can optionally display to
the user. But tell them what it is - "don't mention the mechanics".

However, you ask about title attributes. In theory, the title
attribute says more about *the element to which it's applied*.
Clearly, if you apply title= to the <a> element then it should say
more about the web page to which the link would take you. Note that
the target page (if it's HTML) will have a "title" *element" in its
head, telling what it is, and this is what's normally used by browsers
for titling a bookmark, and so on. So I'd say that it's a good move
to:

1. choose a good title *element* for the target web page, if it's
yours: it should make sense *out of context*, since it'll often be
seen out of its context (in search engine results, in bookmark titles,
and so on)

2. the title *attribute* for any "a href" which leads to the page
could very well be the same as, or closely based on, the target page's
own title *element".
[color=blue]
> Place them on the <a> ? On the <li> ? Both ?[/color]

If the title attribute means anything for the <li> as opposed to the
<a>, then, in theory, it should be saying something more about the
list element itself, as opposed to saying more about where the <a
href=> link goes.

There might be situations where that makes some kind of sense.

(I can't think of a practical example right now, but I've seen
situations where an <a href=> was inside of some other structure than
<li>, and there seemed to be good reasons for applying title
attributes to both of them.)

But in practical terms - considering the use of the title= attribute
to make popups in typical browsers - with any browser that I've ever
tried, if some outer element contails solely and exclusively an <a
href=> element, and there's a title= attribute on both of them, only
one of them will ever be seen. So, if this distinction matters, make
sure that the outer element contains some text which is outside of the
scope of the <a href=> element. Presumably you have some convention
for hinting to the user that a title (popup) is available - a modest
dotted underscore seems to have become quite popular, though probably
unnecessary on the <a href=> itself.

I don't see any justification for duplicating a properly chosen title=
of the <a href=> onto some other element where it doesn't really
belong. If it's under your control, omit the title= attribute of the
outer structure if it doesn't need one, that's all it takes.

IMHO and YMMV, of course. Did I say anything dreadfully contentious?

On Sat, 13 Aug 2005 16:04:57 +0100, Andy Dingley sent:
[color=blue]
> We've all seen this structure many times:
>
> <ul>
> <li><a href="..." >Click here</a></li>
> <li><a href="..." >Click here</a></li>
> </ul>
>
> Now it's obvious good practice to have sensible link texts, and also
> sensible use of title attributes on either the<a> or <li> elements.
> What's a good rule of thumb for these attributes ?[/color]

If the title is for the link, I'd put it in the link. It seems to me that
it's *most* applicable, there.

Avoid the click here nonsense, though. Use the titles for additional
stuff to make something more clearer when you can't fit it into the normal
link text, but the link text would probably be fairly obvious, anyway.
(I'm thinking of tersely worded menus squeezed into tight places.)

e.g. <a href="contact.html" title="our contact details">contact</a>

--
If you insist on e-mailing me, use the reply-to address (it's real but
temporary). But please reply to the group, like you're supposed to.

This message was sent without a virus, please destroy some files yourself.

Andy Dingley wrote:[color=blue]
>
> We've all seen this structure many times:
>
> <ul>
> <li><a href="..." >Click here</a></li>
> <li><a href="..." >Click here</a></li>
> </ul>
>
> Now it's obvious good practice to have sensible link texts, and also
> sensible use of title attributes on either the<a> or <li> elements.
> What's a good rule of thumb for these attributes ?
>
> Place them on the <a> ? On the <li> ? Both ? What should be in this
> text, and would this vary between the two locations?
>
> Comments appreciated.[/color]

See <URL:http://www.w3.org/QA/Tips/noClickHere>.

As for the title attribute (not to be confused with the mandatory
TITLE element in the HEAD section), it should be in the anchor
element (<a> tag) and not the list element (<li> tag). If the
attribute is only in the <a> tag, the related "tooltip" will show
only when the cursor is over the link; this is the correct
presentation because the title applies to the link. If the
attribute is in the <li> tag, the related "tooltip" will show when
the cursor is over any part of the list element, even outside of
the link. While in your case, the anchor and list elements might
have the same visible text (the same cursor space), this will not
always be true.

When considering maintenance of a Web site, there is another good
reason to put the title attribute on the <a> tag. If you later
reformat the page to eliminate the list elements or if you copy the
link for use elsewhere, you won't then have to insert the title
attribute into the <a> tag. It will already be there.

--

David E. Ross
<URL:http://www.rossde.com/>

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <URL:http://www.mozilla.org/>.