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

Атрибут tabindex

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

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

Атрибут tabindex появился в HTML довольно давно, но раньше он поддерживался ограниченным количеством тегов, а теперь он есть у всех. Поэтому, если на страницах описания каких-то тегов вы увидите логотип HTML 5 (Логотип 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" "http://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" "http://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.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа