Как сделать кликабельный сайт в 2026: ссылки, кнопки, телефон

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

Что именно должно нажиматься

Вопрос обычно появляется, когда контакты на странице есть, но не работают: номер написан обычным текстом, кнопка нарисована блоком без ссылки внутри, картинка товара никуда не ведёт. Что почти всегда должно кликаться:

• Телефон и почта: звонок и письмо одним касанием.
• Кнопки в мессенджеры: Telegram, MAX, WhatsApp.
• Адрес, открывающий карту с готовой точкой.
• Логотип в шапке, ведущий на главную.
• Картинки и карточки товаров целиком.
• Пункты меню, якоря к разделам и кнопка возврата наверх.

Ссылка и кнопка: готовый HTML и CSS

Любой кликабельный элемент на сайте, это тег a с адресом в атрибуте href. Минимальный вариант:

<a href="/contacts">Контакты</a>

Ссылку на чужой сайт открывают в новой вкладке и закрывают доступ к вашей странице через объект opener:

<a href="https://example.ru" target="_blank" rel="noopener">Наш партнёр</a>

Кнопка, это та же ссылка, только со стилями. Не делайте кнопку из div с обработчиком клика: по ней нельзя перейти с клавиатуры, её не читают программы экранного доступа, а поисковый робот не видит за ней перехода.

.btn { display: inline-block; padding: 14px 24px; border-radius: 12px; background: #d85a30; color: #fff; text-decoration: none; font-weight: 600; }

.btn:hover { opacity: 0.9; } .btn:focus-visible { outline: 3px solid #111; outline-offset: 2px; }

Отступы padding увеличивают саму зону нажатия, поэтому кнопка попадает под палец на маленьком экране. Базовая разметка страницы разобрана в материале про сайт на HTML и CSS.

Телефон и почта: клик вместо просьбы скопировать

Для телефона работает схема tel, для почты mailto, обе описаны в справочнике MDN по тегу a (developer.mozilla.org).

<a href="tel:+79001234567">+7 900 123-45-67</a>

В href номер пишется без пробелов, скобок и дефисов, с плюсом и кодом страны. Видимый текст оформляйте как удобно читать.

<a href="mailto:hello@example.ru?subject=Заявка%20с%20сайта">hello@example.ru</a>

Параметр subject подставит тему письма, body добавит текст. Пробел кодируется как %20, перенос строки %0A.

• На телефоне tel открывает набор номера, на компьютере программу для звонков или ничего, поэтому номер всегда оставляйте и видимым текстом.
• mailto открывает почтовую программу. У человека с веб-почтой без неё ничего не произойдёт, так что рядом покажите сам адрес.

Если вместо переписки вам нужны заявки, поля и приём ответов разобраны в статье про сайт с формой заявки.

По теме: Разделы сайта: какие нужны и как сделать структуру в 2026

Кнопки в мессенджеры и текст сообщения

Telegram. Ссылка на аккаунт, канал или бот состоит из адреса t.me и имени пользователя:

<a href="https://t.me/username" target="_blank" rel="noopener">Написать в Telegram</a>

Чтобы человеку сразу подставился текст, берут адрес шаринга из документации по ссылкам Telegram (core.telegram.org):

<a href="https://t.me/share/url?url=https://vash-sayt.ru&text=Здравствуйте%2C%20хочу%20заказать">Поделиться в Telegram</a>

Для бота удобнее параметр start: по ссылке t.me/vash_bot?start=sayt бот увидит, что человек пришёл с сайта.

WhatsApp. Формат click to chat описан в справке сервиса (faq.whatsapp.com): номер только цифрами, без плюса, пробелов и нулей в начале, текст кодируется.

<a href="https://wa.me/79001234567?text=Здравствуйте%2C%20хочу%20заказать">Написать в WhatsApp</a>

Про Россию честно: WhatsApp работает с ограничениями Роскомнадзора. Звонки отключены с августа 2025 года, летом 2026 люди по стране жалуются на сбои с сообщениями и файлами (hi-tech.mail.ru). Если клиенты в России, WhatsApp ставьте дополнительной кнопкой, а основными делайте Telegram, MAX и телефон.

MAX. Ссылка на профиль это адрес max.ru с вашим именем пользователя, оно задаётся в настройках профиля (инструкция eLama). Кнопка собирается так же, как для Telegram.

Картинка, логотип и адрес с картой

Картинка становится кликабельной, если обернуть её в ссылку. Атрибут alt описывает фото и заодно работает текстом ссылки для поиска:

<a href="/tovar/buket-15-roz"><img src="/img/buket.jpg" alt="Букет из 15 роз"></a>

Логотип в шапке ведут на главную, по нему кликают, чтобы вернуться в начало:

<a href="/" class="logo"><img src="/img/logo.svg" alt="Название компании"></a>

Адрес превращают в ссылку на карту с готовой точкой, значения кодируются так же:

<a href="https://yandex.ru/maps/?text=Москва%2C%20Тверская%201" target="_blank" rel="noopener">Москва, Тверская, 1</a>

Если карта нужна на самой странице, конструктор Яндекс Карт выдаёт код вставки для iframe. Текстовую ссылку рядом оставьте: с телефона чаще открывают навигатор.

Якорные ссылки внутри страницы

Якорь, это переход к блоку на той же странице. Нужны две вещи: у раздела свой id, у ссылки решётка с этим же id.

<a href="#price">Цены</a> и ниже по странице <section id="price">...</section>

Плавную прокрутку включает строка CSS, а отступ спасает заголовок от липкой шапки, которая иначе его перекроет:

html { scroll-behavior: smooth; } :target { scroll-margin-top: 90px; }

• id пишется латиницей, без пробелов, и на странице он должен быть один.
• Ссылка на якорь с другой страницы выглядит как /uslugi#price.
• Кнопка «наверх», это тот же якорь на самый верхний блок страницы.

По теме: Как сделать сайт на весь экран в 2026: готовый CSS и промпты

Телефоны: зона нажатия и отступы

Палец, это не курсор мыши. Стандарт доступности WCAG 2.2 требует, чтобы область нажатия была не меньше 24 на 24 CSS-пикселя, и считается именно область, а не размер значка (w3.org).

Это нижняя планка. Apple в рекомендациях по интерфейсу называет комфортным размером 44 на 44 точки (developer.apple.com), Google в Material Design, 48 на 48 dp (m2.material.io).

.btn, .icon-link { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }

• Между соседними кликабельными элементами оставляйте отступ от 8 пикселей, иначе палец промахивается.
• Ссылки в подвале ставьте столбиком, а не плотной строкой через запятую.
• Шрифт ссылок от 16 пикселей: мелкий текст телефон предлагает увеличить, и человек вместо клика зумит.

Остальное про поведение страницы на маленьком экране собрано в разборе мобильной версии сайта.

Самая частая поломка кликабельности, это не код, а прозрачный блок сверху: декоративная полоска или отступ секции ложится поверх кнопки и съедает нажатие. Кнопка выглядит правильно, но не реагирует, значит смотрите, что лежит над ней.

Как проверить, что всё кликается

1. Пройдите пальцем по всем контактам и кнопкам на своём телефоне, а не глазами по макету.
2. Нажмите Tab несколько раз: фокус должен вставать на ссылки и кнопки, и его должно быть видно.
3. Откройте инструменты разработчика (F12), включите режим телефона и посмотрите, не перекрывает ли что-нибудь кнопки.
4. Проверьте адреса: пустой href, решётка вместо ссылки и опечатка в домене, три частые причины «ничего не происходит».
5. Позвоните и напишите себе по ссылкам с сайта: видно, открывается ли мессенджер и доходит ли текст.

По теме: Как сделать сайт-визитку в 2026: три способа и готовый промпт

Промпты, чтобы ИИ сделал элементы кликабельными

ИИ-ассистент (Claude, Codex, конструктор с ИИ внутри) справляется с такой работой, если задача описана конкретно: какой элемент, какой адрес, как вести себя на телефоне.

• «Сделай номер +7 900 123-45-67 в шапке и подвале кликабельным через tel, видимый формат с пробелами оставь, зону нажатия задай от 44 пикселей».
• «Оберни логотип в ссылку на главную, добавь alt с названием компании, кликабельной должна быть вся картинка».
• «Добавь кнопку „Написать в Telegram“ на t.me/username, стиль как у основной кнопки, открывать в новой вкладке с rel noopener».
• «Найди элементы, которые выглядят кликабельными, но ссылками не являются. Покажи список с номерами строк, ничего не меняя без моего ответа».

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

Кликабельность в поиске: заголовок и описание

У запроса есть второй смысл: кликабельность сайта в поисковой выдаче, доля людей, которые видят вашу ссылку и нажимают. Здесь работает текст сниппета: заголовок title с главным запросом ближе к началу и описание description на 120-200 символов. Обещание в нём должно совпадать с содержимым страницы.

Частые вопросы

Почему кнопка на сайте не нажимается?

Три типичные причины: кнопка сделана блоком div без тега a внутри, поверх неё лежит невидимый элемент, или адрес в href пустой. Проверяйте в этом порядке, чаще всего дело в первом.

Как сделать телефон кликабельным только на мобильных?

Отдельная версия не нужна. Ссылка tel работает везде: на телефоне открывает набор номера, на компьютере программу для звонков или ничего, а сам номер человек видит текстом.

Можно ли сделать кликабельной всю карточку товара?

Да, оберните содержимое карточки в один тег a. Главное, не вкладывайте ссылку в ссылку: браузер такую разметку чинит по-своему, и клик уходит не туда. Если внутри нужна вторая кнопка, растяните ссылку заголовка на всю площадь псевдоэлементом ::after.