Опубликовано: 25.06.2010 Последняя правка: 08.12.2015

Атрибут tabindex

Атрибут tabindex устанавливает порядок, в котором будет идти перечисление элементов при табуляции (клавиша Tab). То есть данный атрибут отвечает за навигацию по HTML-странице с помощью клавиатуры.

Чаще всего атрибут tabindex используют для упорядочивания перебора между элементами форм (тег <FORM>) или ссылками меню сайта (тег <A>). При этом хотел бы обратить ваше внимание на то, что некоторые браузеры (в зависимости от настроек) могут визуально никак не выделять некоторые типы элементов при табуляции, хотя перебор при этом вести. Например, этими особенностями обладает браузер Opera.

Атрибут tabindex появился в HTML довольно давно, но раньше он поддерживался ограниченным количеством тегов, а теперь он есть у всех. Поэтому, если на страницах описания каких-то тегов вы увидите логотип HTML 5 () напротив атрибута, то знайте, что этот тег начал поддерживать данный атрибут именно с версии HTML 5. C другой стороны, хоть в HTML 5 теперь все теги могут иметь этот атрибут — не факт, что браузеры его будут также понимать во всех случаях. Более того, в описаниях W3C также нет конкретики по данному вопросу, например о том, для чего использовать атрибут tabindex в параграфах (тег <P>).

Значения

Значением атрибута tabindex является число от 0 до 32767. Перебор во время табуляции идет в порядке возрастания. Если у двух тегов одинаковые значения tabindex, то перебор идет в порядке появления их в HTML-коде страницы (сверху вниз, слева направо).

Значение по умолчанию: нет.

Если вы хотите сделать так, чтобы какой-либо HTML-элемент вообще был исключен и не выбирался при табуляции, то можете попробовать установить для него отрицательное значение tabindex. Но имейте в виду, что отрицательные значения данного атрибута не предусмотрены спецификацией HTML.

Синтаксис

<button tabindex="значение">...</button>
<area tabindex="значение" alt="текст">
<a href="URL" tabindex="значение">...</a>

Обязательный атрибут: нет.

Пример HTML: применение атрибута tabindex для тега A

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Тег A, атрибут tabindex</title>
 </head>
 <body>
  <p><a href="files/hello.html" tabindex="1">Ссылка-1</a>
  <a href="files/hello.html" tabindex="2">Ссылка-2</a></p>
  <p><a href="files/hello.html" tabindex="4">Ссылка-4</a>
  <a href="files/hello.html" tabindex="3">Ссылка-3</a></p>
</body>
</html>

Результат примера

Пример HTML: применение атрибута tabindex для тега AREA

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Тег AREA, атрибут tabindex</title>
 </head>
 <body>
  <p><img src="images/wild.png" width="640" height="142" usemap="#header" alt="Салон красоты Wild kitties">
   <map name="header">
    <area href="files/home.html" shape="poly" tabindex="1"
          coords="19,71,104,71,109,85,104,98,19,98,11,85" alt="Главная">
    <area href="files/novosti.html" shape="poly" tabindex="3"
          coords="126,71,211,71,216,85,211,98,126,98,118,85" alt="Новости">
    <area href="files/uslugi.html" shape="poly" tabindex="2"
          coords="233,71,318,71,323,85,318,98,233,98,225,85" alt="Услуги">
    <area href="files/o_nas.html" shape="poly" tabindex="4"
          coords="339,71,424,71,429,85,424,98,339,98,331,85" alt="О нас">
   </map></p>
 </body>
</html>

Результат примера

Поддержка версиями HTML

Версия:	HTML 4.01	HTML 5	XHTML 1.0	XHTML 1.1
Поддержка:	Да	Да	Да	Да

Поддержка браузерами

Браузер:	Internet Explorer	Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Да	Да	Да	Да	Да