Как сделать ссылку в HTML

Ссылка — тег <a> с атрибутом href. Между тегами — текст, по которому щёлкают:

<a href="https://developer.mozilla.org/ru/">Справочник MDN</a>

Все частые виды ссылок

<!-- на другой сайт -->
<a href="https://example.com/">Сайт примера</a>

<!-- на страницу своего сайта -->
<a href="contacts.html">Контакты</a>
<a href="recipes/pie.html">Рецепт пирога</a>
<a href="../index.html">На главную</a>

<!-- в новой вкладке -->
<a href="https://example.com/" target="_blank">Откроется в новой вкладке</a>

<!-- к месту на этой странице -->
<a href="#prices">Цены</a>

<!-- письмо и звонок -->
<a href="mailto:info@example.com">info@example.com</a>
<a href="tel:+375291234567">+375 29 123-45-67</a>

<!-- скачать файл -->
<a href="files/price.pdf" download>Скачать прайс (PDF)</a>

• Другой сайт — полный адрес с https://. Без него example.com браузер примет за файл на вашем сайте.
• Своя страница — путь относительно текущей страницы: contacts.html — в той же папке, recipes/pie.html — в подпапке, ../ — на уровень вверх. Подробно — в уроке Картинки и пути к файлам.
• Новая вкладка — target="_blank". Не открывайте так ссылки своего сайта: посетители не любят, когда вкладки множатся сами.
• Место на странице — # и id нужного элемента: <h2 id="prices">Цены</h2>. Со страницы на место другой страницы — contacts.html#map.
• Почта — mailto: и адрес, телефон — tel: и номер без пробелов с кодом страны.
• Скачать — атрибут download: браузер сохранит файл, а не откроет его. Работает для файлов своего сайта.

Картинка-ссылка и ссылка-блок

Внутрь <a> можно положить картинку или целый блок — тогда ссылкой станет вся карточка:

<a href="recipes/pie.html">
  <img src="images/pie.jpg" alt="Яблочный пирог" width="300" height="200">
</a>

Одно ограничение: ссылку нельзя вкладывать в другую ссылку, а кнопку — в ссылку.

Подводные камни

• Ссылка ведёт «не туда» — опечатка в пути или забыт https://. Наведите мышь на ссылку: внизу окна браузера появится адрес, куда она ведёт.
• Ссылка не щёлкается — её закрыл другой блок (часто прозрачный, с position). Проверьте в инструментах разработчика (F12), что лежит сверху.
• Текст ссылки «здесь» и «тут» — плохо и для людей, и для поисковиков. Пишите, куда ведёт ссылка: «Расписание занятий».
• Синий цвет и подчёркивание — это оформление браузера по умолчанию, его меняют в CSS. Как убрать подчёркивание — в справке Как убрать подчёркивание ссылки.

Для действий без перехода на другую страницу (открыть окно, отправить форму) ссылка не подходит — нужна кнопка <button>. Подробно — в справке Как сделать кнопку.