HTML tabindex Global Attribute

Description

The tabindex global attribute allows developers to control the tab order of elements in an HTML document. This means that they can choose the order in which elements are focused when a user presses the Tab key.

The tabindex attribute can take on an integer value. If the value is zero or positive, the element will be focusable and will be included in the tab order. If the value is negative, the element will be focusable, but will not be included in the tab order.

The tabindex attribute can be used on any HTML element, even those that are not normally focusable, such as paragraphs and headings. This can be useful for creating custom tab orders for forms or other interactive elements.

However, it is important to use the tabindex attribute carefully. If used incorrectly, it can make a web page difficult or impossible to navigate for users who are using a keyboard.

Here are some tips for using the tabindex attribute:

  • Use the tabindex attribute to control the tab order of interactive elements, such as form fields, buttons, and links.
  • Do not use the tabindex attribute to make elements focusable that are not normally focusable, such as paragraphs and headings.
  • Avoid using the tabindex attribute to change the default tab order of elements.
  • If you must use the tabindex attribute to change the default tab order, make sure that the new tab order is logical and easy to understand.

Here is an example of how to use the tabindex attribute to control the tab order of a form:

<form>
  <input type="text" tabindex="1" placeholder="Name">
  <input type="email" tabindex="2" placeholder="Email">
  <input type="submit" tabindex="3" value="Submit">
</form>

In this example, the name field will be focused first when the user presses the Tab key. The email field will be focused next, and then the submit button.

By using the tabindex attribute, developers can create custom tab orders for their web pages that make them easier to navigate for users who are using a keyboard.

Syntax

<element tabindex="number">

Values

  • numberThe number determines the tab order of the element (the order starts with 1).

Example

<p>Using the <kbd>Tab</kbd> button, select the required link:</p> 
<a href="#" tabindex="3">Link # 1</a> <br>
<a href="#" tabindex="2">Link # 2</a> <br>
<a href="#" tabindex="5">Link # 3</a> <br>
<a href="#" tabindex="1">Link # 4</a> <br>
<a href="#" tabindex="4">Link # 5</a>

Browser Support

The following table will show you the current browser support for the HTML tabindex Global Attribute.

Desktop
Edge Chrome Firefox Opera Safari
YesYesYesYesYes
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
YesYesYesYesYesYes

Last updated by CSSPortal on: 14th October 2023