links

**Marty Chambers** · Oct 27, 2009, 06:29

I want to link to another part of a page... what does the markup look like for this? You can tell, I'm still a newbie

**guido2004** · Oct 27, 2009, 06:34

http://www.w3schools.com/HTML/html_links.asp

Read the part about the 'name' attribute.

**AutisticCuckoo** · Oct 27, 2009, 07:07

Code HTML4Strict:

<a href="#foo">Link</a>
.
.
.
<h3 id="foo">Foo</h3>

**Marty Chambers** · Oct 27, 2009, 10:54

YEEEEEEEEE HAAAAAAAAAAAhhhh! Thanks guys. I looked around w3schools and couldn't find what I was looking for. But now it all makes sense.

**Stomme poes** · Oct 28, 2009, 05:18

Tommy, I'd love to use your method (and sometimes I still do) but how do you get around many browser's problems with moving the focus?? I can reliably get all browsers to move the visual focus correctly but for example in safari, the next Tab doesn't start from the new place (because the element with the id isn't focussable).

I've tried using this:

Code:

<a href="#foo">Skip to foo</a>
...
<h3><a id="foo" href="foo"></a>Foo</h3>

So that the true focus also goes to the new chunk of page, and keyboarding further starts at the new place like it should...
and being empty it shouldn't get accidentally clicked, and even if somehow it did get clicked, it doesn't go anywhere and doesn't bring the user back to the top of the page (like # would)
but
it looks goofy, might not be semantic really, AND
Opera won't do it if the anchor is empty. All the other browsers seem to do the desired behaviour though including Lynx.

**AutisticCuckoo** · Oct 28, 2009, 05:35

People who like/need keyboard navigation should use Opera. With Opera's spatial navigation this isn't an issue. If someone decides to use an inferior browser it's their problem.

I suppose you could try setting tabindex for the target element, but that opens another can o' worms. If you really need to cater to inferior browsers, you'll need something like this,

Code HTML4Strict:

<h3><a name="foo">Foo</a></h3>

**Stomme poes** · Oct 28, 2009, 05:56

I used to do that (but without "name" 'cause I don't use it) but of course that means a lot of styling for the anchor text so it doesn't look like anchor text. Tabindex I won't touch : )

If someone decides to use an inferior browser it's their problem.

I wish, but actually, it's my problem. : )

**RetroNetro** · Oct 28, 2009, 10:51

Originally Posted by AutisticCuckoo

If someone decides to use an inferior browser it's their problem.

Can we apply this to IE users and just build sites for all the other browsers?

**AutisticCuckoo** · Oct 28, 2009, 13:03

Originally Posted by BPartch

Can we apply this to IE users and just build sites for all the other browsers?

Probably not. But as Patrick Lauke (redux) says, some of the onus of accessibility is on the user.

**ralph.m** · Oct 28, 2009, 18:55

Ian Lloyd has this solution on http://reference.sitepoint.com/html/core-attributes/id:

Code:

<a href="#section3">Jump to section 3</a>
⋮
<h2><a href="#section3" name="section3"
    id="section3"></a>Section 3</h2>

Personally, though, I just use the id method now (post #3).

**Stomme poes** · Oct 29, 2009, 01:58

Ralph, that's what I posted, except without name...

and the only real problem was that Opera would not jump if the anchor was empty... is it that Opera will comply if there's a name attribute?? I assumed the reason it's not listed in the SP pages as an attribute either way was because XHTML was going to ditch it and use id for everyone. I forget what they were going to use name for instead.

Ideally one would only ever need a single token for an anchor, but if two are necessary to make things work I guess I'd do it.

**ralph.m** · Oct 29, 2009, 13:57

Yes, I'm not really sure, to be honest. I found that using just the #id seemed to work pretty well generally, so I ditched the workarounds. Perhaps I didn't check extensively enough!

**Stomme poes** · Oct 30, 2009, 02:22

Oh, #id works... visually.

But open up Safari and tab to your skip link... hit enter... then try hitting tab again to get to the next anchor you see. Instead, you'll be brought back up to where you had initially found the skip link.
This because while you were able to move the visual focus with #id, you didn't move the keyboard focus.

FF and I think it was IE did this fine, so it's the only way I did it for a long time, then Safari-for-Windows came out, and bleh, didn't do what I thought it would.

**ralph.m** · Oct 30, 2009, 05:04

I'd like to understand this better, but to be honest, I don't really have much of a grasp of tabbing. It never seems to work for me. Maybe it's a Mac thing. I keep meaning to read up on it. Nothing much ever happens when I tab through a page.

User Tag List

Thread: links

Thread Tools

Display

links

Bookmarks

Bookmarks

Posting Permissions