HTML tabindex Global Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

<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>

Result

Editor