El atributo tabindex especifica el orden de tabulación de un elemento. El botón «tab» se utiliza para la navegación. El atributo de contenido tabindex permite a los usuarios controlar si se supone que un elemento se puede enfocar, si se supone que se puede acceder a él mediante la navegación de enfoque secuencial y cuál debe ser el orden relativo del elemento a los efectos de la navegación de enfoque secuencial.
Sintaxis:
element tabindex = "number"
Atributo :
- número : Esto especifica el orden de «tabulación» cuando se usa la tecla de tabulación para navegar.
Ejemplo :
<div tabindex = "0"><p>GFG Article 1</P></div> <div tabindex = "1"><p>GFG Article 2</P></div> <div tabindex = "2"><p>GFG Article 3</P></div>
En el ejemplo anterior, cuando el botón de tabulación se usa para navegar por los elementos, el Artículo 1 se enfocará primero, seguido del Artículo 2 y el Artículo 3 .
Nota: Si el valor de tabindex es -1, entonces no se podrá enfocar. Por ejemplo, el enlace a continuación no se enfocará al usar las teclas de tabulación para recorrer.
Ejemplo :
<a href="#" tabindex="-1">Tab key cannot reach here!</a>
Barras de navegación: las barras
de navegación son importantes para cualquier sitio web. Son los bloques asociados a enlaces a las diferentes páginas de los sitios web.
Hay dos tipos de menú de navegación:
- Barras de navegación verticales
- Barras de navegación horizontales
Barras de navegación verticales: el menú de la barra vertical se muestra uno encima del otro.
Ejemplos: 
Código:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
background-color: white;
position: fixed;
height: 25%;
overflow: hidden;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.hme {
background-color: #4CB96B;
}
</style>
<body>
<ul>
<li><a class="hme" href="#" tabindex="2">Home</a></li>
<li><a href="#" tabindex="1">Blog</a></li>
<li><a class="hme" href="#" tabindex="4">About Us</a></li>
<li><a href="#a" tabindex="3">Contact Us</a></li>
</ul>
</body>
Barras
de navegación horizontales: el menú de barras de navegación horizontales muestra una seguida de otra o una al lado de la otra.
Ejemplos: 
Código:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: white;
height: 25%;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.hme {
background-color: #4CB96B
}
</style>
<body>
<ul>
<li><a class="hme" href="#" tabindex="1">Home</a></li>
<li><a href="#" tabindex="2">Blog</a></li>
<li><a class="hme" href="#" tabindex="3">About Us</a></li>
<li><a href="#" tabindex="4">Contact Us</a></li>
</ul>
</body>
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA