Pull to refresh
154.44
Rating
HTML Academy
Обучаем веб-разработке и меняем жизни

Ссылки вокруг блоков

HTML Academy corporate blog Website development *HTML *


Можно ли оборачивать ссылкой блочные элементы?

Раньше было нельзя — это было запрещено прямо в спецификации HTML4. В то время мы больше думали про текстовые сайты, где были обычные синие ссылки.


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


Но есть нюанс. Если вы положите ссылку в ссылку, то что получится, когда вы кликнете по такому? Какая ссылка отреагирует? Непонятно.


Поэтому спецификация прямо запрещает: интерактивные элементы класть в ссылку нельзя.


<a href="">
  Ссылка
  <a href="">
    Нельзя
  </a>
</a>

А какие есть ещё интерактивные элементы, кроме ссылки? Например, с которыми можно взаимодействовать. Кнопки, поля формы и лейблы к ним, элементы audio и video, если у них включены контролы.


<a href="">
  <button>Нельзя</button>
</a>

Всё дело в интерактивности: если контролы отключены и видео с аудио играют сами по себе — значит уже можно, они стали неинтерактивными.


<a href="">
  <video>Можно</video>
  <video controls>Нельзя</audio>
</a>

А если вы зададите атрибут tabindex любому элементу, чтобы его можно было выделить с клавиатуры, то он станет интерактивным и его уже нельзя будет завернуть в ссылку.


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


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


А ещё это провоцирует делать пустые, недоступные ссылки без текста внутри и тогда скринридерам непонятно куда она ведёт. Не делайте так.


<a href=""></a>
<article>
  Не надо так
</article>

Есть и другие, ещё более сложные трюки, чтобы вложить ссылки. Об этом написал Рома Комаров, почитайте, если интересно.


Запомните главное: блоки можно оборачивать в ссылки, главное, чтобы внутри не было интерактивных элементов.


Видеоверсия



Вопросы можно задавать здесь.

Tags: htmlhtml5ссылки в интерфейсахразметка страницы
Hubs: HTML Academy corporate blog Website development HTML
Total votes 28: ↑21 and ↓7 +14
Comments 20
Comments Comments 20

Information

Founded
Location
Россия
Website
htmlacademy.ru
Employees
101–200 employees
Registered