Создание кликабельного DIV в HTML: все область — ссылка

Быстрый ответ

Для превращения элемента <div> в кликабельный, достаточно обернуть его в тег <a>:

<a href="https://example.com" style="display: inline-block; text-decoration: none;">
  <div style="color: black; border: 1px solid #ccc; padding: 10px;">
    Нажми на меня крепко, ведь я – div
  </div>
</a>

Свойство display: inline-block; позволит тегу <a> принять границы <div>, а text-decoration: none; оставит текст неизменным.

Адаптация под ваши задачи

Ставим на службу JavaScript

Если подход с оборачиванием <div> в тег <a> вам не подходит, (например, появились технические ограничения), следует прибегнуть к JavaScript:

<div onclick="window.location.href='https://example.com';" style="cursor: pointer;">
  Кликабельный Div
</div>

Этот пример позволит выполнить переход на https://example.com, когда пользователь кликнет на div. Рекомендуется изменить вид курсора на указатель — стандартный признак интерактивности элемента.

Подробнее об этом расскажет наш спикер на видео

Не забываем о пользователях

Учитывая вопросы доступности и валидности кода, не забудьте про пользователей экранных читалок. В таких случаем внутрь <a> следует поместить <div>, дополнив CSS для корректного отображения:

<a href="https://example.com" style="display: block; width: 100%; height: 100%;">
  <div>
    Нам не нужны дороги там, куда мы идем
  </div>
</a>

Альтернативная версия без использования JavaScript

Смоделируйте решение для тех, кто отключил JavaScript. Тег <a> будет вам помощником, а тег noscript предоставит альтернативное содержание:

<noscript>
  <a href="https://example.com">Ссылка для осторожных</a>
</noscript>

Визуализация

Ваша миссия — преобразование обычного div в интерактивную кнопку:

Прежде: [📦 Обычный div в повседневной реальности]
После: [📦✨ Div, открывающий новые горизонты 🚪] // Встречайте, уникальный кликабельный div!

Теперь ваш div становится не просто элементом управления, а настоящим порталом в любой уголок веба с соответствующей URL-ссылкой.

Мастерство создания "ссылочных" div

Эксплуатация возможностей CSS

Извлеките максимальную пользу из CSS, чтобы сделать взаимодействие более приятным. Экспериментируйте с эффектами при наведении, изменением цвета фона и границ при фокусе, сохраняя при этом читаемость текста:

div.link-like {
  border: 1px solid #ccc;
  padding: 10px; /* Как мягкая подушка */
}

div.link-like:hover {
  background-color: lightblue; /* Как прикосновение нежного прибоя */
}

div.link-like:focus {
  border-color: blue; /* Блестящее как улыбка смурфика */
}

SEO-оптимизация для ссылок

Создание кликабельных областей на странице требует различных методик SEO. Старайтесь использовать описательный и актуальный текст, чтобы повысить видимость вашего сайта в поисковых системах.

Открытие ссылки в новой вкладке

Вопрос о необходимости открытия ссылок в новой вкладке продолжает вызывать дискуссии среди веб-дизайнеров. Использование window.open в обработчике onclick поддерживает эту практику:

document.getElementById('clickable-div').addEventListener('click', function() {
  window.open('https://example.com');
  // "Увидимся на новой вкладке"
});

Иногда более удобным оказывается использование location.href для перехода по ссылке.

Полезные материалы

1. Make Entire Div Clickable | CSS-Tricks
2. <a>: Элемент-якорь – HTML: язык разметки гипертекста | MDN
3. Как создать изображение на весь экран
4. css – Сделать div кликабельным – Stack Overflow
5. "Блоковые" ссылки в HTML5 | HTML5 Doctor
6. HTML Standard
7. WebAIM: CSS в действии – невидимый контент, предназначенный только для пользователей экранных читалок