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


Ссылка с возможностями блока

Задача

Сделать ссылку для вот такого блока

При чем кликабильной должна быть вся область блока.

На что стоит обратить внимание:

  • ссылка должна иметь четко заданную ширину (width)
  • ссылка должна иметь четко заданную высоту (height)
  • ссылка должна иметь внутренние отступы (padding)

Для облегчения задачи упустим тот факт, что такой блок в реальных условиях может быть еще и резиновым.

Когда я первый раз столкнулся такой задачей, первое, что пришло мне в голову — сделать все предельно просто:

Попробовав так сделать и посмотрев на результат, вспомнил, что размеры и padding-top / padding-bottom работают только для элементов уровня блок. А ссылка у нас — это строчный элемент. Какие проблемы? Сейчас сделаю блок!

Это сработало. Но радовался я не долго. Проверка на соотвествие стандартам меня несколько огорчила:

Оказалось, что элементы уровня блок нельзя вкладывать в элементы уровня inline (строчные элементы). Еще подумав, пришел к выводу, что без помощи javascript тут не обойтись:

Это решение соответствовало дизайну и проходило валидацию. В таком виде я сдал работу, в которой впервые встретилась подобного рода ссылка. Неудивительно, что этот заказчик больше никогда и ничего у меня не заказывал. Ведь я сделал из простой задачи большую проблему, и решить ее смог только с помощью javascript. А достаточно знать немного лучше CSS и тогда решение становится простым и изящным:

Более сложный вариант

Чтобы лучше усвоить урок, усложним задачу:

Такая задача — обычное дело при верстке каталогов товаров, интернет магазинов. Чтобы было понятней в чем сложность, приведу обычные требования к такому блоку:

  • картинка должна быть вставлена тегом
  • картинка должна скругляться версткой (чтобы редакторы не тратили время на скругление в фотошопе каждой картинки)
  • размеры блока с фото и самого фото жестко фиксированы (чтобы все картинки в каталоге были одинакового размера)
  • фото и текст должны быть кликабильны, при чем в коде должен быть всего один тег

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

Омг, что вы творите??)) извините, но это тег а должен оборачиваться в див, а не наоборот.

то, что он проходит проверку на валидность не значит, что так делать правильно

мне вообще трудно представить код, который бы не проходил проверку на валидность в html 5

тег а не является блочным элементом

Конечно, вы можете назначить тегу а блочное отображение, но тогда не ясно, зачем вам вообще див.

html пройдет даже с кучей неточностей

Теги внутри тега a тут уже поднимался подобный вопрос


Красивые ссылки или как легко обернуть фотографии ссылками для пользователей?

Ссылка – неотъемлемая часть web-пространства. За красоту и чистоту ссылочной массы борется каждый оптимизатор своих веб-ресурсов. Внутренние ссылки (внутренняя перелинковка) – это важная часть продвижения сайта в поисковых системах.

Я уже рассказывал, как в UMI-CMS сделать автоматическую генерации ссылок через блог “Похожих материалов”. Внимательные веб-мастера, наверное, заметили, что ссылку я сделал исключительно текстовой. Внутри тега “a” нет ни других тегов, ни картинки, ничего лишнего – только текст. При этом блок имеет простую структуру: картинка + название в блочном элементе. Такой визуальный ряд встречается практически на любом сайте в разных вариантах: фотография + заголовок, логотип + название, картинка + подпись и т.д.

Илон Маск рекомендует:  Что такое код sesam_fetch_result

Но не думаю, что кто-то будет спорить с тем, что значительной части пользователей куда удобнее кликать на картинку, чем целиться на текстовую подпись. Это показывает и скрин карты кликов, взятая из отчетов в Яндекс.Метрике. Руководствуясь этой мыслью, большинство веб-мастеров делают следующие варианты вёрстки:

1 вариант

2 вариант

Оба этих вариантов не очень хороши. В первом в анкор попадает много “мусора”: теги, alt и т.д., во втором есть большая вероятность, что ссылку, например, Google интерпретирует безанкорной, т.к. считается, что Google учитывает только первый, верхний анкор для одной и той же ссылки в рамках одной страницы. Так же такая вёрстка увеличивает количество исходящих ссылок со страницы вдвое.

С точки зрения seo предпочтительнее 3 вариант, но при этом в нём не отражены предпочтения пользователей (кликабельные картинки):

3 вариант

Для того, чтобы удовлетворить сразу две цели: дать поисковым системам только чистые и красивые ссылки по текстовым анкорам, а пользователю – возможность кликать по картинкам, я написал небольшой js-скрипт, который отрабатывает на стороне клиента при загрузке страницы.

Код скрипта

Функция очень простая, основная логика заключается в том, что для каждого блока с определенным классом – preview_block_likes мы берём значение атрибута href ссылки (ребёнка нашего блока) и оборачиваем ссылкой с этим значением картинку (тоже ребёнка данного блока). Логика определяется структурой:

Ниже приведенный код нужно записать в js-файл: link-for-img.js.

Для работы скрипта используется jquery. Например, библиотеку можно скачать себе на сервер тут, а затем подключить в head. Вместе с нашим созданным скриптом – link-for-img.js. Для корректной работы файл скрипта должен располагаться в коде страницы после подключения библиотеки.

При более сложной вёрстке и уровнях вложенности картинки и ссылки во внутренние блоки скрипт можно легко адаптировать к вашему вариант, достаточно лишь переписать в js названия и количества родительских элементов главного блока.

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

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

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

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

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

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

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

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

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

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


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

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

Илон Маск рекомендует:  Что такое код div делить

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

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

Заказать звонок

Как создавать списки в HTML знают почти все. Это просто.Для маркированного списка используются теги .

Gogetlinks 10 лет. Компания празднует первый юбилей и объявляет конкурс на тему «Я люблю .

Для создания эффективной рекламной компании в Яндекс.Директ необходимо выполнить ряд основных .

Хорошо известно, что Google использует более 200 сигналов ранжирования. Кроме того, каждый год он .

Не так давно, 31 августа, специалисты рoскомнадзора провели рабочую встречу с представителями .

Есть такая, часто возникающая, задача — сравнить два файла по содержимому. Зачем? Ну, к примеру, .

То, что в Интернете можно зарабатывать неплохие деньги знают все. Но вот как это сделать, для .

Как сделать блок div гиперссылкой

Как сделать так, чтобы весь блок div был одной общей гиперссылкой? Если внутри есть какой-то текст или картинка, то тогда все просто, а вот если внутри блока ничего нет кроме фоновой картинки.

Для меня этот вопрос стал актуальным, когда попросили сделать у уже готового сайта логотип в шапке кликабельным. Оказалось, что логотип просто является частью фоновой картинки. Делать какие-то глобальные изменения мне не хотелось, поэтому возник вот этот вариант:

Во-первых, в основном коде в нужном месте вставляем следующий код:

В принципе, это уже все — ссылка будет работать.

Однако тут еще пока есть два недостатка.

Первый — это то, что пустой блок div имеет нулевые размеры.

Второй недостаток — это отсутствие курсора в виде указующего пальчика, по которому все и узнают о существовании гиперссылки.

Решается это с помощью стилей. В любом подключенном файле css вставляем описание типа:

.divlink <
width: Xpx;
height: Ypx;
cursor:pointer;
>

Как сделать блокировку ссылок

Дата публикации: 2020-12-04

От автора: недавно на работе была поднята тема того, как делается блокировка ссылок. В прошлом году каким-то образом к стилям наших шрифтов был добавлен якорь disabled, пока я этого не видел. Есть проблема: в HTML нет реального способа заблокировать тег a (с валидным атрибутом href). А зачем вообще это делать? Ссылки лежат в основе веба.


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

Просто не делайте этого

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

В BootStrap есть примеры применения класса .disabled к якорям, я их ненавижу. По крайней мере, они сказали, что этот класс всего лишь добавляет стиль disabled. Формулировка вводит в заблуждение. Чтобы реально отключить ссылку, недостаточно просто придать ей вид отключенной ссылки.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Надежный способ: удалите href

Если вы приняли решение игнорировать мои предупреждения и все еще хотите заблокировать ссылку, то лучший способ, который я знаю – удалите href атрибут.

Из спецификации Hyperlink: «Атрибут href в тегах a и area необязателен; когда атрибут отсутствует, эти элементы не создают гиперссылки.»

У MDN определение попроще: «Для создания плейсхолдер ссылки этот атрибут можно пропустить (в HTML5). Плейсхолдер ссылка похожа на обычную ссылку, но она никуда не ведет.»

Илон Маск рекомендует:  Что такое код getscrollpos

Стандартный JS код вставки и удаления атрибута href:

Блок div как ссылка

Блок div как ссылка, как сделать div ссылкой такого рода вопросы как оказалось очень часто ищут, но не могут найти. Этот маленький урок предназначен для тех кто искал искал, но не нашел. Решение как всегда оказалось очень простым, для этого достаточно добавить событие onclick прописать location.href и добавить ссылку.

8 комментариев на «“Блок div как ссылка”»

Не работает Ваша конструкция, Вы ее проверяли перед публикацией?

Я не знаю как у Вас работает? Пробовал два варианта:
1)

Мой заголовок

И ничего не работает Мой заголовок не становится ссылкой…

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

Украинский борщ со свеклой

у меня как не работало так и не работает….По-поводу Вашей ссылки на рабочий пример…я вообще не пойму что я должен извлечь из этого? Вы мне объясните помимо конструкции

Мой заголовок

я должен еще применять какой то код или должно работать и так?

Ваша код работает, что вам не понятно?
Украинский борщ со свеклой

Чтобы убедиться, что все работает создайте файл с расширением Html и добавьте следующий код


ссылку на сайт можно?

У вас в коде ошибка. Проверьте все ковычки!

Как сделать div ссылкой в карточку товара?

Автор Btms, 11 сентября, 2013 в Общие вопросы

Рекомендуемые сообщения

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Последние посетители 0 пользователей онлайн

Ни одного зарегистрированного пользователя не просматривает данную страницу

Меню покупок

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.

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

У меня есть div, подобный этому

Вам необходимо присвоить свойству display: block; привязку привязки. В противном случае это будет неверно завершено.

работает в браузерах, даже если он нарушает текущие спецификации HTML. Это разрешено в соответствии с черновиками HTML5.

Когда вы говорите, что он не работает, вы должны точно объяснить, что вы сделали (в том числе код jsfiddle — хорошая идея), что вы ожидали и как поведение отличается от ваших ожиданий.

Неясно, что вы подразумеваете под «всем содержимым в этом div в css», но я предполагаю, что это означает, что контент действительно пуст в разметке HTML, и у вас есть CSS как

Затем весь блок можно щелкнуть, а текст содержания будет выглядеть как текст ссылки. Разве это не то, что вы ожидали?

Как сделать, чтобы слой целиком был ссылкой?

В этой статье мы расскажем о том, как сделать целый слой ссылкой, это может быть любой div (блок, другими словами).

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

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

На помощь тут приходит небольшая хитрость. Для начала создадим заготовку HTML -разметку, которая будет состоять из

Следующий наш шаг, задать какие-то размеры для внешнего

Результат можно наблюдать ниже, получилась прямоугольная область-ссылка, это видно при наведении на нее(курсор меняется на указатель), и по цвету слоя-ссылки.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL