- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - tabindex Attribute
HTML tabindex is a global attribute that allows developers to make HTML elements focusable or prevent them from being sequentially focusable by pressing tab key.
This tag accepts integer values and returns various results depending on the value of the number. A negative value such as tabindex = "-1" means that the element is not reachable via sequential keyboard navigation. Positive values indicate that the element should be focusable in sequential keyboard navigation, with the value of the number determining the element's order.
Syntax
<element tabindex = "" >
Applies On
Since tabindex is a global attribute in HTML, all the tags in HTML support tabindex attribute.
Examples of HTML tabindex Attribute
Below examples will illustrate the HTML tabindex attribute, where and how we should use this attribute!
Navigate through div tags using tabindex
In the following example, let’s see the usage of the tabindex attribute in the HTML document. This code defines tabindex for navigating through various tags like input and div.
<!DOCTYPE html> <html> <head> <style> div:focus { font-weight: bold; } </style> </head> <body> <p>Click anywhere in this output screen and press tab to navigate.</p> <label>First in tab order: <input type="text"> </label> <div tabindex="0"> Tabbable due to tabindex. </div> <div> Not tabbable: no tabindex. </div> <label>Third in tab order: <input type="text"> </label> </body> </html>
Positive tabindex Values
Considering the following example, we are demonstrating a positive value for the tabindex attribute. With its order defined by the value of the number. That is, tabindex="2" is focused before tabindex="3" and after tabindex="1".
<!DOCTYPE html> <html> <head> <style> p:focus { font-weight: bold; } </style> </head> <body> <h2>Click anywhere in this page, then try pressing tab key.</h2> <p tabindex="1"> First in tab order </p> <p tabindex="2"> Second in tab order </p> <p tabindex="3"> Third in tab order </p> </body> </html>
Negative value for tabindex
Let's look at the following example, we are using the negative value of the tabindex attribute. If we pass the negative value, the element is not reachable via sequential keyboard navigation.
<!DOCTYPE html> <html> <head> <style> div:focus { font-weight: bold; } </style> </head> <body> <h2>Click anywhere in this page, then try tabbing through the elements.</h2> <div tabindex="-1"> tabindex with -1 value! </div> <div tabindex="2"> tabindex with 2 value! </div> <div tabindex="0"> tabindex with 0 value! </div> <div tabindex="-2"> tabindex with -2 value! </div> </body> </html>
Supported Browsers
Attribute | |||||
---|---|---|---|---|---|
tabindex | Yes | Yes | Yes | Yes | Yes |
To Continue Learning Please Login
Login with Google