Как обернуть ссылку в div

Увеличить зону кликабельности ссылки — HTML/CSS

Необходимо сделать ссылкой не только подзаголовок, но и саму картинку. Есть три способа три: назовем их хороший, плохой и злой.

Плохой

Просто обернуть и заголовок, и картинку в ссылку следующим образом:

Злой

Обернуть все в одну ссылку:

Хороший

Разместить ссылку в заголовке, а затем расширить область ссылки на всю карточку с помощь псевдоэлемента :before:

div  position: relative; > a:before  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; > 

Можно использовать любой из этих трех способов, но лично я предпочитаю последний.

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

Можно ли оборачивать ссылкой блочные элементы? — спрашивает наша зрительница Маша. Можно, Маша, но осторожно. Давайте разберёмся.

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

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

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

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

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

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

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

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

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

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

  
Не надо так
 

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

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Как сделать весь блок ссылкой?

Для начала нужно ответить себе на вопрос: какую задачу я решаю, вставляя ссылку в ссылку? Если предполагается, что и блок, и текстовая ссылка будут вести в одном направлении, то можно просто обернуть блок в ссылку, а текстовую ссылку переделать на span и стилизовать под ссылку, если очень хочется (добавить подчеркивание, курсор при наведении и т.п.). Если блок ведет в одном направлении, а текстовая ссылка в другом, то вы делаете что-то не так с точки зрения UX.

Решения вопроса 1

Ankhena @Ankhena Куратор тега CSS
Нежно люблю верстку

Если брать в расчет спецификацию, то:
1. Ссылку в ссылку вкладывать нельзя. Значит вторую нужно поместить рядом и позиционированием отправить куда нужно.
При этом нужно быть уверенным, что пользователь поймет куда и зачем нажимать.
2. У ссылок прозрачная контентная модель. Поскольку, мы не можем быть на 100% уверенными куда будет вставлена ссылка, то div’ы внутри неё нужно заменить на span (или семантические аналоги).

Как сделать DIV блок ссылкой?

Как сделать весь блок div ссылкой?
Добрый день! Посоветуйте, пожалуйста, как сделать блок div ссылкой?

Ребята, помогите, как сделать DIV (меняющая картинка при наведении) ссылкой!?
Ребята, помогите, как сделать DIV (меняющая картинка при наведении) ссылкой!? вот код: <style.

Как сделать блок ссылкой?
Всем привет! Проблема простая, но почему-то не могу разобраться. Нужно сделать ссылкой блок. Когда.

269 / 261 / 35
Регистрация: 21.02.2012
Сообщений: 1,078

1 2 3

a href="#"> div class="block">/div> /a>

1 2 3 4 5 6 7 8

a{ display:inline-block; } .block{ width:200px; height:100px; background:#000000; }

424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,375
Записей в блоге: 91
дави, maximus2011, Либо стать извращенцем и сделать ссылку на JS
Регистрация: 25.01.2013
Сообщений: 19
А как сделать несколько блоков ссылками?
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,375
Записей в блоге: 91

дави, если тебе надо из чего либо сделать ссылку. то это что-то нужно обернуть тегом:
внезависимости что это. ссылкой может быть картинка, блок, span, параграф и т.д. , практически всё что угодно.
разве что wc3 ставит перед верстальщиками ограничение при валидацыи .

div onClick="document.location='some.php'">Див ссылка/div>

a href="link.html" class="anchor_div">ссылка/a>

.anchor_div{ display: block;}