Можно ли оборачивать ссылкой блочные элементы?
Раньше было нельзя — это было запрещено прямо в спецификации 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>Есть и другие, ещё более сложные трюки, чтобы вложить ссылки. Об этом написал Рома Комаров, почитайте, если интересно.
Запомните главное: блоки можно оборачивать в ссылки, главное, чтобы внутри не было интерактивных элементов.
Видеоверсия
Вопросы можно задавать здесь.
Комментарии (20)
x07
01.09.2017 19:13+1Кто-то пользуется валидатором w3c?
dagen
04.09.2017 14:44Кто-то пользуется валидатором w3c?
Зачем минус) Совершенно справедливый вопрос, учитывая дикую сферичность этого (и любых других) валидаторов. А также то, что html в наши дни практически всегда сгенерированный.SelenIT3
04.09.2017 18:21учитывая дикую сферичность этого (и любых других) валидаторов
Простите, вы точно не судите обо всех валидаторах по древнему DTD-валидатору (который, действительно, даже парсил разметку иначе, чем браузеры)? Просто актуальный проверятор для HTML5 (о котором нескучно рассказывает один из его разработчиков в интервью по ссылке комментом выше) развился во вполне неплохой линтер, и действительно помогает отловить многие проблемы до их проявления:). И сгенерированность HTML этому ничуть не мешает.
dagen
04.09.2017 20:21Да, вы совершенно правы в своих подозрениях, я остался в каменном веке касаемо html-валидаторов :) Ознакомился со статьёй по вашей ссылке сразу же, но комментарий мой был написан ранее, одобрили его только сегодня.
Ничего не имею против адекватных линтеров, а тем более автоматизированно применяемых :)
SelenIT3
01.09.2017 19:49+4Не могу удержаться от пары-тройки занудных дополнений:
- браузеры и раньше нормально обрабатывали блоки в ссылках, даже во времена IE6;
- если сама ссылка вложена, например, в
spanили вp, валидатор-таки ругнется на попытку вложить в нее блок. Дело в том, что в HTML5 у ссылки «прозрачная» модель содержимого — можно вкладывать то же, что можно вкладывать в родителя (за вычетом интерактивщины). В HTML4 два таких элемента тоже были —insиdel; - в HTML5 от самого деления элементов на «блочные», «строчные» и еще какие-то (поскольку и в HTML4 не всё получалось изящно раскидать по этим категориям) вообще отказались. Оно приводило к путанице между структурной ролью элементов и их внешним видом и мало говорило о том, что можно вкладывать в сами элементы (вот как угадать, не зная заранее, во что можно вложить блок — в «строчный»
aили в «блочный»p?). Современная терминология («фразовый контент», «потоковый контент», «интерактивный контент» и т.п.) однозначнее и, имхо, лучше сразу приучаться к ней.
homm
02.09.2017 10:28браузеры и раньше нормально обрабатывали блоки в ссылках, даже во времена IE6;
В Firefox 2, который вышел на 5 лет позже IE6, были серьезные проблемы с ссылками вокруг блоков
SelenIT3
02.09.2017 11:04Даже в Firefox 3 (возможно, и позже) были странности с display:block внутри ссылки с дефолтным display:inline (независимо от элементов, даже для кристально валидных спанов). И новые «блочные» элементы HTML5 Fx2 в принципе не понимал, но это отдельная история, со ссылками не связанная. Именно от недопустимой вложенности известных элементов, при правильной структуре боксов в CSS, проблем не помню. Возможно, заблуждаюсь…
alekssamos
01.09.2017 21:12+1<video controls>Нельзя</audio>
Открыли видео, а закрыли аудио — специально так сделали?
<a> вкладывали в <button> — такое я кстати много где видел.
Ну и небольшой лайфхак: использовать onclick если требуется как-то обрабатывать клики на элементах…<div class="mylink" role="link" tabindex="0" onclick="location.href='/page2.html';"> TEXT </div>
И еще, большое спасибо, что учитываете скринридеры и не оставляете их без внимания.А ещё это провоцирует делать пустые, недоступные ссылки без текста внутри и тогда скринридерам непонятно куда она ведёт. Не делайте так.
Assador
02.09.2017 14:02+1Всё хорошо, но, простите, пост о том, что небо синее, а трава зелёная. Любой, даже начинающий, верстальщик должен это знать. А если нет, то, может, стоит начать с учебника?
SelenIT3
04.09.2017 11:24Многие начинают с учебников начала 2000-х (некоторые из которых переиздавались и позже без соотв. коррекции). После которых объективная реальность невольно вызывает когнитивный диссонанс. Ролик/статья помогают его разрешить, тем и полезны.
Assador
04.09.2017 12:27Сейчас быстро глянул. Есть учебники по HTML5. Зачем начинать с учебников 2000-х? Но даже если так, надо быть в танке, чтобы не знать о новых спецификациях. Интернет-то зачем? w3.org — и вперёд. Да я-то не против поста, ради бога, просто имхо это выглядит, как «а ещё я на машинке умею…» Тогда уж надо пробежаться по всем нововведениям с начала 2000-х. А это уже и получается полноценный учебник :) В итоге получаем следующее: для учебника начало как-то бессистемно и с середины, а для отдельного поста маловато. Впрочем, полезной информации мало не бывает, почему нет…
SelenIT3
04.09.2017 18:29Увы, есть учебники, позиционирующие себя как по HTML5, но ничтоже сумняшеся фигачащие устаревшими концепциями типа тех же «блочных и строчных элементов». А материалы w3.org новичку скорее взорвут мозг, чем помогут разобраться (особенно с учетом того, что актуальные и устаревшие спецификации пока визуально никак не различаются). Так что это хороший ответ на конкретный часто возникающий вопрос, который новичка избавит от сомнений и метаний, а более продвинутому даст хорошую отправную точку для дальнейшего изучения моделей содержимого и типов контента HTML5 и прочих фундаментальных вещей (которые авторы учебников почему-то склонны обходить стороной).
Assador
04.09.2017 19:19Ну, если с учебниками сейчас действительно такая петрушка (я как-то давно не смотрел их; сейчас уже достаточно спецификаций и конкретных практических находок), тогда беру свои слова обратно.
alex6636
04.09.2017 14:44Кто-то, из тех кто вдруг не знал, тут прочитает и будет знать. Если вам уже это знакомо, может лучше пройти мимо, чем критиковать?
Zman
Спасибо!