Атрибут href в HTML - подробное руководство для начинающих и практикующих разработчиков

Введение

Атрибут href в HTML лежит в основе веб-навигации. Каждый раз, когда вы нажимаете на ссылку в браузере, скорее всего, срабатывает именно href. Через него вы задаете адрес ресурса, на который должен перейти пользователь, задать браузеру место внутри текущей страницы или даже запустить почтовый клиент.

Здесь вы разберете:

• с какими тегами используется href;
• какие бывают типы адресов (URL), которые можно указать в href;
• чем отличаются абсолютные и относительные ссылки;
• как работать с якорями и навигацией внутри страницы;
• как использовать специальные протоколы вроде mailto, tel, ftp и других;
• как href взаимодействует с SEO, безопасностью и доступностью.

Я буду опираться на практические примеры и каждый фрагмент кода сопровождать комментариями, чтобы вам было проще понять происходящее.

Где используется атрибут href

Основные элементы с href

Самый известный элемент, в котором применяется href, — это ссылка:

<a href="https://example.com">Перейти на сайт</a>
<!-- href указывает адрес ресурса, по которому должен перейти пользователь -->

Но не только тег ссылки может содержать href.

Тег a

Тег a (anchor) — основной "носитель" href.

<a href="/about">О компании</a>
<!-- Здесь мы создаем ссылку на страницу /about внутри текущего сайта -->

Без href тег a превращается в "псевдо-ссылку", которая по умолчанию не ведет никуда:

<a>Просто текст без ссылки</a>
<!-- Визуально браузер может стилизовать этот текст как обычный, без поведения ссылки -->

Тег link

Тег link используется для подключения ресурсов к документу: CSS-стилей, иконок и других связей.

<link rel="stylesheet" href="styles.css">
<!-- href указывает путь к файлу таблицы стилей -->

Еще пример:

<link rel="icon" href="/favicon.ico">
<!-- href здесь указывает путь к иконке сайта -->

Тег area

area используется внутри карты изображений (image map) и тоже опирается на href:

<img src="plan.png" usemap="#office-map" alt="План офиса">

<map name="office-map">
  <area shape="rect" coords="10,10,100,100" href="/meeting-room" alt="Переговорная">
  <!-- href задает страницу, на которую попадает пользователь при клике по области -->
</map>

Как устроен href и что он принимает

С точки зрения стандарта

Атрибут href принимает URL (Uniform Resource Locator) — адрес ресурса. В общем виде:

scheme://host:port/path?query#fragment

Схему (scheme) вы видите в начале адреса — http, https, mailto, tel и так далее. href может содержать полный такой адрес, но нередко вы используете только часть (например, только путь или только фрагмент).

Абсолютные и относительные URL в href

Давайте разберемся, чем эти варианты отличаются.

Абсолютный URL

Абсолютный URL включает:

• схему (http или https);
• домен;
• при необходимости порт, путь, параметры и фрагмент.

<a href="https://example.com/products/item1">Товар 1</a>
<!-- Полный адрес с протоколом и доменом -->

Плюсы:

• ссылка работает одинаково с любого сайта;
• явное указание домена, нет зависимости от контекста.

Минусы:

• если домен или структура URL поменяются, придется обновлять ссылки;
• менее гибко при переносе проекта между доменами.

Относительный URL

Относительный путь интерпретируется относительно текущего URL (или базового, о нем чуть позже).

<a href="/products/item1">Товар 1</a>
<!-- Путь относительно корня сайта -->

Другой пример:

<!-- Текущая страница: https://example.com/blog/2025/post.html -->
<a href="comments.html">Комментарии</a>
<!-- Реальный адрес: https://example.com/blog/2025/comments.html -->

Плюсы:

• удобно при работе внутри одного сайта;
• проще переносить сайт на другой домен;
• часто короче и нагляднее.

Минусы:

• зависит от текущего местоположения файла;
• проще допустить логическую ошибку в структуре.

Виды относительных ссылок

1. Относительно текущей директории

<!-- На странице /docs/tutorials/index.html -->
<a href="intro.html">Введение</a>
<!-- Получится /docs/tutorials/intro.html -->

2. Относительно корня сайта

Когда путь начинается с "/", он считается от корня домена:

<a href="/contact">Контакты</a>
<!-- На любом уровне вложенности это укажет на /contact -->

3. Использование ..

Две точки означают "на уровень выше":

<!-- Текущий документ: /docs/tutorials/index.html -->
<a href="../index.html">К разделу Документация</a>
<!-- Получится /docs/index.html -->

Здесь я привожу немного более сложный пример, чтобы вы увидели, как это может выглядеть в реальном проекте:

<!-- Текущий документ: /projects/app/docs/guide/intro.html -->
<a href="../install.html">Установка</a>
<!-- Получится /projects/app/docs/guide/install.html -->

<a href="../../index.html">Главная документация</a>
<!-- Получится /projects/app/docs/index.html -->

Обратите внимание, насколько легко запутаться в количестве ../ при глубокой вложенности.

Специальное значение # и пустой href

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

href="#" — временная или "пустая" ссылка

Часто встречается такой код:

<a href="#">Кликни сюда</a>
<!-- Ссылка ведет на начало текущей страницы -->

Технически это ссылка на фрагмент # (начало документа). Это может вызвать "прыжок" страницы вверх при клике. В современных проектах вместо этого, если нужна "кнопка-обработчик", лучше использовать:

• кнопку с тегом button;
• или ссылку с href="javascript:void(0)" (но это менее предпочтительно);
• или вообще не ставить href, а обрабатывать клик на JavaScript.

Вот пример более корректного подхода:

<button type="button" id="open-modal">
  Открыть окно
</button>
<!-- Здесь мы показываем, что элемент не ссылка, а кнопка действия -->

Пустой href

<a href="">Обновить страницу</a>
<!-- Считается ссылкой на текущий документ -->

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

Фрагменты и якоря: href с

Теперь давайте посмотрим, как с помощью href реализуется прокрутка внутри одной страницы.

Как работает фрагмент (anchor)

Фрагмент — это часть адреса после символа #. Он не отправляется на сервер, а обрабатывается браузером. Пример:

<a href="#features">Перейти к разделу Особенности</a>
<!-- Браузер прокрутит страницу к элементу с id="features" -->

<section id="features">
  <h2>Особенности</h2>
  <!-- Содержимое раздела -->
</section>

Смотрите, что здесь происходит:

• ссылка содержит href="#features";
• браузер ищет элемент с атрибутом id="features";
• если находит, прокручивает страницу так, чтобы этот элемент стал видимым.

Внутренние и внешние якоря

Внутри одной страницы

Простейший и самый частый случай:

<a href="#top">Наверх</a>

<!-- Где-то в начале документа -->
<div id="top"></div>
<!-- Этот элемент станет "якорем" -->

Якорь на другой странице

Вы можете не только прокручивать текущую страницу, но и переходить на определенное место на другом URL:

<a href="/docs/faq.html#payments">Перейти к разделу Оплата</a>
<!-- Сначала откроется /docs/faq.html, затем прокрутится до id="payments" -->

Важно: целевая страница должна содержать элемент с нужным id:

<h2 id="payments">Оплата</h2>
<!-- Именно сюда "прыгает" браузер -->

Комбинация с параметрами

Фрагмент спокойно сочетается с query-параметрами:

<a href="/search?query=html#results">
  Результаты поиска
</a>
<!-- Сначала отрабатывают параметры, затем браузер обрабатывает фрагмент #results -->

Специальные схемы (mailto, tel, и другие)

href может использовать не только http/https. Давайте разберем популярные схемы, которые часто встречаются в проектах.

mailto для отправки писем

Схема mailto открывает почтовый клиент пользователя с уже подставленным адресом и, при желании, темой и телом письма.

<a href="mailto:support@example.com">Написать в поддержку</a>
<!-- При клике откроется установленный почтовый клиент с полем Кому -->

Теперь давайте посмотрим пример с предзаполненной темой и текстом:

<a href="mailto:support@example.com?subject=Вопрос по заказу&body=Здравствуйте, у меня вопрос по заказу 12345">
  Написать по поводу заказа
</a>
<!-- subject и body передаются как параметры URL -->

Комментарий:

• пробелы и спецсимволы в subject и body должны быть закодированы (URL-encoded);
• на практике вы будете подготавливать такие строки программно, особенно если тема зависит от данных.

Пример с кодировкой:

<a href="mailto:support@example.com?subject=Вопрос%20по%20заказу&body=Здравствуйте%2C%20у%20меня%20вопрос%20по%20заказу%2012345">
  Написать по поводу заказа
</a>
<!-- Здесь пробелы заменены на %20, запятая на %2C -->

tel для звонков

tel используется для вызова телефонного приложения, особенно на мобильных устройствах.

<a href="tel:+74951234567">Позвонить нам</a>
<!-- На смартфоне откроется экран дозвона с этим номером -->

Рекомендации:

• используйте международный формат номера (с + и кодом страны);
• в href убирайте пробелы и дефисы, чтобы избежать проблем с распознаванием.

Например:

<a href="tel:+380501234567">+38 050 123-45-67</a>
<!-- В тексте можно оставить форматированный номер, но в href лучше использовать "чистый" -->

Другие схемы, которые вы можете встретить

Иногда вы можете столкнуться и с другими схемами:

• ftp:// — доступ к файлам по FTP;
• skype: или sip: — звонки или сообщения через VoIP-клиенты;
• file:// — доступ к локальной файловой системе (в браузере обычно ограничен).

Пример:

<a href="ftp://example.com/files/report.pdf">Скачать отчет по FTP</a>
<!-- Браузер или FTP-клиент попробуют открыть этот ресурс по FTP -->

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

href и атрибут target

Атрибут target не относится напрямую к href, но сильно влияет на поведение ссылки. Давайте на коротком примере посмотрим, как они работают в паре.

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

Частые значения target:

• _self — открыть в текущем окне (по умолчанию);
• _blank — открыть в новой вкладке/окне;
• _parent, _top — используются с фреймами.

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

<a href="https://external-site.com"
   target="_blank"
   rel="noopener noreferrer">
  Перейти на внешний сайт
</a>
<!-- rel снижает риск атак через доступ к window.opener -->

href и тег base — как изменить "точку отсчета"

Иногда вам нужно задать общую базу для всех относительных ссылок на странице. Для этого существует тег base, который размещается внутри head.

<head>
  <base href="https://docs.example.com/v2/">
  <!-- Все относительные href теперь считаются от этого URL -->
</head>

<body>
  <a href="intro.html">Введение</a>
  <!-- Реальный адрес: https://docs.example.com/v2/intro.html -->
</body>

Обратите внимание:

• base влияет на ВСЕ относительные URL на странице, не только href у ссылок;
• использовать base стоит осторожно, чтобы не запутать себя и других разработчиков;
• на одной странице может быть только один тег base.

Если base указан, ссылка:

<a href="/guide.html">Руководство</a>

по-прежнему будет считаться от корня домена (так работает ведущий слеш), а вот

<a href="guide.html">Руководство</a>

уже относительно base.

Использование href в связке с JavaScript

Интерцепция переходов

Часто нужно повесить обработчик на ссылку и, например, открыть модальное окно вместо перехода по href. Покажу вам, как это реализовано на практике.

<a href="/login" id="login-link">Войти</a>

<script>
// Находим ссылку по id
const loginLink = document.getElementById('login-link');

loginLink.addEventListener('click', function (event) {
  event.preventDefault(); // Отменяем переход по ссылке
  // Здесь мы могли бы открыть модальное окно авторизации
  console.log('Открываем модальное окно авторизации вместо перехода');
});
</script>

Комментарий:

• href по-прежнему указывается, чтобы без JavaScript ссылка вела себя корректно;
• при включенном JS вы можете переопределить поведение.

Это важный принцип прогрессивного улучшения: href задает базовое поведение, а JS может его улучшать.

Чтение и изменение href через JS

<a href="/profile" id="profile-link">Профиль</a>

<script>
// Получаем ссылку
const profileLink = document.getElementById('profile-link');

// Читаем текущий href (полный URL)
console.log(profileLink.href); // Например https://example.com/profile

// Меняем адрес ссылки
profileLink.href = '/profile/settings';
// Теперь клик по ссылке приведет на /profile/settings
</script>

Комментарии:

• свойство element.href возвращает полный URL (с учетом домена);
• при присвоении вы можете использовать как относительный, так и абсолютный путь.

Когда использовать href="javascript:..."

Раньше было популярно:

<a href="javascript:openModal()">Открыть окно</a>
<!-- При клике вызывается JS-функция -->

Сейчас такой подход считается плохой практикой:

• логика смешивается с разметкой;
• хуже читаемость и поддерживаемость;
• сложнее отлаживать и тестировать.

Гораздо аккуратнее повесить обработчик через addEventListener, как мы делали выше, а href использовать для "нормального" адреса или вообще оставить пустым, если это действительно не ссылка.

href, доступность и SEO

Роль href для доступности (a11y)

Для пользователей, которые пользуются экранными читателями или навигацией с клавиатуры, корректные ссылки с href — ключевой элемент ориентации на сайте.

Рекомендации:

• не делайте "ссылки без href" там, где реально нужен переход;
• текст ссылки должен отражать суть назначения, а не быть "кликните здесь";
• чтобы добавить контекста, можно использовать атрибут aria-label.

Пример:

<a href="/pricing" aria-label="Тарифы и цены на услуги">
  Цены
</a>
<!-- aria-label объясняет назначение ссылки более полно -->

Если у вас элемент, который визуально выглядит как ссылка, но не имеет href, для пользователей с клавиатурой он будет недоступен, пока вы дополнительно не настроите обработчики и tabindex.

href и SEO

Поисковые системы используют ссылки с href для обхода сайта и понимания структуры.

Некоторые моменты:

• внутренние ссылки помогают поисковику находить и переиндексировать страницы;
• текст ссылки (anchor text) влияет на то, как поисковик понимает связанный контент;
• ссылки без href (например, с обработчиками JS) обычно не учитываются как стандартные ссылки.

Простой пример внутренней перелинковки:

<p>
  Подробнее о возможностях сервиса читайте в разделе
  <a href="/features">Функциональность</a>.
</p>
<!-- Здесь мы даем поисковику и пользователю понятный анкор -->

Если вы используете относительные или абсолютные URL — для SEO это не принципиально, важно, чтобы конечный адрес был стабильным и корректным.

href в link: стили, иконки и другие ресурсы

Подключение CSS файлов

Тег link с href — основной способ подключать внешние стили.

<link rel="stylesheet" href="/assets/css/main.css">
<!-- href указывает путь к CSS файлу -->

Комментарии:

• лучше указывать относительные пути относительно корня или base;
• браузеры кэшируют CSS по URL, поэтому стабильный href важен для производительности.

Подключение иконок сайта

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<!-- Здесь href задает путь к файлу иконки -->

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

<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">

Частые ошибки и анти-паттерны при работе с href

Ошибка 1: Использование # вместо кнопки

<a href="#" onclick="doSomething()">Сделать что-то</a>
<!-- При клике страница может дергаться вверх, если JS не отработает или отключен -->

Лучший вариант:

<button type="button" onclick="doSomething()">
  Сделать что-то
</button>
<!-- Это действие, а не переход, поэтому кнопка логичнее -->

Ошибка 2: Отсутствие href там, где нужна ссылка

<a class="link" onclick="goToProfile()">Профиль</a>
<!-- Для пользователя с отключенным JS эта ссылка вообще не работает -->

Исправленный вариант:

<a href="/profile" class="link">Профиль</a>
<!-- Базовое поведение - переход по ссылке -->
<script>
// Дополнительно можно улучшить поведение через JS
</script>

Ошибка 3: Некорректное смешение относительных путей

Например, на странице /blog/2025/january/ вы пишете:

<a href="post.html">Статья</a>
<!-- Это приведет на /blog/2025/january/post.html -->

А вы рассчитывали на /blog/post.html. Здесь правильнее:

<a href="/blog/post.html">Статья</a>
<!-- Путь от корня сайта -->

Ошибка 4: Проблемы с кодировкой в mailto

<a href="mailto:info@example.com?subject=Вопрос по оплате">
  Написать
</a>
<!-- Некодированные пробелы и кириллица могут некорректно обработаться -->

Лучше подготовить строку с кодировкой:

<a href="mailto:info@example.com?subject=%D0%92%D0%BE%D0%BF%D1%80%D0%BE%D1%81%20%D0%BF%D0%BE%20%D0%BE%D0%BF%D0%BB%D0%B0%D1%82%D0%B5">
  Написать
</a>
<!-- Здесь тема письма закодирована в UTF-8 и URL-encoded -->

На практике это обычно делает сервер или JavaScript.

Заключение

Атрибут href — один из базовых инструментов HTML, который определяет, куда и как пользователь будет перемещаться по сайту и за его пределами. Через href вы задаете:

• переходы на другие страницы и сайты;
• перемещение внутри одной страницы с помощью якорей;
• открытие почтовых клиентов, звонков и других приложений;
• подключение внешних ресурсов в теге link;
• более сложные сценарии навигации, которые можно дополнять JavaScript.

Ключевые моменты, которые стоит помнить:

• отличайте абсолютные и относительные ссылки и выбирайте их исходя из архитектуры проекта;
• используйте якоря (фрагменты) для удобной навигации по длинным страницам;
• внимательно относитесь к схемам mailto и tel, корректно кодируйте параметры;
• не подменяйте семантику: ссылки с href — для переходов, кнопки — для действий;
• само наличие href важно для доступности и SEO.

Если вы будете относиться к href не как к "просто атрибуту со строкой", а как к механизму навигации со своими правилами и особенностями, структура и поведение ваших веб-приложений станут очевиднее и для пользователей, и для разработчиков.

Частозадаваемые технические вопросы

Как сделать ссылку, которая скачивает файл, а не открывает его в браузере

Вы можете использовать атрибут download вместе с href:

<a href="/files/report.pdf" download="report-2025.pdf">
  Скачать отчет
</a>
<!-- download подсказывает браузеру сохранить файл вместо открытия -->

Комментарии:

• download работает только для того же домена (без специальных настроек CORS);
• вы можете задать имя файла в download или оставить пустым.

Как сделать относительную ссылку на "одну директорию выше" от корня

Если вы хотите ссылку на страницу "на уровень выше" относительно текущего пути, используйте ..:

<!-- На странице /docs/guide/intro.html -->
<a href="../index.html">К разделу Документация</a>

Если нужно именно "от корня", а не от текущей директории, задайте путь от корня:

<a href="/docs/index.html">К разделу Документация</a>

Как правильно сформировать href с несколькими query-параметрами

Параметры пишутся после ?, разделяются &:

<a href="/search?query=html&sort=date&order=desc">
  Найти статьи по HTML
</a>
<!-- Каждый параметр - пара ключ=значение, значения следует URL-кодировать -->

Если значение содержит пробелы или спецсимволы, кодируйте его (например, через encodeURIComponent в JS).

Как сделать ссылку на конкретное место в PDF или другом документе

Стандартно браузеры не поддерживают навигацию к фрагментам внутри PDF по id как в HTML, но вы можете использовать встроенные параметры вьюера, если они есть. Например, для PDF в некоторых браузерах и вьюерах:

<a href="/docs/manual.pdf#page=5">
  Открыть руководство на 5 странице
</a>

Поддержка таких параметров зависит от PDF-вьюера, поэтому проверяйте поведение в целевых средах.

Как отключить переход по ссылке в отдельных случаях (например, по условию)

Вы можете проверять условие в обработчике клика и вызывать preventDefault:

<a href="/pay" id="pay-link">Оплатить</a>

<script>
document.getElementById('pay-link').addEventListener('click', function (event) {
  const isFormValid = false; // Здесь вы проверяете реальное условие

  if (!isFormValid) {
    event.preventDefault(); // Блокируем переход
    alert('Сначала заполните все обязательные поля');
  }
});
</script>

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