«Блочные» Сcылки в HTML5
Одной из новых и захватывающих вещей, которые можно реализовать в HTML5 является возможность оборачивания ссылками блочных элементов.
Представьте, что есть главная страница с множеством тизеров для новостной ленты, каждый из которых ведет на страницу с полным текстом статьи.
Очевидно, что каждая новость должна иметь заголовок, и наверняка появится желание также добавить иллюстрацию и сделать эти блоки кликабельными. Разметка, вероятно, будет выглядеть как-то так:
<div class="story"> <h3><a href="story1.html">Bruce Lawson voted sexiest man on Earth</a></h3> <p><a href="story1.html"><img src="bruce.jpg" alt="full story. " />A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.</a></p> <p><a href="story1.html">Read more</a></p> </div>
Обратите внимание, что есть три одинаковые ссылки (или две,как на сайте BBC News, если Вы решите, что ваши пользователи не нуждаются в ссылке "Читать далее").
Код HTML5 будет таким:
<article> <a href="story1.html"> <h3>Bruce Lawson voted sexiest man on Earth</h3> <p><img src="bruce.jpg" alt="gorgeous lovebundle. ">A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.</p> <p>Read more</p> </a> </article>
Сейчас одна ссылка обрамляет весь тизер, убирая повторяющийся код, и создавая более широкую кликабельную область.
Отмечу также пару особенностей: во-первых, вам не нужно беспокоиться о том, что каждая ссылка “читать далее”ведет на другой ресурс (см. WCAG 2), потому что вся новость является ссылкой, поэтому весь текст ссылки уникальный. Во-вторых, обратите внимание, что я изменил альтернативный текст у изображения. В первом примере изображение является ссылкой, и я описал ее назначение, тогда как во втором примере текст содержит описание самого изображения — ”gorgeous lovebundle” — и тем самым дает больше информации пользователям.
Блестяще, но не ново.
Интересно, что на самом деле, эта техника не нова — вы можете использовать ее сейчас.
XHTML2 имел похожий механизм, который позволял использовать href с любым элементом, что Эрик Мэйер предложил использовать в HTML5, но, конечно, эта техника не является обратно совместимой . Одним из его альтернативных решений этой проблемы было изменение правил для тега а, и моя тестовая страница демонстрирует, что это работает на данный момент в любом браузере.
Еще одна интересная фишка в html5 — он документирует существующее поведение браузера. Так как браузеры уже поддерживают использование ссылок-контейнеров, и существуют очевидные варианты использования, нет смысла искуственно сохранять неверную структуру.
(Ирония: Эрик Мэйер использовал в качестве рабочего примера ссылку, включающую все яйчеки строки в таблице. Это не работает в HTML5; для этого понадобится скрипт.)
P.S. Это тоже может быть интересно:
Спасибо за перевод, но почему ссылки не перенесли из оригинальной публикации?
Предположим, что "…Эрик Мэйер предложил использовать в HTML5…" и "WCAG 2" убрали, потому что ссылаются на англоязычные материалы, что несколько странно, но предположим. Но вот без "…и моя тестовая страница демонстрирует…" совсем как-то странно.
Ссори, исправил.
Отлично =)
Хм … Решение интересное, но как быть с семантикой? Как бы в ссылку пихать все подряд — не очень хорошая затея.
Как раз это очень логично — с точки зрения использования — напирмер часто меню необходимо делать из "плиток" в которых иконка/картинка и дескрипшен. Или например когда вся плитка товара на странице категории ( кромен кнопки корзиные естественно) является ссылкой — это удобно пользователю. Особенно мобильному.