Setting the Tab Order for Links

Some browsers let users navigate through the links, image maps, and form elements with the Tab key. You can determine a custom tab order, to emphasize certain elements.

To set the tab order:

In the link's tag, type tabindex="n", where n is the number that sets the tab order.


  • To activate a link the visitor must tab to it and then press Enter.

  • The value for tabindex can be any number between 0 and 32767. Use a negative value to take a link out of the tab sequence altogether.

  • By default, the tab order depends on the order of the elements in the (X)HTML code. When you change the tab order, the lower-numbered elements are activated first, followed by higher-numbered ones.

  • Elements with the same tab index value are accessed in the order in which they appear in the (X)HTML document.

    Figure 6.20. This page begins with a set of links, which, while useful, don't have anything to do with this particular page. So that the first tab selects the first "real" link, I've assigned it the lowest tab index.

  • You can also assign tab order to client-side image maps and form elements. For more information, consult Creating a Client-Side Image Map on page 117 or Setting the Tab Order in a Form on page 277, respectively.

    Figure 6.21. When the visitor hits Tab the first time (OK, the ninth time, see the last tip), the Woody link is selected. If they hit Tab again, Cookie will be selected, and so on until Llumeta. At that point, a tab will bring them up to the Contents link.

  • Currently, browser windows have many elements vying for attention from the Tab key. The first time you hit Tab, you generally get to the Address box. The second Tab often brings you to the Search box. In IE 7, it took me 8 Tabs before I got to the page data, and then the link whose tabindex was the lowest got the focus.

HTML, XHTML, & CSS(c) Visual QuickStart Guide
HTML, XHTML, and CSS, Sixth Edition
ISBN: 0321430840
EAN: 2147483647
Year: 2004
Pages: 340

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: