Ссылки в HTML: тег a, href, якоря, телефон и почта

Ссылка — самый частый тег на любом сайте: меню, переход к разделу, телефон в подвале, логотип, который ведёт на главную. Все они сделаны одним тегом <a>, а куда он ведёт, решает один атрибут.

Ссылка в HTML — это <a href="адрес">текст</a>: href говорит, куда вести, а между тегами пишут то, на что нажимают. Адрес может вести на другой сайт, на страницу этого сайта, к разделу текущей страницы через #, на звонок через tel: или на новое письмо через mailto:.

Пример: меню с якорями и контакты

Открой пример в песочнице HTML/CSS ссылкой под вторым блоком: разметка попадёт во вкладку index.html, стили — в styles.css. В песочнице ссылки не уводят со страницы: «О кофейне» и «Контакты» прокручивают её к разделам, а ссылка на блог пишет в консоль свой адрес и предлагает открыть его отдельно. Ссылки tel: и mailto: в песочнице не срабатывают, их проверяют на настоящей странице.

HTML:

<nav class="menu">
  <a class="logo" href="/">
    <img src="logo.png" alt="Кофейня «Зерно» — на главную" width="40" height="40">
  </a>
  <a href="#about">О кофейне</a>
  <a href="#contacts">Контакты</a>
</nav>

<section id="about">
  <h2>О кофейне</h2>
  <p>Варим кофе с 2019 года. Как выбрать зерно, рассказываем <a href="https://example.com/blog" target="_blank">в блоге</a>.</p>
</section>

<section id="contacts">
  <h2>Контакты</h2>
  <ul>
    <li>Телефон: <a href="tel:+70000000000">+7 000 000-00-00</a></li>
    <li>Почта: <a href="mailto:hello@example.com?subject=Мастер-класс">hello@example.com</a></li>
  </ul>
</section>

CSS:

body {
  margin: 0;
  padding: 0 1rem;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.menu {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e3d6c8;
}

.menu a {
  font-weight: 600;
  text-decoration: none;
}

section {
  min-height: 70vh;
}

a {
  color: #1d4ed8;
  text-underline-offset: 3px;
}

a:hover {
  color: #c62828;
}

a:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

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

Куда ведёт href: полные, относительные адреса и якоря

Полный адрес. https://example.com/blog начинается с протокола и ведёт на любой сайт. Так ставят ссылки на чужие страницы.

От корня сайта. /menu начинается с косой черты: браузер возьмёт адрес текущего сайта и допишет /menu. Такая ссылка ведёт в одно место, на какой бы странице сайта она ни стояла.

От текущей страницы. menu.html или docs/menu.html без косой черты — путь от папки, где лежит текущая страница. Если страницу перенести в другую папку, такие ссылки сломаются, поэтому внутри сайта чаще пишут адреса от корня.

Якоря: переход к разделу страницы

Ссылка href="#contacts" ведёт к элементу с id="contacts" на этой же странице: браузер прокручивает её так, чтобы элемент оказался вверху окна. Имя после решётки должно совпадать с id буква в букву, иначе ссылка никуда не перейдёт. href="#" с пустым именем ведёт в самое начало страницы.

На раздел другой страницы ведут так же: /menu#desserts откроет страницу меню и прокрутит её к разделу с id="desserts". Если шапка прилипает к верху окна и закрывает начало раздела, помогает свойство scroll-margin-top у раздела: scroll-margin-top: 4rem оставит над ним место под шапку.

Ссылка на телефон и почту

Телефон. href="tel:+70000000000" — номер в международном виде, без пробелов, скобок и дефисов. На телефоне нажатие предложит позвонить, на компьютере — открыть приложение для звонков. Номер для людей между тегами можно писать как удобно: +7 000 000-00-00.

Почта. href="mailto:hello@example.com" откроет новое письмо в почтовой программе. После знака вопроса можно заранее задать тему: ?subject=Мастер-класс. Если почтовой программы нет, может не произойти ничего, поэтому адрес стоит писать и текстом ссылки — его можно скопировать.

Новая вкладка и картинка-ссылка

target=“_blank”. Открывает ссылку в новой вкладке. Его ставят ссылкам на другие сайты и документы, а внутри своего сайта обычно не ставят: человек и так вернётся назад кнопкой браузера. Раньше к target="_blank" обязательно добавляли rel="noopener", чтобы новая вкладка не получила доступ к старой. Современные браузеры делают так сами, но запись не помешает.

Картинка-ссылка. Если положить <img> внутрь <a>, ссылкой станет картинка — так делают логотип, который ведёт на главную. У такой картинки alt описывает не рисунок, а куда ведёт ссылка: «Кофейня «Зерно» — на главную». Без alt у ссылки не останется текста, и программа чтения с экрана назовёт разве что адрес.

Скачать файл. Атрибут download предлагает сохранить файл, а не открыть его: <a href="/menu.pdf" download>скачать меню</a>. Работает для файлов своего сайта.

Оформление ссылок и их текст

У ссылки есть состояния, и для каждого есть псевдокласс: :hover — под курсором, :focus-visible — в фокусе с клавиатуры, :visited — уже посещённая, :active — в момент нажатия. В примере ссылка краснеет при наведении и получает рамку при переходе по Tab. Убирать рамку фокуса без замены нельзя: с клавиатуры станет не видно, где ты на странице.

text-decoration: none убирает подчёркивание — в меню это нормально, а в тексте подчёркивание помогает отличить ссылку от остальных слов. text-underline-offset отодвигает линию от букв.

Текст ссылки — не «здесь». Человек с программой чтения с экрана часто слушает список ссылок страницы без окружающего текста. «Подробнее здесь» в таком списке ничего не говорит, а «в блоге о выборе зерна» — говорит. Поэтому ссылкой делают слова, которые называют, куда она ведёт.

Шпаргалка по ссылкам

Три правки, чтобы закрепить

Открой пример в песочнице и перед каждой правкой предскажи результат:

1. Убери решётку у ссылки «Контакты»: href="contacts". Страница перестанет прокручиваться, а консоль покажет адрес, который заканчивается на /contacts: без решётки это уже ссылка на другую страницу.
2. Поменяй у раздела id="contacts" на id="contact". «Контакты» перестанет прокручивать: якорь ищет точное совпадение.
3. Сотри у логотипа атрибут alt. На месте картинки останется значок незагруженного файла, а у ссылки не будет никакого текста — непонятно, куда она ведёт.

Ссылки — часть разметки вместе с другими тегами HTML, а оформить их по-своему помогут селекторы CSS.