Как сделать гиперссылку на сайте

Гиперссылка на сайте может вести на другую страницу, файл, телефон, почту, мессенджер, блок внутри этой же страницы или внешний ресурс. Пользователь приходит за простым ответом: какой код вставить и почему ссылка не работает. Поэтому начнем с готовых примеров

Обычная ссылка в HTML состоит из адреса внутри href и видимого текста между тегами. Текст ссылки должен объяснять действие, а не прятаться за фразой нажмите здесь

Базовая ссылка в HTML

<a href="https://example.com">Перейти на сайт</a>

Если ссылка ведет на страницу внутри этого же сайта, часто используют относительный путь:

<a href="/contacts/">Контакты</a>
<a href="/services/site/">Создание сайта</a>

Если страница находится рядом с текущим файлом:

<a href="about.html">О проекте</a>

Проверьте, что путь совпадает с реальным названием файла или раздела. About.html и about.html на сервере могут быть разными файлами

Ссылка в новой вкладке

Для внешней ссылки часто открывают новую вкладку:

<a href="https://example.com" target="_blank" rel="noopener">
  Открыть пример
</a>

target="_blank" открывает ссылку в новой вкладке. rel="noopener" добавляют для безопасности, чтобы новая страница не получила лишний доступ к исходной вкладке

Не открывайте все ссылки в новой вкладке автоматически. Для внутренних переходов по сайту чаще удобнее обычное открытие в этой же вкладке

Ссылка на телефон, почту и мессенджер

Телефон:

<a href="tel:+79991234567">Позвонить: +7 999 123-45-67</a>

Почта:

<a href="mailto:hello@example.com">Написать на почту</a>

Почта с темой письма:

<a href="mailto:hello@example.com?subject=Заявка%20с%20сайта">
  Отправить заявку
</a>

Telegram:

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

WhatsApp:

<a href="https://wa.me/79991234567">Написать в WhatsApp</a>

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

Ссылка на файл

Если нужно дать скачать прайс, договор, инструкцию или презентацию:

<a href="/files/price.pdf" download>Скачать прайс</a>

Не называйте файл document-final-new2.pdf. Лучше:

price-remont-noutbukov-2026.pdf

Проверьте, что файл открывается у посетителя без входа в админку. Частая ошибка в WordPress и конструкторах: автор копирует ссылку на файл из личной панели, а не публичный адрес

Ссылка на блок внутри страницы

Чтобы кнопка вела к форме ниже по странице, добавьте блоку id:

<section id="signup">
  <h2>Запись на консультацию</h2>
  <form>...</form>
</section>

Ссылка на этот блок:

<a href="#signup">Перейти к форме</a>

id должен быть уникальным на странице. Если одинаковых id несколько, браузер может прокрутить не туда

Для плавной прокрутки можно добавить CSS:

html {
  scroll-behavior: smooth;
}

Как оформить ссылку кнопкой

Ссылка может выглядеть как кнопка, если она ведет на другую страницу или к блоку:

<a class="button" href="#signup">Записаться</a>

.button {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 6px;
  background: #2457ff;
  color: #fff;
  text-decoration: none;
}

.button:hover,
.button:focus {
  background: #173bcc;
}

Если действие отправляет форму, удаляет данные или открывает модальное окно, часто лучше использовать настоящий <button>. Ссылка нужна для перехода, кнопка нужна для действия на текущей странице

Как добавить ссылку в WordPress, Tilda или редакторе

В визуальном редакторе порядок обычно такой:

1. выделить текст
2. нажать значок ссылки
3. вставить адрес
4. выбрать режим открытия, если нужно
5. сохранить страницу
6. открыть опубликованную версию
7. кликнуть по ссылке как обычный посетитель

Не проверяйте ссылку только в режиме редактирования. Редактор может показывать черновой путь, который отличается от опубликованной страницы

Почему ссылка не работает

Проверьте по порядку:

• во внешнем адресе есть https://
• внутри href нет лишнего пробела
• кавычки закрыты
• файл действительно загружен
• путь начинается с /, если это раздел от корня сайта
• у блока есть нужный id
• страница опубликована, а не лежит в черновике
• ссылка не перекрыта другим элементом CSS

Если ссылка кликается, но ничего не происходит, откройте инструменты разработчика и посмотрите, нет ли поверх нее прозрачного блока. В конструкторах такое бывает после неудачного позиционирования

Хороший текст ссылки

Текст ссылки должен быть понятен без соседнего абзаца

Плохо:

<a href="/price.pdf">тут</a>

Лучше:

<a href="/price.pdf">Скачать прайс на ремонт</a>

Еще примеры:

<a href="/contacts/">Посмотреть адрес и контакты</a>
<a href="#faq">Перейти к вопросам по оплате</a>
<a href="/portfolio/">Смотреть примеры работ</a>

Так ссылка помогает и пользователю, и поисковой системе понять смысл перехода

Чек-лист

• ссылка ведет туда, куда обещает текст
• внешний адрес начинается с https://
• телефонная ссылка проверена с телефона
• файл открывается без входа в админку
• якорная ссылка прокручивает к нужному блоку
• текст ссылки понятен
• у внешней ссылки в новой вкладке есть rel="noopener"
• ссылка видна с клавиатуры через фокус
• после публикации все проверено вручную

Часто задаваемые вопросы

Чем ссылка отличается от кнопки

Ссылка ведет на страницу, файл, блок или внешний ресурс. Кнопка выполняет действие: отправляет форму, открывает окно, запускает сценарий

Нужно ли открывать внешние ссылки в новой вкладке

Можно, но не обязательно. Для справочных внешних материалов это удобно, для обычной навигации по сайту чаще лучше оставлять переход в той же вкладке

Почему ссылка на файл скачивает не тот документ

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

Можно ли сделать ссылку на номер телефона

Да, используйте tel:+79991234567. На смартфоне такая ссылка запускает звонок, если номер указан без пробелов и лишних символов