HTML tabindex Attribute

 Night Mode  Light Mode

 

Definition and Usage

The tabindex attribute is a global attribute. It specifies the tab order for an element.

Value :

Only integer can be set as a value of the tabindex attribute.

Example :

<h3 tabindex="2">This is a heading</h3>
 
<a href="https://www.webplover.com" tabindex="1">WebPlover</a>
 
<p tabindex="3">This is a paragraph</p>
Result

This is a heading

WebPlover

This is a paragraph

 

Example Explaining

In the above example we have used the tabindex attribute in <h3>, <a> and <p> tags.

  • In the <h3> tag, value of the tabindex attribute is 2.
  • In the <a> tag, value of the tabindex attribute is 1.
  • In the <p> tag, value of the tabindex attribute is 3.

Now by pressing the Tab key at first time (on this page), the <h3> element will be focused.

By pressing the Tab key at second time (on this page), the <a> element will be focused.

By pressing the Tab key at third time (on this page), the <p> element will be focused.

Note :

The elements will be focused in the sequence of numbers.

I.e. if we have three elements with the tabindex=”2″, tabindex=”5″ and tabindex=”7″ attributes.

Now by pressing the Tab key, tabindex=”2″ element will be focused first, then tabindex=”5″, then tabindex=”7″ with the sequence of numbers.

Here are a few tutorials for you to read next:

If you find this tutorial helpful, then please Subscribe to our YouTube Channel for video tutorials, and share this article on social media.

Was this post helpful?

Leave a Comment

Your email address will not be published. Required fields are marked *