Ссылка в HTML делается тегом <a> с атрибутом href: в href пишете адрес, а между открывающим и закрывающим тегом ставите текст, на который нажмёт человек. Минимальный рабочий код выглядит так: <a href="https://example.com/">Перейти на сайт</a>.
Дальше разберём, какой адрес ставить в href, как открыть ссылку в новой вкладке, зачем нужен rel, как сослаться на почту, телефон и раздел страницы. Если вы только начинаете, сначала загляните в материал о том, что такое язык разметки HTML.
CheckroiПодборка курсов по HTML207 курсов • 42 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Как сделать ссылку в HTML за три шага
Проверить всё ниже можно в любом текстовом редакторе и браузере. Как завести файл, показано в инструкции как создать HTML-файл index.html.
- Откройте тег
<a>и добавьте атрибутhrefс адресом страницы. - Напишите текст ссылки: он появится на странице и станет кликабельным.
- Закройте тег
</a>. Без него ссылкой может стать весь текст ниже: браузер перенесёт незакрытую ссылку и в следующие абзацы и списки.
<p>Каталог курсов есть на <a href="https://checkroi.ru/courses/">сайте Checkroi</a>.</p>Браузер покажет слова «сайте Checkroi» синими и подчёркнутыми, а курсор над ними сменится на руку. В Chrome непосещённая ссылка по умолчанию получает цвет rgb(0, 0, 238) и подчёркивание underline, это видно во вкладке Computed инструментов разработчика.
Тег <a> строчный, то есть ставится внутри абзаца, пункта списка или ячейки таблицы и не переносит текст на новую строку.
Атрибуты тега a: что за что отвечает
Обязательного атрибута у <a> формально нет, но без href тег превращается в заглушку: на странице он выглядит как обычный текст. Остальные атрибуты уточняют, куда и как переходить.
| Атрибут | Что делает | Пример |
|---|---|---|
href |
адрес страницы, файла, раздела или схема вроде mailto: |
href="https://checkroi.ru/courses/" |
target |
где открыть: в этой вкладке или в новой | target="_blank" |
rel |
как связаны страницы, подсказки для браузера и поисковиков | rel="nofollow" |
title |
всплывающая подсказка при наведении | title="Откроется PDF" |
download |
скачать файл вместо перехода | download="price.pdf" |
hreflang |
язык страницы по ссылке | hreflang="en" |
referrerpolicy |
сколько данных об адресе исходной страницы передать | referrerpolicy="no-referrer" |
В повседневной вёрстке хватает первых трёх. Полный список, включая ping и type, приведён в справке MDN по элементу a.
Атрибут title
Текст из title браузер показывает в подсказке, когда курсор задерживается на ссылке. Дублировать в нём текст ссылки незачем: подсказку видят только те, кто водит мышью, а на телефоне её нет совсем.
Полезен title там, где текста у ссылки нет, например у иконки. По справке Google, в таком случае робот может взять текст ссылки из title.
Какой адрес писать в href
В href можно указать полный адрес с протоколом, путь от корня сайта или путь относительно текущего файла. От этого зависит, куда браузер отправит человека.
| Вид адреса | Пример | Куда ведёт со страницы /dir/a.html |
|---|---|---|
| Абсолютный | https://example.com/page/ |
на другой сайт, как написано |
| От корня сайта | /page.html |
/page.html |
| Относительный | page.html |
/dir/page.html |
| На уровень выше | ../page.html |
/page.html |
| Без протокола | www.example.com |
/dir/www.example.com, то есть никуда |
На последнюю строку таблицы стоит посмотреть отдельно. Адрес www.example.com без https:// браузер считает именем файла в текущей папке и ведёт на страницу вашего же сайта, которой нет.
Решение: на чужой сайт всегда ставьте адрес целиком, вместе с https://. Внутри своего сайта удобнее путь от корня, он не ломается, если страницу перенесли в другую папку.
Пробелы и кириллица в адресе
Пробел в href валидатор W3C считает ошибкой: «Space is not allowed». Его заменяют на %20, а файлы лучше называть латиницей через дефис. Кириллицу в пути валидатор пропускает, браузер сам переведёт её в процентную запись.
Переход к разделу страницы через якорь
Чтобы ссылка вела не на страницу целиком, а к нужному месту, у этого места должен быть атрибут id. В href ставят решётку и тот же идентификатор.
<a href="#prices">Посмотреть цены</a>
...
<h2 id="prices">Цены</h2>- На раздел другой страницы:
href="https://checkroi.ru/kursy/#prices". - Наверх страницы:
href="#top". По справке MDN это специальное значение для ссылок в начало страницы. Элемент сid="top"для него заводить не нужно, Chrome прокручивает наверх и без него. - Значение
idуникально в пределах страницы, иначе браузер прокрутит к первому совпадению.
Так же устроено оглавление в длинных статьях: каждый пункт списка ссылается на id своего заголовка. Сам список оформляется тегами из инструкции списки в HTML.
Как открыть ссылку в новой вкладке
За то, где откроется страница, отвечает атрибут target. Значение _blank открывает новую вкладку, значение по умолчанию _self открывает адрес в текущей.
<a href="https://example.com/" target="_blank" rel="noopener">Документация</a>Раньше к target="_blank" советовали добавлять rel="noopener": без него новая вкладка получала доступ к исходной через window.opener и могла вмешаться в её страницу, то есть в DOM-дерево исходного документа. В справке MDN по элементу a сказано, что target="_blank" теперь неявно даёт то же поведение, что rel="noopener", но только в новых версиях браузеров.
В актуальном Chrome у страницы, открытой по ссылке с одним target="_blank", свойство window.opener равно null. Связь с исходной вкладкой появляется, только если явно написать rel="opener".
Писать
rel="noopener"рядом сtarget="_blank"по-прежнему стоит: атрибут ничего не ломает и закрывает дыру в старых браузерах.
Новую вкладку ставят на страницы, которые человек откроет рядом с вашей: внешние источники, документацию, PDF. Переходы внутри своего сайта лучше открывать в той же вкладке: так работает кнопка «Назад».
Чем noreferrer отличается от noopener
Значение noopener только отрезает новую вкладку от исходной. noreferrer делает больше: по справке MDN браузер не отправляет заголовок Referer и ведёт себя так, будто указан и noopener.
На практике сайт по ссылке не узнает, с какой страницы пришёл человек. Ставьте noreferrer, когда адрес исходной страницы раскрывать не нужно, например в личном кабинете.
Атрибут rel для поисковиков
Атрибут rel описывает, как связаны ваша страница и страница по ссылке. Для SEO важны три значения, их одинаково понимают Google и Яндекс.
| Значение | Когда ставить |
|---|---|
rel="sponsored" |
платная ссылка: реклама, партнёрская программа |
rel="ugc" |
ссылку оставил пользователь в комментарии или на форуме |
rel="nofollow" |
не хотите, чтобы робот переходил по ссылке и связывал с ней ваш сайт |
Значения можно сочетать через пробел: rel="nofollow sponsored". Справка Яндекса допускает и запятую: rel="nofollow,sponsored". Подробнее о том, как ссылки передают вес и почему важен текст ссылки, рассказано в статье про гиперссылки и их виды.
Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в каналПочта, телефон и файл в href
В href можно поставить не только адрес страницы. Схема в начале адреса говорит браузеру, какую программу открыть.
<a href="mailto:info@example.com?subject=Вопрос по курсу">Написать нам</a>
<a href="tel:+74951234567">+7 495 123-45-67</a>
<a href="https://selcdn.checkroi.ru/files/price.pdf" download>Скачать прайс (PDF, 1 МБ)</a>mailto:открывает почтовую программу. После?subject=можно задать тему письма.tel:на телефоне сразу предлагает позвонить. В адресе номер пишут в международном формате и без пробелов, а пробелы и дефисы для удобства чтения оставляют в тексте ссылки.downloadпросит браузер скачать файл, а не открыть его. По справке MDN атрибут работает для адресов того же сайта и дляblob:иdata:.
Рядом со ссылкой на файл укажите формат и размер. Человек заранее поймёт, что нажатие запустит скачивание, а не откроет страницу.
Кликабельная картинка и карточка
Внутрь <a> можно положить картинку. По справке Google о ссылках, текстом такой ссылки поисковик считает атрибут alt изображения, поэтому его пишут понятным.
<a href="https://checkroi.ru/courses/">
<img src="catalog.png" alt="Каталог онлайн-курсов">
</a>С HTML5 ссылкой можно сделать и целый блок с заголовком и текстом, так в вёрстке собирают карточки товаров и статей. Валидатор W3C принимает такой код без ошибок:
<a href="https://checkroi.ru/catalog/">
<div>
<h2>Карточка</h2>
<p>Текст</p>
</div>
</a>Ограничение одно: внутри ссылки нельзя размещать другие интерактивные элементы. Кнопка <button> внутри <a> даёт ошибку валидатора «must not appear as a descendant of the a element».
Меню навигации
Меню сайта собирают из тех же ссылок, что и в тексте, только кладут их в список, а список в тег <nav>. Так экранный диктор понимает, что перед ним навигация, а не перечень в тексте.
<nav>
<ul>
<li><a href="https://checkroi.ru/" aria-current="page">Главная</a></li>
<li><a href="https://checkroi.ru/courses/">Курсы</a></li>
<li><a href="https://checkroi.ru/blog/">Блог</a></li>
</ul>
</nav>- Текущий пункт помечают
aria-current="page": по справке MDN это значение обозначает текущую страницу в наборе страниц. - Пути от корня (
/courses/) удобнее относительных: меню одно на весь сайт и должно работать из любой папки. - Горизонтальное меню делают стилями: у списка убирают маркеры, пункты выстраивают в ряд через
display: flex. На узком экране его перестраивают в столбец медиа-запросами CSS.
Оформление через CSS: цвет и подчёркивание
Цвет, подчёркивание и реакцию на наведение задают псевдоклассами. Подключить стили к странице можно тремя способами, они разобраны в инструкции как подключить CSS к HTML.
a:link { color: #7324ff; }
a:visited { color: #5a1bc4; }
a:hover { text-decoration: none; }
a:active { color: #3d0f8a; }
a:focus-visible { outline: 2px solid #7324ff; }- Порядок важен. MDN описывает его как LVHA:
:link,:visited,:hover,:active. Если:hoverстоит выше:visitedи оба правила меняют одно свойство, напримерcolor, у посещённых ссылок наведение его не изменит. - У
:visitedурезан набор свойств. Из соображений приватности браузер разрешает менять только цвета:color,background-color,border-colorи несколько похожих, это записано в справке по :visited. - Подчёркивание убирают свойством
text-decoration: none. Тогда ссылку должно отличать что-то другое: цвет, жирность или подчёркивание при наведении.
Если ссылка стоит в тексте, который вы выделяете жирным, удобнее сочетать стили, а не вкладывать теги. Как работают <b>, <strong> и font-weight, мы показали в статье про жирный текст в HTML.
Частые ошибки и как их исправить
Пять ошибок со ссылками, которые видно сразу на странице или в валидаторе. Для каждой причина и способ исправить.
Ссылка ведёт на несуществующую страницу своего сайта
Причина: адрес чужого сайта записан без https://, и браузер склеил его с текущей папкой.
Решение: писать полный адрес с протоколом.
Ссылка не нажимается с клавиатуры
Причина: у <a> нет атрибута href. Такой тег браузер пропускает при переходе по Tab и рисует обычным чёрным текстом. Роботы Google, по их справке о ссылках, тоже обычно переходят только по <a> с href.
Решение: если элемент ничего не открывает, а запускает скрипт, нужна кнопка <button>, а не ссылка с href="javascript:void(0)".
Ссылка внутри ссылки
Причина: вложенные <a>. Браузер их не вкладывает, а режет на две соседние ссылки: из кода <a href="1.html">one <a href="2.html">two</a></a> Chrome собирает две отдельные ссылки, а валидатор выдаёт две ошибки.
Решение: развести ссылки по разным элементам или сделать ссылкой только заголовок карточки.
Текст ссылки ничего не говорит
Причина: «нажмите на ссылку», «подробнее», «статья». В справке Google такие варианты названы нежелательными. Хороший текст ссылки там описан как информативный и соответствующий содержанию страницы, на которую она ведёт.
Решение: ставить ссылку на слова, которые называют цель: «каталог курсов по HTML», а не «здесь».
Ссылка разрывает абзац
Причина: перед тегом стоит <br> или ссылка вынесена в отдельный <p> посреди предложения.
Решение: <a> строчный и живёт внутри абзаца. Когда перенос строки нужен на самом деле, а когда без него проще, разобрано в статье о теге br.
Где освоить HTML и CSS системно
Отдельный тег легко разобрать по справке, а остальные основные теги HTML мы собрали в одном списке. Собрать из тегов адаптивную страницу, которая одинаково выглядит в разных браузерах и проходит валидатор, сложнее: тут нужна практика и кто-то, кто разберёт ошибки.
Если хотите превратить это в профессию, почитайте, чем занимается HTML-верстальщик и как выглядит путь от HTML до фронтенд-разработчика. Ниже курсы по HTML из нашего каталога: сравните программу, длительность и цену.
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| HTML и CSS с нуля Перейти на сайт курса |  Skillbox | 91 626 ₽ | 7635 ₽/мес. | 11 месяцев | Обзор курса |
| HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса |  HTML Academy | 23 400 ₽ | 3900 ₽/мес. | 2 месяца | Обзор курса |
| Основы вёрстки HTML и CSS Перейти на сайт курса |  Академия Синергия | 32 676 ₽ | 2723 ₽/мес. | 3 месяца | Обзор курса |
| HTML и CSS с нуля |  Skypro | 195 160 ₽ | 7972 ₽/мес. | 12 месяцев | Обзор курса |
| Онлайн-курс Вёрстка на HTML и CSS Перейти на сайт курса |  Бруноям | 29 900 ₽ | 2491 ₽/мес. | 3 месяца | Обзор курса |
Больше программ — в полном каталоге курсов по HTML
