Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create the tabbing order of an element in HTML?
The tabindex attribute in HTML controls the sequential keyboard navigation order of elements, typically using the TAB key. It determines which elements can receive focus and in what order users will navigate through them when using keyboard navigation.
Syntax
Following is the syntax for the tabindex attribute −
<element>Content</element>
The tabindex value can be −
Positive integer (1, 2, 3, ...) − Creates a custom tab order. Elements are focused in ascending numerical order before any elements with
tabindex="0".0 (zero) − Includes the element in the natural tab order based on its position in the DOM.
Negative integer (-1) − Removes the element from the tab order but allows programmatic focus via JavaScript.
Basic Navigation Example
Following example demonstrates custom tab order using positive tabindex values −
<!DOCTYPE html>
<html>
<head>
<title>Tabindex Navigation</title>
<style>
body { text-align: center; font-family: Arial, sans-serif; padding: 20px; }
h1 { color: green; }
a { text-decoration: none; display: block; margin: 10px 0; padding: 10px;
background-color: #f0f0f0; border: 1px solid #ccc; }
a:focus { background-color: #e0e0ff; outline: 2px solid blue; }
</style>
</head>
<body>
<h1>Press TAB to Navigate</h1>
<a href="https://www.tutorialspoint.com/">TUTORIALSPOINT (Second)</a>
<a href="https://www.youtube.com/">YOUTUBE (First)</a>
<a href="https://www.google.com/">GOOGLE (Third)</a>
</body>
</html>
The tab navigation order will be YouTube (1) ? TutorialsPoint (2) ? Google (3), regardless of their DOM order −
Press TAB to Navigate [TUTORIALSPOINT (Second)] [YOUTUBE (First)] [GOOGLE (Third)] Tab order: YOUTUBE ? TUTORIALSPOINT ? GOOGLE
Using and
Following example shows different tabindex values and their behavior −
<!DOCTYPE html>
<html>
<head>
<title>Tabindex Values</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
div { margin: 10px 0; padding: 10px; border: 1px solid #ccc; }
div:focus { background-color: #e0e0ff; outline: 2px solid blue; }
button { margin: 5px; padding: 8px 15px; }
</style>
</head>
<body>
<h2>Tabindex Demonstration</h2>
<div>Focusable - (First in tab order)</div>
<div>Focusable - (Natural order)</div>
<div id="hidden">Not in tab order - (Focus via JS only)</div>
<div>Not focusable - no tabindex</div>
<button onclick="focusHidden()">Focus Hidden Element</button>
<script>
function focusHidden() {
document.getElementById('hidden').focus();
}
// Auto-focus the first element on page load
document.getElementsByTagName('div')[0].focus();
</script>
<p><b>Note:</b> Press TAB to navigate. Click the button to focus the hidden element.</p>
</body>
</html>
The tab order will be: ? ? button. The element is skipped but can be focused programmatically −
Tabindex Demonstration [Focusable - (First in tab order)] [Focusable - (Natural order)] [Not in tab order - (Focus via JS only)] [Not focusable - no tabindex] [Focus Hidden Element] Note: Press TAB to navigate. Click the button to focus the hidden element.
Form Navigation with Tabindex
Following example demonstrates using tabindex in forms to create a logical navigation flow −
<!DOCTYPE html>
<html>
<head>
<title>Form Tabindex</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
table { border-collapse: collapse; margin: 20px 0; }
th, td { border: 1px solid #ccc; padding: 10px; text-align: left; }
input[type="text"] { padding: 5px; width: 200px; }
input:focus { background-color: #e0e0ff; outline: 2px solid blue; }
th { background-color: #f0f0f0; }
</style>
</head>
<body>
<form action="#" method="post">
<table>
<caption><strong>User Registration Form</strong></caption>
<tr>
<th>Field</th>
<th>Personal Info</th>
<th>Contact Info</th>
</tr>
<tr>
<th>First Name</th>
<td><input type="text" name="firstname" placeholder="Enter first name"></td>
<td><input type="text" name="email" placeholder="Enter email"></td>
</tr>
<tr>
<th>Last Name</th>
<td><input type="text" name="lastname" placeholder="Enter last name"></td>
<td><input type="text" name="phone" placeholder="Enter phone"></td>
</tr>
</table>
<button type="submit">Submit</button>
</form>
<p><strong>Tab Order:</strong> First Name ? Last Name ? Email ? Phone ? Submit Button</p>
</body>
</html>
The form creates a logical tab sequence: First Name (1) ? Last Name (2) ? Email (3) ? Phone (4) ? Submit (5) −
User Registration Form Field | Personal Info | Contact Info First Name | [Enter first name] | [Enter email] Last Name | [Enter last name] | [Enter phone] [Submit] Tab Order: First Name ? Last Name ? Email ? Phone ? Submit Button
Accessibility Best Practices
| Practice | Recommendation | Reason |
|---|---|---|
| Use | Prefer over positive values | Maintains natural DOM order and accessibility |
| Avoid positive values | Use only when absolutely necessary | Can confuse screen reader users and break expected navigation |
| Use | For programmatic focus only | Useful for modals, error messages, and dynamic content |
| Logical order | Follow visual and logical flow | Ensures intuitive navigation for all users |
Interactive Elements Focus Management
Following example shows managing focus for dynamic content and skip links −
<!DOCTYPE html>
<html>
<head>
<title>Focus Management</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.skip-link { position: absolute; top: -40px; left: 10px; padding: 8px;
background: #000; color: #fff; text-decoration: none; }
.skip-link:focus { top: 10px; }
.content { margin: 20px 0; padding: 15px; border: 1px solid #ccc; }
.hidden { display: none; }
button { margin: 5px; padding: 8px 15px; }
h2:focus { outline: 2px solid blue; background: #e0e0ff; }
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<nav>
<button>Home</button>
<button 
6K+ Views
