Урок 2 · HTML

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

Редакция PraktumОбновлено 22 октября 202620 минут на урок с практикойУровень: новичок

Ссылка в HTML собирается тегом a и атрибутом href. В href пишут путь к своей странице, полный адрес чужого сайта, якорь или почту. Текст между тегами — то, что человек видит и нажимает.

Зачем этот урок сейчас

После первой страницы нужен способ связать файлы между собой. Без ссылок учебник — стопка отдельных листков: человек прочитал и не знает, куда идти. Ссылка — это договор: текст обещает цель, href её выполняет. Если обещание и адрес расходятся, доверие к странице падает сразу, даже если вёрстка красивая.

Этот урок учит четырём рабочим случаям: своя страница, чужой сайт, якорь внутри документа, внешняя вкладка. Остальные атрибуты тега a — в справочнике.

Минимальный пример

Открой файл урока или песочницу и вставь одну строку в body. Сохрани, обнови вкладку. Фраза должна стать синей или стилизованной ссылкой и вести на главную Praktum.

<a href="/">На главную Praktum</a>

Почему путь начинается со слэша: так браузер считает адрес от корня сайта, а не от текущей папки. Ссылка сработает и с главной, и из глубокого урока. Это первый навык, который экономит часы на сломанных переходах.

Шаг 1. Ссылка на свою страницу

Свою страницу указывают относительным путём. Если цель — соседний урок в разделе HTML, можно написать путь от корня: он не зависит от того, в какой папке ты сейчас.

<p>Дальше: <a href="/html/izobrazheniya/">как вставить изображение</a>.</p>

Проверь себя: наведи курсор на ссылку, в левом нижнем углу браузера появится полный адрес. Если там file:/// и странный хвост — ты открыл файл с диска, и корневой путь / не тот. Тогда либо подними локальный сервер, либо временно поставь относительный путь вида ../izobrazheniya/index.html. На хостинге Praktum сервер сам сопоставляет папку с index.html.

Шаг 2. Ссылка на чужой сайт

Чужой адрес пишут целиком, со схемой. Без https браузер решит, что это папка на твоём сайте, и получит 404.

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

В тексте ссылки назови, куда человек попадёт: «Справочник MDN на русском», а не адрес сайта. Так ссылка понятна и в абзаце, и в списке, и со скринридера.

Шаг 3. Ссылка на раздел страницы

Якорь — это переход к элементу с id. Сначала поставь идентификатор на заголовок, потом сошлись на него. Имя должно быть уникальным на странице и не начинаться с цифры, если потом будешь искать его через CSS-селектор.

<h2 id="task">Практика</h2>
<a href="#task">К заданию</a>

Почему это удобно в длинном уроке: оглавление справа на Praktum работает так же. Проверь: после клика адрес в строке получает #task, а страница прокручивается к заданию. Если ничего не произошло, id опечатан или стоит на скрытом элементе.

Шаг 4. Новая вкладка без потери своей

Для чужого справочника добавь target="_blank" и rel="noopener noreferrer". Свою навигацию так не открывай: у человека копится стопка вкладок с Praktum, и «назад» перестаёт работать как учебный маршрут.

<a href="https://html.spec.whatwg.org/" target="_blank" rel="noopener noreferrer">Спецификация HTML</a>

Современные браузеры сами включают noopener для _blank. Мы всё равно пишем rel явно: код читают новички, и копия из урока должна быть безопасной даже в старом движке.

Как посмотреть ссылку в DevTools

1. Открой страницу, нажми F12, вкладка Elements.
2. Кликни иконку выбора элемента и ткни в ссылку на странице.
3. В дереве подсветится a. Раскрой атрибуты: href, target, rel.
4. В консоли можно написать document.querySelector("a").href — браузер покажет уже развёрнутый абсолютный адрес, не тот короткий путь, что в файле.
5. Во вкладке Accessibility проверь Accessible Name: это текст, который услышит скринридер.

Этот ритуал занимает минуту и отвечает на половину вопросов «почему не работает». Не гадай по внешнему виду: смотри вычисленный href.

Относительный путь подробнее

Путь без первого слэша считается от текущей папки. Файл /html/ssylki/index.html и ссылка href="izobrazheniya/" попросят адрес /html/ssylki/izobrazheniya/ — такой папки нет. Нужен либо корень /html/izobrazheniya/, либо выход наверх ../izobrazheniya/. Две точки — родительская папка. Одна точка — текущая. Новички копируют путь из проводника Windows со слешами наоборот: в URL нужен прямой слеш.

Когда открываешь файл с диска, корень сайта не существует. Поэтому ссылка href="/html/" уезжает в file:///html/ и ломается. Локальный сервер VS Code Live Server, Python -m http.server или хостинг Beget создают корень. Учебные ссылки Praktum рассчитаны на сервер. Если хочешь проверить с диска, временно поставь относительный путь до соседнего файла.

Почта и телефон тоже ссылки, но это не «скачивание» и не отдельный тег. mailto:hello@example.com открывает почтовую программу, tel:+79001234567 — набор номера на телефоне. На компьютере tel может ничего видимого не сделать. Текст ссылки пиши человеческий: «Написать редакции», а не сырой адрес, если рядом уже есть подпись.

Чем этот урок отличается от справочника

Частые ошибки

• Забыли https у внешнего адреса — ссылка ищет папку на твоём сайте.
• Написали «нажмите здесь» вместо названия урока.
• Открыли все внутренние ссылки в новой вкладке.
• Путь вида page.html, хотя на сервере страница живёт как /page/.
• Якорь #task без id="task" на странице.

Доступность

Текст ссылки должен быть понятен вне предложения. Представь список ссылок без абзацев вокруг: «Изображения», «Основы HTML» работают, «далее» — нет. Цвета ссылки и текста рядом отличаются не только оттенком: добавь подчёркивание или иконку. Фокус с клавиатуры не скрывай.

Поддержка браузерами

Обычные ссылки работают везде, включая текстовые браузеры. Различия начинаются на атрибутах вроде download — их этот урок не использует. Проверяй страницу в одном современном браузере и один раз клавиатурой: этого достаточно на старте.

Собери четыре ссылки

Сделай страницу с четырьмя ссылками: на главную корнем, якорь #task на этой странице, внешнюю на MDN в новой вкладке и на урок про изображения. Сохрани и пройди все четыре клика. Если переход не туда, сначала посмотри href в DevTools, потом правь путь. Проверь Tab: фокус виден, Enter открывает ссылку. Не оставляй в меню href="#" — такая ссылка никуда не ведёт. Якорь на другую страницу пиши вместе с путём: /html/ssylki/#task.