«Блочные» С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. Это тоже может быть интересно:

5 Комментарии

  1. axlerk

    Спасибо за перевод, но почему ссылки не перенесли из оригинальной публикации?
    Предположим, что "…Эрик Мэйер предложил использовать в HTML5…" и "WCAG 2" убрали, потому что ссылаются на англоязычные материалы, что несколько странно, но предположим. Но вот без "…и моя тестовая страница демонстрирует…" совсем как-то странно.

    1. psywalker

      Ссори, исправил.

      1. axlerk

        Отлично =)

  2. ZenCoder.pro

    Хм … Решение интересное, но как быть с семантикой? Как бы в ссылку пихать все подряд — не очень хорошая затея.

    1. Павел

      Как раз это очень логично — с точки зрения использования — напирмер часто меню необходимо делать из "плиток" в которых иконка/картинка и дескрипшен. Или например когда вся плитка товара на странице категории ( кромен кнопки корзиные естественно) является ссылкой — это удобно пользователю. Особенно мобильному.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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