Чи можна обгортати блок посиланням?

У 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>

Код тепер виглядає більш наочно та просто.

Додатково ви можете переглянути відео, де розкриваються інші аспекти щодо посилань та блоків.