При этом надо помнить, что область ссылки ограничена размером текста. элемент блочный, он занимает всю ширину области просмотра, а ссылка строчная, её размер определяется размером содержимого. Так что щелчок не по тексту, а просто по этой строке ничего не даст. Для данного примера это может и не принципиально, а вот для какого-нибудь меню, где пункты меню визуально больше текста, важно. Поэтому мы модифицируем стиль ссылки, чтобы она занимала всё пространство внутри блока.
Вот теперь размер ссылки равен размеру блока и щелчок по любому месту блока воспринимается как переход по ссылке.
В более сложных и распространённых ситуациях блок представляет собой комбинацию заголовка, картинки и подписи к ней. Вспомните любой интернет-магазин с витриной товаров и вы поймёте, насколько популярны блоки, которые одновременно являются ссылками, ведь они должны вести на описание товара. Код HTML может быть примерно таким.
Таким образом, каждую часть нашего блока (картинку и название) мы оборачиваем одной и той же ссылкой и в стилях ставим ей свойство display со значением block . Тогда весь блок целиком визуально будет представлять собой одну ссылку, хотя на деле это набор ссылок.
Всё это относилось к HTML4, и на наше счастье в HTML5 ситуация поменялась. При этом, все описанные приёмы остались с нами, но и добавилось кое-что новое. Теперь мы можем внутрь ссылки вставлять блоки целиком. Вот как преобразуется наш код с учётом новых правил HTML5 и его новых элементов.
Код теперь выглядит нагляднее и проще.
Ещё на эту тему вы можете посмотреть видео, в котором раскрываются другие аспекты на тему ссылок и блоков.
«Блочные» Сcылки в HTML5
Одной из новых и захватывающих вещей, которые можно реализовать в HTML5 является возможность оборачивания ссылками блочных элементов.
Представьте, что есть главная страница с множеством тизеров для новостной ленты, каждый из которых ведет на страницу с полным текстом статьи.
Очевидно, что каждая новость должна иметь заголовок, и наверняка появится желание также добавить иллюстрацию и сделать эти блоки кликабельными. Разметка, вероятно, будет выглядеть как-то так:
Bruce Lawson voted sexiest man on Earth
A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.
Read more
A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.Обратите внимание, что есть три одинаковые ссылки (или две,как на сайте BBC News, если Вы решите, что ваши пользователи не нуждаются в ссылке «Читать далее»).
Код HTML5 будет таким:
Bruce Lawson voted sexiest man on Earth
Read more
Сейчас одна ссылка обрамляет весь тизер, убирая повторяющийся код, и создавая более широкую кликабельную область.
Отмечу также пару особенностей: во-первых, вам не нужно беспокоиться о том, что каждая ссылка “читать далее”ведет на другой ресурс (см. WCAG 2), потому что вся новость является ссылкой, поэтому весь текст ссылки уникальный. Во-вторых, обратите внимание, что я изменил альтернативный текст у изображения. В первом примере изображение является ссылкой, и я описал ее назначение, тогда как во втором примере текст содержит описание самого изображения — ”gorgeous lovebundle” — и тем самым дает больше информации пользователям.
Интересно, что на самом деле, эта техника не нова — вы можете использовать ее сейчас.
XHTML2 имел похожий механизм, который позволял использовать href с любым элементом, что Эрик Мэйер предложил использовать в HTML5, но, конечно, эта техника не является обратно совместимой . Одним из его альтернативных решений этой проблемы было изменение правил для тега а, и моя тестовая страница демонстрирует, что это работает на данный момент в любом браузере.
Еще одна интересная фишка в html5 — он документирует существующее поведение браузера. Так как браузеры уже поддерживают использование ссылок-контейнеров, и существуют очевидные варианты использования, нет смысла искуственно сохранять неверную структуру.
(Ирония: Эрик Мэйер использовал в качестве рабочего примера ссылку, включающую все яйчеки строки в таблице. Это не работает в HTML5; для этого понадобится скрипт.)
P.S. Это тоже может быть интересно:
Если вам понравилась статья, поделитесь ей!
Как сделать весь div ссылкой?
Упс, В моем случае я покрываю весь див прозрачным слоем тега а . Это вообще корректно? А если в этом блоке «производитель» будет тоже ссылкой, его нужно будет абсолютно пиозиционировать и ставить выше индекс?
Вот если производитель будет ссылкой — тогда сложнее. А оно точно надо, чтоб разные части одной сплошной кликабельной области вели в разные места? Может, стоит еще лучше подумать над интерфейсом?
минусы:
1. Не индексируется ПС, ну или как минимум плохо индексируется.
2. Не сохраняет в истории страниц текущую страницу. Чтобы работала кнопка «назад» в браузере, нужно усложнить js-код.
Внутренюю ссылку размещаем так:
zooks, Не согласен — критикуй, критикуешь — предлагай, предлагаешь — делай, делаешь — отвечай! (с) Королев С.П.
Андрей Федоров, «Если мне не нравится, что купленный батон хлеба криво испечен — надо встать у конвейера на хлебзаводе? У DVD хреновые мастеринг и печать — устроиться на завод специалистом по репликации? Если хирург дерьмово провел операцию — взять скальпель и поковыряться в себе самостоятельно?» (с) Номад.
А вообще коммент год назад дан. Забудьте о всяких onmousedown и onclick, выносите все скрипты в отдельный js-файл в листенеры.
В примере нужно просто обернуть дивку в тег
Как разместить ссылку внутри блока по центру, а весь блок сделать ссылкой?
подскажите почему не срабатывает align-items: center и что изменить в коде https://pastebin.com/8M3vzLxK чтоб слово «ССЫЛКА» разместилось по центру блока то есть с одинаковыми отступами слева справа снизу и сверху,а весь блок остался ссылкой
Простой 1 комментарий
надо жн, самый говняную песочницу выбрать да и ещё не открывается, есть же jsfiddle, codepe надо именно pastebin выбрать
Во первых базы хтмл бы выучить сначала, например то что стили обрамляются тегом style.
Во вторых цсс лежит ниже хтмл, соответственно работать вообще не должен.
в третьих не надо тупить, есть нормальные сервисы для работы с хтмл/жс, такие как jsfiddle, codepen, используйте их.
Вообще, чтобы сделать семантически верно, в случае, если в карточке есть ссылка, а кликабельной должна быть вся карточка, тогда делают так:
.card < position: relative; >.card .card__link::after
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link: