УРОК 102 ИЗ 120

Исправьте: раздельные интерактивные элементы

Оставьте ссылку и кнопку отдельными действиями без вложенности.

Официальный источникWHATWG HTML — interactive contentПроверено: 2026-08-26
ШАГ 1 · ИЗУЧИТЕ

Как это работает

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

Правильный пример
<div class="actions"><a href="/services/audit/">Подробнее об аудите</a><button type="button">Сохранить услугу</button></div>

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

Частая ошибка
<a href="/details"><button type="button">Подробнее</button></a>

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

ШАГ 2 · ПРИМЕНИТЕ

Ваше задание

Исправьте пример, не меняя его цель. Оставьте ссылку и кнопку отдельными действиями без вложенности.

ШАГ 3 · СОЗДАЙТЕ

Напишите и посмотрите результат

index.htmlHTML
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ

Что должно пройти

0%не проверено
  • У ссылки есть непустое назначение.
  • У ссылки есть видимый текст.
  • У кнопки есть явный тип и видимый текст.
  • Ссылка и кнопка не вложены друг в друга.
Объясните логику решения

В одном div сначала добавьте ссылку с href и текстом, затем button type="button" с собственной подписью. Закройте ссылку до начала кнопки.