Как сделать вкладки сайта: HTML, CSS и JS в 2026

Чтобы сделать вкладки сайта внутри страницы, создайте ряд кнопок и связанные с ними панели содержимого, затем добавьте переключение на JavaScript. Активной остаётся одна панель, остальные скрываются. Это не вкладки браузера и не favicon, а интерфейсный компонент для характеристик товара, тарифов, программы или примеров работ.

Если вам нужен значок рядом с названием страницы в браузере, используйте инструкцию как сделать favicon сайта. Ниже разбираем только переключатели содержимого, которые посетитель видит внутри самой страницы.

Когда вкладки помогают, а когда мешают

Вкладки полезны, когда несколько блоков относятся к одному объекту и посетителю удобно сравнивать их на месте. Например, карточка курса может содержать панели Программа, Формат и Вопросы. Карточка товара может переключать Описание, Характеристики и Доставку.

• Используйте вкладки для нескольких равнозначных частей одного блока.
• Давайте каждой вкладке короткое и конкретное название.
• Показывайте важнейшую панель первой, потому что её увидят сразу.
• Оставляйте содержимое достаточно компактным, чтобы переключение экономило место.
• На телефоне разрешайте прокрутку ряда вкладок или переносите кнопки без наложения текста.

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

Сначала разложите содержание без вкладок и проверьте, понятен ли порядок. Компонент должен упрощать уже ясную структуру, а не скрывать беспорядок за красивыми кнопками.

Из каких частей состоят доступные вкладки

У компонента есть список вкладок, отдельные кнопки и панели. В официальном шаблоне Tabs от W3C контейнер получает роль tablist, каждая кнопка роль tab, а область содержимого роль tabpanel. Активная кнопка имеет aria-selected="true", остальные получают false. Связь между кнопкой и панелью задают через aria-controls и aria-labelledby.

Используйте настоящие элементы button, а не кликабельные div. Кнопка изначально рассчитана на действие мышью, пальцем, клавиатурой и вспомогательными технологиями, что подтверждает документация MDN по button. Для компонента внутри формы обязательно задайте type="button", иначе кнопка может неожиданно отправить форму.

• Одна кнопка имеет tabindex="0" и считается активной.
• Неактивные кнопки имеют tabindex="-1", чтобы ряд вкладок не превращался в длинную цепочку остановок по клавише Tab.
• Клавиши со стрелками переводят фокус между соседними вкладками.
• Enter или пробел включают выбранную вкладку при ручной активации.
• Скрытые панели получают атрибут hidden, а видимая панель остаётся доступной для чтения.
• Активное состояние отличается не только цветом, но и формой, линией или насыщенностью текста.

MDN отдельно указывает, что роль tab должна находиться внутри tablist и управлять связанной областью tabpanel. Там же описаны стрелки, Enter, пробел, Home и End. Полная схема приведена в справке MDN о роли tab.

По теме: Как сделать сайт с картинками: фото и галерея в 2026

Как собрать разметку и стили вкладок

Создайте HTML так, чтобы каждая кнопка ссылалась на свою панель. Значения id, aria-controls и aria-labelledby должны совпадать попарно. Текст внутри панели остаётся обычным содержимым страницы: заголовками, абзацами, списками и ссылками.

<div class="tabs">
  <div class="tabs__list" role="tablist" aria-label="Информация о курсе">
    <button type="button" role="tab" id="tab-program" aria-controls="panel-program" aria-selected="true" tabindex="0">Программа</button>
    <button type="button" role="tab" id="tab-format" aria-controls="panel-format" aria-selected="false" tabindex="-1">Формат</button>
    <button type="button" role="tab" id="tab-questions" aria-controls="panel-questions" aria-selected="false" tabindex="-1">Вопросы</button>
  </div>
  <section role="tabpanel" id="panel-program" aria-labelledby="tab-program" tabindex="0">Содержание программы</section>
  <section role="tabpanel" id="panel-format" aria-labelledby="tab-format" tabindex="0" hidden>Описание формата</section>
  <section role="tabpanel" id="panel-questions" aria-labelledby="tab-questions" tabindex="0" hidden>Ответы на вопросы</section>
</div>

Для оформления сделайте кнопки достаточно крупными, добавьте видимую границу активной вкладке и отдельный стиль фокуса. На узком экране ряд можно прокручивать по горизонтали. Не уменьшайте подписи до нечитаемого размера ради того, чтобы все кнопки любой ценой поместились в одну строку.

.tabs__list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  border-bottom: 1px solid #d8d1ca;
}
[role="tab"] {
  padding: 12px 16px;
  border: 0;
  background: transparent;
  white-space: nowrap;
  cursor: pointer;
}
[role="tab"][aria-selected="true"] {
  color: #b8471f;
  border-bottom: 3px solid #d85a30;
  font-weight: 700;
}
[role="tab"]:focus-visible {
  outline: 3px solid #222;
  outline-offset: 2px;
}

Если вкладки создаёт ИИ, передайте ему названия панелей, готовые тексты и требования к клавиатуре. Не ограничивайтесь фразой сделать табы. Попросите использовать button, роли tablist, tab и tabpanel, синхронизировать aria-selected, tabindex и hidden, а также проверить мобильную прокрутку.

Как добавить переключение на JavaScript

JavaScript должен выполнять три действия: отметить выбранную кнопку, показать связанную панель и перенести фокус при работе клавиатурой. Не меняйте только CSS-класс. Состояние, которое видят вспомогательные технологии, тоже должно обновляться.

const tabs = [...document.querySelectorAll('[role="tab"]')];

function activateTab(tab, moveFocus = true) {
  tabs.forEach((item) => {
    const selected = item === tab;
    item.setAttribute('aria-selected', String(selected));
    item.tabIndex = selected ? 0 : -1;
    const panel = document.getElementById(item.getAttribute('aria-controls'));
    panel.hidden = !selected;
  });

  if (moveFocus) tab.focus();
}

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => activateTab(tab, false));

  tab.addEventListener('keydown', (event) => {
    let nextIndex = index;
    if (event.key === 'ArrowRight') nextIndex = (index + 1) % tabs.length;
    if (event.key === 'ArrowLeft') nextIndex = (index - 1 + tabs.length) % tabs.length;
    if (event.key === 'Home') nextIndex = 0;
    if (event.key === 'End') nextIndex = tabs.length - 1;

    if (nextIndex !== index) {
      event.preventDefault();
      activateTab(tabs[nextIndex]);
    }
  });
});

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

После вставки кода проверьте консоль браузера. Ошибка часто возникает, когда aria-controls указывает на несуществующий id или скрипт запускается до появления разметки. Если компонент находится в готовом редакторе, не добавляйте второй скрипт поверх встроенных вкладок. Сначала проверьте возможности самого блока.

По теме: Как сделать значок сайта в 2026: favicon во вкладке браузера

Как проверить вкладки перед публикацией

1. Откройте страницу и убедитесь, что первая панель видима, а остальные скрыты.
2. Нажмите каждую вкладку мышью и пальцем. Содержимое должно меняться без скачка страницы.
3. Нажмите Tab. Фокус должен попасть на активную вкладку, а не пройти по всем кнопкам подряд.
4. Используйте стрелки влево и вправо, затем Home и End. Фокус и активное состояние должны двигаться согласованно.
5. Увеличьте масштаб страницы и откройте телефонную ширину. Подписи не должны накладываться друг на друга.
6. Если для проекта обязательна работа без JavaScript, предусмотрите отдельную запасную подачу: в приведённом примере атрибут hidden оставляет видимой только первую панель.
7. Проверьте видимый фокус, контраст активной вкладки и понятность названий панелей.

Стрелки внутри горизонтального списка не должны перехватывать вертикальную прокрутку страницы. Для вертикального расположения добавляют aria-orientation="vertical" и используют стрелки вверх и вниз по правилам W3C. Общие принципы проверки интерфейса собраны в статье как сделать сайт доступным.

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

Частые вопросы

Можно ли сделать вкладки только на HTML и CSS?

Можно имитировать переключение через ссылки или поля формы, но полноценное доступное поведение вкладок требует управления состояниями и клавиатурой. MDN прямо указывает, что комбинация только HTML и CSS не заменяет необходимую функциональность доступных tabs.

Чем вкладки отличаются от аккордеона?

Вкладки показывают одну из соседних панелей, а аккордеон раскрывает секции по вертикали и может оставлять открытыми несколько. На узком экране аккордеон часто удобнее для длинных ответов.

Как сделать вкладку активной после обновления страницы?

Сохраните выбранный идентификатор в адресе после символа # или в хранилище браузера, затем активируйте соответствующую кнопку при загрузке. Не сохраняйте личные данные пользователя в таком состоянии.

Сколько вкладок можно поставить в один блок?

Жёсткого числа нет, но длинный ряд плохо читается и не помещается на телефоне. Объедините похожие разделы, сократите названия или замените компонент обычным оглавлением.

Почему вкладки работают мышью, но не клавиатурой?

Обычно обработан только click, а роли, tabindex и события keydown не добавлены. Используйте настоящие кнопки, настройте стрелки и оставьте заметный стиль focus-visible.