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

В HTML4 ответ на этот вопрос однозначный — внутрь ссылки можно вставлять только текстовые элементы и картинки. И для простых ситуаций с этим никаких проблем нет — если нам нужно, к примеру, сделать заголовок ссылкой, то <a> мы добавляем внутрь <h1>, но никак не наоборот.

<h1><a href="1.html">Заголовок</a></h1>

При этом надо помнить, что область ссылки ограничена размером текста. <h1> элемент блочный, он занимает всю ширину области просмотра, а ссылка строчная, её размер определяется размером содержимого. Так что щелчок не по тексту, а просто по этой строке ничего не даст. Для данного примера это может и не принципиально, а вот для какого-нибудь меню, где пункты меню визуально больше текста, важно. Поэтому мы модифицируем стиль ссылки, чтобы она занимала всё пространство внутри блока.

a {
  display: block;
}

Вот теперь размер ссылки равен размеру блока и щелчок по любому месту блока воспринимается как переход по ссылке.

В более сложных и распространённых ситуациях блок представляет собой комбинацию заголовка, картинки и подписи к ней. Вспомните любой интернет-магазин с витриной товаров и вы поймёте, насколько популярны блоки, которые одновременно являются ссылками, ведь они должны вести на описание товара. Код HTML может быть примерно таким.

<div class="stock">
  <div class="stock-img">
    <a href="/stock/gimnasticheskiy-myach">
      <img src="/images/stock/thumb/fitbol.jpg" width="150" height="150" alt="">
    </a>
  </div>
  <div class="stock-title">
    <a href="/stock/gimnasticheskiy-myach">Гимнастический мяч</a>
  </div>
</div>

Таким образом, каждую часть нашего блока (картинку и название) мы оборачиваем одной и той же ссылкой и в стилях ставим ей свойство display со значением block. Тогда весь блок целиком визуально будет представлять собой одну ссылку, хотя на деле это набор ссылок.

Всё это относилось к HTML4, и на наше счастье в HTML5 ситуация поменялась. При этом, все описанные приёмы остались с нами, но и добавилось кое-что новое. Теперь мы можем внутрь ссылки вставлять блоки целиком. Вот как преобразуется наш код с учётом новых правил HTML5 и его новых элементов.

<a href="/stock/gimnasticheskiy-myach">
  <figure class="stock">
    <img src="/images/stock/thumb/fitbol.jpg" width="150" height="150">
    <figcaption>Гимнастический мяч</figcaption>
  </figure>
</a>

Код теперь выглядит нагляднее и проще.

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