472,965 Members | 2,522 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,965 software developers and data experts.

Good practice? Title attributes on lists of links

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.

Aug 13 '05 #1
3 2147
On Sat, 13 Aug 2005, Andy Dingley wrote:
We've all seen this structure many times:

<ul>
<li><a href="..." >Click here</a></li>
<li><a href="..." >Click here</a></li>
</ul>
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.
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 ?
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".
Place them on the <a> ? On the <li> ? Both ?


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?
Aug 13 '05 #2
Tim
On Sat, 13 Aug 2005 16:04:57 +0100, Andy Dingley sent:
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 ?


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.

Aug 14 '05 #3
Andy Dingley wrote:

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.


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/>.
Aug 14 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

24
by: matty | last post by:
Go away for a few days and you miss it all... A few opinions... Programming is a craft more than an art (software engineering, not black magic) and as such, is about writing code that works,...
6
by: Randell D. | last post by:
Folks, I know javascript has no local or server based access to the disk however I was wondering if one can read a remote page and take its html <TITLE> value... My guess is no but thought...
28
by: Atanas Boev | last post by:
I have a heading that I would like to link to site section, in the following context: <h1>Site Contents</h1> <h2>First Section</h2> <h2>Second Section</h2> <h2>Third Section</h2> I want...
10
by: Peter Jenkins | last post by:
How necessary are these? Just hoping to get some views on this - particularly from vision impaired users, those who use text browsers etc Regards Peter J
9
by: Sandeep Sharma | last post by:
For many years I have been following the convention of naming all class attributes with a leading underscore. This enables me to quickly identify the class attributes when I encounter them in the...
6
by: Olly | last post by:
I've found a basic script, however I also need to add alt and title attributes as well, how would I go about doing this? Here's the script I found: Thanks <script language="JavaScript"> <!--...
3
by: newbie | last post by:
I'm fairly comfy with vb6 and would like to step right into vb.net. Anyone have suggestions for a really good beginner program to write? Thanks!
150
by: tony | last post by:
If you have any PHP scripts which will not work in the current releases due to breaks in backwards compatibility then take a look at http://www.tonymarston.net/php-mysql/bc-is-everything.html and...
0
by: WebCM | last post by:
I hope you can spend some time and help me to select proper application design and programming issues. :) I'm making new version of CMS. I've been mostly theorizing about it for a recent months. ...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
0
tracyyun
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
3
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
0
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.