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