Ссылки и навигация

Тег a и его атрибуты: href, target, download, rel, якоря, состояния ссылок и навигация по сайту.

Уровень: начальный 9 разделов 1 час

1. Анатомия ссылки

Ссылка — <a href="адрес">текст</a>. Без href тег a не активен — не получить фокус, не кликнуть. Внутри ссылки — текст, изображение, фраза (не целые заголовки).

<a href="https://ituroki.ru/css">Уроки CSS</a>
<a href="/lessons/html.html">Относительная ссылка</a>
<a href="mailto:info@site.ru">Написать нам</a>
<a href="tel:+79990001122">Позвонить</a>

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

<a href="https://site.com/path/page.html">Абсолютный</a>
<a href="page.html">Соседний файл</a>
<a href="docs/manual.pdf">В подпапке</a>
<a href="../index.html">Уровень выше, к корню</a>
<a href="/about.html">От корня сайта</a>

аналогично строке: полный адрес с протоколом идет внешний ресурс;
пути / папка/файл — внутри своего сайта;
слэш в начале — «от корня домена».

3. Открытие в новой вкладке

<a href="https://docs.site.com" target="_blank" rel="noopener">Документация</a>

target="_blank" — новая вкладка; rel="noopener" обязателен для внешних ресурсов (защита от tabjacking window.opener). Для своих страниц чаще обычное поведение.

4. Якоря внутри страницы

<nav><a href="#services">Услуги</a></nav>
<section id="services">…</section>
<!-- или -->
<a href="#top">Наверх</a>

Якорь — значение id любого элемента. Ссылка `#имя` прокручивает к нему. Может быть и на внешний якорь: page.html#chapter.

5. download и rel

<a href="files/catalog.pdf" download>Скачать каталог</a>
<a href="https://site.com" rel="nofollow noopener">Внешний осмотр</a>

download — скачивание вместо открытия;
rel=noopener — важность для _blank;
rel=nofollow — для поисковиков (по недоверенным ссылкам);
rel=external/ugc — вспомогательные.

6. Заглушки-ссылки

<a href="#">Заглушка</a>          <!-- не ведёт никуда -->
<a role="button" href="#">Кнопка</a>  <!-- не злоупотреблять -->
<button type="button">Настоящая кнопка</button>

href="#" — плохой костыль: клик перескочит наверх. Для действия нужен <button>, не ссылка. Ссылка — для перехода, кнопка — для действия в странице (купить, отправить).

7. Доступность ссылок

текст ссылки — понятный: «Услуги», не «нажмите тут»;
контраст и фокус-кольцо видны;
ссылка-картинка имеет alt;
не используйте «тут/здесь/далее» без контекста.

<a href="/services"><img src="i.png" alt="Сервис по ремонту техники"></a>

8. Навигационные элементы

Ссылки собираются в nav-меню. Для постраничной навигации (пагинация) — ol/ul с «Предыдущая/Следующая», текущая страница — без ссылки или aria-current="page".

<nav aria-label="Пейджинг">
  <a href="?page=1">←</a>
  <a href="?page=2">2</a>
  <a href="?page=3" aria-current="page">3</a>
  <a href="?page=4">4</a>
</nav>

9. Чек-лист ссылок

href обязателен для кликабельной ссылки;
_blank + rel=noopener для внешних;
якоря на id элементов;
кнопки — это button, не a;
понятные тексты и alt у ссылок-картинок.

Что дальше

Курс завершён.

← Вернуться к курсам