In this section, we will learn that the tabindex attribute is and how to use it in HTML.

HTML tabindex Attribute Definition and Usage

The tabindex attribute is used to set the tab order when users use the tab key on their keyboard to navigate an HTML document.

By default, when users use the tab key to navigate a web page, browsers set the focus on the top first element and after that, change the focus to those elements on lower levels as users start to use the tab-key to navigate.

But as mentioned before, with the help of the tabindex attribute, we can change this order to whatever order we like.

For example, we can set the order in a way that the last element in a document get the focus first and as users hit the tab-key, other elements in the middle of a page get the focus instead of the first element.

HTML tabindex Attribute Syntax

<element tabindex = “number”>

HTML tabindex Attribute Values

The value we set for this attribute is a number. The lowest number (starting from 1) means it should get the focus first and the next numbers (like 2,3,4 etc.) define the order for the next elements to get the focus afterward.

Example: using tabindex attribute in HTML

See the Pen using tabindex attribute in HTML by Omid Dehghan (@odchan1) on CodePen.