Тег <a>: ссылки и переходы
Как связать страницы, перейти к разделу документа и написать понятный текст ссылки.
Зачем нужен этот элемент
Ссылка соединяет документы или участки одной страницы. Браузер умеет открывать её в новой вкладке, копировать адрес и показывать цель в строке состояния. Эти привычные действия работают благодаря настоящему атрибуту href, а не обработчику клика на произвольном блоке.
Для перехода к разделу укажите решётку и его идентификатор: href="#contacts". Для соседней страницы используйте относительный путь. Текст ссылки должен объяснять, что откроется: «Примеры таблиц» полезнее, чем «Нажмите здесь». Если элемент выполняет действие без перехода, выберите кнопку.
Синтаксис и пример
<nav aria-label="На странице">
<a href="#contacts">Контакты</a>
</nav>
<section id="contacts">
<h2>Напишите нам</h2>
<a href="mailto:hello@example.com">hello@example.com</a>
</section>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| href | Адрес документа, файла или якоря. |
| target="_blank" | Открыть новый контекст просмотра; предупредите об этом читателя. |
| rel="noopener" | Явно отделить новую вкладку от window.opener. |
Частая ошибка
Небольшая практика
Добавьте второй раздел и ссылку на него. Нажмите Tab, затем Enter: переход должен работать без мыши. Для внешнего адреса проверьте, куда он ведёт перед публикацией.
Разберите также <nav>, <button>: эти элементы пригодятся в том же интерфейсе.