Ссылки

Буква H в HTML означает гипертекст (hypertext), то есть текст со ссылками на другой текст. Один элемент, a, создаёт все ссылки в вебе.

Элемент-якорь

Ссылка создаётся элементом <a>, от слова anchor («якорь»). Его атрибут href хранит адрес перехода, а содержимое является текстом, на который нажимают. В <a href="https://developer.mozilla.org/">MDN Web Docs</a> слова MDN Web Docs подчёркнуты, и при их активации загружается этот адрес. Ссылки работают с мышью, пальцем или клавиатурой: Tab переводит от ссылки к ссылке, Enter открывает ссылку. Без href элемент <a> служит лишь заглушкой, и до него нельзя добраться через Tab.

Абсолютные и относительные адреса

Абсолютный URL содержит всё: схему (https:), домен и путь, например https://example.com/menu/bread.html. Используй его для ссылок на другие сайты. Относительный URL опускает части, совпадающие с текущей страницей. На странице https://example.com/menu/index.html ссылка bread.html означает файл в той же папке, ../about.html означает файл на папку выше, а /contact.html отсчитывается от корня сайта. Относительные ссылки продолжают работать, когда весь сайт переезжает на новый домен.

<a href="https://www.w3.org/">W3C</a>          <!-- another site -->
<a href="bread.html">Bread</a>                <!-- same folder -->
<a href="../about.html">About us</a>          <!-- one folder up -->
<a href="#hours">Opening hours</a>           <!-- same page -->
<a href="mailto:hello@example.com">Email us</a>

<h2 id="hours">Opening hours</h2>

Ссылки внутри одной страницы

Дай любому элементу id, и ссылка, у которой href состоит из решётки и этого id, сразу переведёт к нему. <a href="#hours"> прокручивает к <h2 id="hours">. id должен быть уникальным в пределах страницы и не может содержать пробелов. Длинные статьи так делают оглавление, а многие сайты ставят в самом верху ссылку пропуска («Перейти к основному содержимому»), чтобы пользователям клавиатуры не приходилось проходить через Tab всё меню на каждой странице.

Почта, телефон и скачивание

Другие схемы открывают другие программы. mailto:hello@example.com открывает новое письмо в почтовой программе посетителя, а tel:+82212345678 предлагает позвонить по номеру с телефона. Атрибут download у ссылки просит браузер сохранить файл, а не открыть его. Такие ссылки удобны, но напиши в тексте ссылки, что она делает, потому что внезапно открывшейся почтовой программы никто не ждёт.

Новые вкладки и хороший текст ссылки

target="_blank" открывает ссылку в новой вкладке. Пользуйся этим редко: так ты забираешь управление у посетителя, и кнопка «Назад» уже не возвращает его обратно. Если всё же используешь, упомяни это в тексте ссылки, например «(откроется в новой вкладке)». Важнее всего сам текст ссылки. Пользователи экранных дикторов часто открывают список всех ссылок страницы, и список из десяти пунктов «нажмите здесь» или «читать далее» им ничего не говорит. Пиши текст, понятный вне контекста: «Скачать расписание на 2026 год», а не «нажмите здесь».

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