- PVSM.RU - https://www.pvsm.ru -
Можно ли оборачивать ссылкой блочные элементы?
Раньше было нельзя — это было запрещено прямо в спецификации HTML4 [1]. В то время мы больше думали про текстовые сайты, где были обычные синие ссылки.
В современной спецификации HTML5 [2] блочные элементы можно оборачивать в ссылки. На это теперь не ругается валидатор W3C и браузеры правильно обрабатывают такую вложенность.
Но есть нюанс. Если вы положите ссылку в ссылку, то что получится, когда вы кликнете по такому? Какая ссылка отреагирует? Непонятно.
Поэтому спецификация прямо запрещает: интерактивные элементы класть в ссылку нельзя.
<a href="">
Ссылка
<a href="">
Нельзя
</a>
</a>
А какие есть ещё интерактивные элементы, кроме ссылки? Например, с которыми можно взаимодействовать. Кнопки, поля формы и лейблы к ним, элементы audio и video, если у них включены контролы.
<a href="">
<button>Нельзя</button>
</a>
Всё дело в интерактивности: если контролы отключены и видео с аудио играют сами по себе — значит уже можно, они стали неинтерактивными.
<a href="">
<video>Можно</video>
<video controls>Нельзя</audio>
</a>
А если вы зададите атрибут tabindex любому элементу, чтобы его можно было выделить с клавиатуры, то он станет интерактивным и его уже нельзя будет завернуть в ссылку.
Можно, конечно, делать трюки с позиционированием [3], когда вы не кладёте блок внутрь ссылки, а позиционируете ссылку поверх блока. Так можно обойти ограничение валидатора, который этого не заметит.
Но в таком случае вы всё равно можете оказаться в ситуации, когда у вас ссылка над ссылкой или другим интерактивным элементом и непонятно, на что можно кликнуть, а на что нет.
А ещё это провоцирует делать пустые, недоступные ссылки без текста внутри и тогда скринридерам непонятно куда она ведёт. Не делайте так.
<a href=""></a>
<article>
Не надо так
</article>
Есть и другие, ещё более сложные трюки, чтобы вложить ссылки. Об этом написал Рома Комаров [4], почитайте, если интересно.
Запомните главное: блоки можно оборачивать в ссылки, главное, чтобы внутри не было интерактивных элементов.
Вопросы можно задавать здесь [5].
Автор: htmlacademy
Источник [6]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/html5/263151
Ссылки в тексте:
[1] прямо в спецификации HTML4: https://www.w3.org/TR/html4/struct/links.html#h-12.2.2
[2] В современной спецификации HTML5: https://www.w3.org/TR/html/textlevel-semantics.html#the-a-element
[3] трюки с позиционированием: http://jsfiddle.net/csswizardry/rxsna/
[4] написал Рома Комаров: http://kizu.ru/fun/nested-links/
[5] здесь: https://htmlacademy.ru/shorts
[6] Источник: https://habrahabr.ru/post/336638/
Нажмите здесь для печати.