Тег <​a​> в HTML: как делать ссылки на страницы, файлы и разделы
2026-02-21 10:02 Diff
https://skillbox.ru/media/code/teg-a-v-html-kak-delat-ssylki-na-stranicy-fayly-i-razdely/

#статьи

  • 23 июл 2025
  • 0

Разбираем атрибуты href, target, rel, якоря, скачивание файлов и другие возможности тега <​a​>.

Иллюстрация: Оля Ежак для Skillbox Media

Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

Тег <a> — основа навигации в HTML. С его помощью создаются ссылки, которые ведут на другие страницы, на разделы внутри сайта, на email, телефоны, файлы или даже запускают JavaScript. В этом руководстве мы покажем, как работает <a>, зачем нужен каждый его атрибут и какие ошибки чаще всего делают новички.

Содержание

Тег <a> (от anchor — «якорь») в HTML используется для создания ссылок. С его помощью можно направить пользователя на другую страницу, документ, email или даже начать звонок.

Это парный тег: у него есть открывающая и закрывающая часть — <a> и </a>. Между ними помещается текст, на который можно кликнуть.

Вот самый простой пример:

<a href="https://skillbox.ru/">Официальный сайт Skillbox</a>

В браузере это будет выглядеть как обычная синяя ссылка: Официальный сайт Skillbox. Если кликнуть на неё, откроется главная страница Skillbox.

Чтобы ссылка заработала, тегу <a> нужен атрибут href. Он указывает, куда должен перейти пользователь после клика. Без href это просто оформленный текст, а не настоящая ссылка.

Атрибут href умеет работать с разными типами адресов — не только с веб-сайтами. Давайте разберём на примерах.

Самый привычный случай — ссылка на веб-страницу. Указываем адрес, и пользователь попадёт туда при клике:

<a href="https://skillbox.ru/">Официальный сайт Skillbox</a>

Если вы хотите дать доступ к файлу через FTP-протокол, можно сделать так:

<a href="ftp://example.com/file.zip">Скачать файл по FTP</a>

Такой формат используется всё реже — в основном для внутренних систем.

Можно создать ссылку на файл на вашем компьютере:

<a href="file:///C:/Users/User/Documents/file.txt">Открыть локальный файл</a>

Но это работает только у вас — с другого компьютера такую ссылку не откроешь. Такие ссылки обычно используют во время тестирования.

Иногда нужно сделать ссылку, которая никуда не ведёт. Например, вы ещё не решили, куда будет вести кнопка, или хотите просто отловить клик с помощью JavaScript.

В таких случаях можно написать:

<a href="#">Открыть эту же страницу</a> <a href="">Ещё вариант</a>

При клике браузер либо остановится на месте, либо прокрутит страницу вверх. Это удобно, если вы хотите «поймать» клик с помощью JavaScript.

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

<a href="https://site.com/file.pdf" download>Скачать PDF</a>

Браузер предложит сохранить файл на компьютер, а не откроет его.

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

<a href="mailto:hello@skillbox.ru">Написать в Skillbox</a>

Это работает, если у пользователя установлен почтовый клиент (например, Outlook или Mail).

На мобильных устройствах удобно делать кликабельные номера:

<a href="tel:+78006007847">Позвонить нам</a>

Когда человек нажмёт на такую ссылку, телефон сразу предложит набрать номер.

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

Это работает просто.

Назначаем имя блоку, в который хотим попасть. Для этого используем атрибут id:

<section id="about"> <h2>О нас</h2> <p>Этот раздел рассказывает о нашей команде.</p> </section>

Создаём ссылку на этот id, добавляя href="#имя":

<a href="#about">Перейти к разделу «О нас»</a>

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

Можно сделать и обратный переход — например, кнопку «Наверх»:

<a href="#top">Вернуться к началу</a>

Для этого где-то в начале страницы нужно поставить:

<div id="top"></div>

Помните, что имя якоря (id) на странице должно быть уникальным. Иначе браузер запутается и не поймёт, куда вести пользователя.

Кстати, переходы по якорям можно сделать не только с помощью ссылок <a>, но и с помощью кнопок или элементов меню. Например, если вы хотите, чтобы кнопка перенесла пользователя к нужному разделу страницы, можно написать так:

<button onclick="location.href='#about'">Перейти к разделу «О нас»</button>

При клике браузер выполнит переход к блоку с id="about", как если бы это была обычная ссылка.

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

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

<a href="https://skillbox.ru">Открыть в этой вкладке</a>

Или:

<a href="https://skillbox.ru" target="_self">Открыть в этой вкладке</a>

Если вы хотите, чтобы ссылка открывалась в новой вкладке браузера, используйте target="_blank":

<a href="https://google.ru" target="_blank">Открыть в новой вкладке</a>

Используйте blank, если хотите, чтобы пользователь не потерял страницу. Например, если вы ведёте его на внешний сайт, а он ещё не дочитал вашу статью.

Представьте, что внутри вашей страницы есть небольшое «окошко»: в нём загружается другая HTML-страница. Это и есть фрейм, а точнее, тег <iframe>. Он позволяет показывать один сайт внутри другого. Фреймы используют довольно редко — чаще <iframe> применяется для встраивания видео с YouTube, карт или блоков комментариев.

Иногда бывает нужно, чтобы ссылка меняла содержимое именно этого фрейма, а не открывала новую вкладку или страницу. Вот тут и помогает атрибут target.

Основные значения target для фреймов:

  • _self — открывает ссылку в том же фрейме, где была нажата. Это значение используется по умолчанию.
  • _parent — открывает ссылку в родительском окне, которое содержит фрейм.
  • _top — покидает фрейм и открывает ссылку во всём окне браузера.

Например у нас есть два HTML-файла, index (родительский) и inner (встроенный в index).

Родительский документ:

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Родительский документ</title> </head> <body> <h1>Родительский документ</h1> <p>Ниже находится встраиваемый фрейм (iframe), который загружает страницу <strong>inner.html</strong>:</p> <iframe src="inner.html" width="600" height="300"></iframe> </body> </html>

Вложенная страница:

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Вложенная страница</title> </head> <body> <h2>Вложенная страница</h2> <p>Ниже приведены ссылки с разными значениями атрибута <code>target</code>:</p> <ul> <li> <strong>target="_self"</strong>: открывает ссылку в том же фрейме, где она расположена. <br> <a href="https://example.com" target="_self">Открыть в текущем iframe (_self)</a> </li> <li> <strong>target="_parent"</strong>: открывает ссылку в родительском документе, т. е. заменяет содержимое контейнера, в котором встроен iframe (в нашем случае это index.html). <br> <a href="https://example.com" target="_parent">Открыть в родительском документе (_parent)</a> </li> <li> <strong>target="_top"</strong>: открывает ссылку во всем окне браузера, убирая все фреймы. <br> <a href="https://example.com" target="_top">Открыть в верхнем окне (_top)</a> </li> </ul> <p>Попробуйте кликать по каждой ссылке и посмотрите, как меняется содержимое окна браузера.</p> </body> </html>

В браузере это будет выглядеть вот так:

Скриншот: Google Chrome / Skillbox Media

Если мы кликнем по ссылке со значением _self атрибута target, то контент загрузится в текущем фрейме, не меняя содержимое всей страницы:

Скриншот: Google Chrome / Skillbox Media

При клике на другие ссылки окно откроется уже в родительском фрейме или во всём окне браузера:

Скриншот: Google Chrome / Skillbox Media

Когда вы используете target="_blank" — то есть открываете ссылку в новой вкладке, браузер по умолчанию сохраняет связь между старой и новой страницей. Это означает, что внешний сайт может получить доступ к вашей странице через специальную переменную window.opener и, например, попытаться изменить её или перенаправить пользователя на фишинговый сайт.

Чтобы этого не допустить, к ссылке добавляют rel="noopener", — он разрывает эту связь и делает переход безопасным.

Если вы не хотите, чтобы внешний сайт вообще знал, откуда пришёл пользователь (то есть не получал адреса вашей страницы), используют rel="noreferrer".

Основные значения rel:

  • noopener — блокирует доступ новой вкладке к вашей странице. Это защита от потенциальных атак.
  • noreferrer — скрывает адрес вашей страницы от сайта, на который ведёт ссылка.
  • nofollow — говорит поисковым системам не учитывать эту ссылку при ранжировании сайтов (например, если это реклама или внешний ресурс без доверия).

Пример безопасной ссылки:

<a href="https://skillbox.ru" target="_blank" rel="noopener noreferrer">Безопасная ссылка</a>

Обычно ссылка отправляет пользователя на другую страницу. Но иногда нужно при клике вызвать какое-то действие прямо на той же странице. Например, показать сообщение, открыть всплывающее окно или раскрыть скрытый блок. Для этого можно привязать JavaScript к тегу <a>.

<a href="#" onclick="alert('Привет, мир!'); return false;">Нажми на меня</a>
  • alert('Привет, мир!') — показывает всплывающее окно с текстом.
  • return false — отменяет переход по ссылке, чтобы страница не прокручивалась вверх и не перезагружалась.
Скриншот: Google Chrome / Skillbox Media

Более современный способ — писать JavaScript отдельно от HTML. Для этого ссылке можно дать id, а обработку клика настроить через JavaScript:

В HTML даём ссылке идентификатор:

<a href="#" id="showMessage">Кликни меня</a>

Внизу страницы или в отдельном файле пишем JavaScript:

<script> const link = document.getElementById('showMessage'); link.addEventListener('click', function(event) { event.preventDefault(); // Отменяем переход по ссылке alert('Скрипт сработал!'); }); </script>

Что здесь происходит:

  • Мы находим ссылку по её id с помощью метода getElementById() и сохраняем её в переменную link. Теперь переменная link — это ссылка из HTML.
  • К этой ссылке мы добавляем обработчик события click. Это значит: когда пользователь кликнет по ссылке, выполнится функция внутри addEventListener.
  • По умолчанию у ссылки есть поведение — переход по адресу в href. Метод event.preventDefault() отменяет это поведение, чтобы страница не обновлялась и не прокручивалась вверх.
  • Когда пользователь кликнет, сработает всплывающее сообщение (alert), которое покажет текст: «Скрипт сработал!»

Такой подход лучше: HTML остаётся чистым, а вся логика содержится в JavaScript.

Скриншот: Google Chrome / Skillbox Media

Обычные ссылки в HTML выглядят одинаково: синие, подчёркнутые, а после клика — фиолетовые. Но с помощью CSS можно по-разному кастомизировать ссылку.

Ссылка может быть не текстом, а картинкой:

<a href="https://skillbox.ru"> <img src="button.png" alt="Ссылка-картинка"/> </a>

Чтобы убрать стандартную тонкую рамку вокруг картинки, добавьте в CSS вот этот код:

a img { outline: transparent; }

Результат будет таким:

Скриншот: Google Chrome / Skillbox Media

По умолчанию ссылка подчеркивается сплошной линией. Допустим, сплошное подчёркивание нам не нравится и мы хотим пунктирное. Это можно сделать в CSS, добавив значение свойству text-decoration:

a { text-decoration: underline dotted; }

Теперь сплошное подчёркивание превратилось в пунктирное:

Скриншот: Google Chrome / Skillbox Media

Если пользователь уже переходил по ссылке, браузер меняет её цвет (обычно на фиолетовый). Чтобы настроить свой цвет для посещённых ссылок, используйте псевдокласс :visited:

a:visited { color: green; }

Теперь после посещения ссылка будет подсвечиваться зелёным:

Скриншот: Google Chrome / Skillbox Media

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

a { transition: color 0.3s ease; } a:hover { color: red; }

Теперь, когда пользователь наведёт курсор, текст плавно перекрасится в красный.

Скриншот: Google Chrome / Skillbox Media

Можно не только поменять цвет, но и добавить анимацию. Для этого применяют инструмент :hover и transform со значением scale:

a { display: inline-block; transition: transform 0.2s ease; } a:hover { transform: scale(1.1); }

Ссылка увеличится в размерах, если навести на неё курсор:

Скриншот: Google Chrome / Skillbox Media

Вот несколько типичных ситуаций, в которых <a> ведёт себя не так, как хотелось бы.

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

Неправильно:

<a>https://skillbox.ru</a>

Правильно:

<a href="https://skillbox.ru">https://skillbox.ru</a>

Даже если ссылка ведёт в никуда и обрабатывается JavaScript, href всё равно нужен — хотя бы href="#" или href="javascript:void(0);".

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

Неправильно:

<a href="https://skillbox.ru">Сайт Skillbox <p>Это абзац</p>

Правильно:

<a href="https://skillbox.ru">Сайт Skillbox</a> <p>Это абзац</p>

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

Неправильно:

<a href="about">Подробнее о разделе</a>

Правильно:

<a href="#about">Подробнее о разделе</a> <!-- А где-то на странице должен быть элемент с id="about" --> <section id="about">...</section>

Якорь всегда начинается с #, а сам идентификатор (id) должен быть уникальным на странице.

Не вставляйте в адрес ссылки пробелы, русские буквы и специальные символы (например, &, ?, #, =, ,) без кодирования.Если вам нужно вставить такой символ в href, он должен быть записан в виде кода. Например:

  • пробел → %20;
  • & → %26;
  • кириллица автоматически преобразуется браузером, но вручную вставлять её не стоит — лучше использовать латиницу или URL-кодировку.

Неправильно:

<a href="https://example.com/файл с пробелом.html">Скачать</a>

Правильно:

<a href="https://example.com/%D1%84%D0%B0%D0%B9%D0%BB%20%D1%81%20%D0%BF%D1%80%D0%BE%D0%B1%D0%B5%D0%BB%D0%BE%D0%BC.html">Скачать</a>

Но проще заранее переименовать файл, чтобы не было проблем:

<a href="https://example.com/file-name.html">Скачать</a>

Ссылки из доменной зоны .рф и других зон с нелатинскими буквами технически работают, но внутри HTML и программного кода они должны быть записаны в специальной форме — punycode.

В браузере вы можете спокойно написать:

<a href="https://пример.рф">Наш сайт</a>

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

Ссылка:

https://пример.рф

В коде она должна выглядеть вот так:

https://xn--e1afmkfd.xn--p1ai

Есть сайты, которые умеют преобразовывать ссылки, — например, punycodeconverter.com.

Курс с трудоустройством: «Профессия Фронтенд-разработчик + ИИ» Узнать о курсе