#7. Ссылки: тег a, атрибут href, абсолютные и относительные пути, якоря, target

Ссылки — то, ради чего появился HTML: буквы HT в его названии означают HyperText, «гипертекст», то есть текст со ссылками.
Мы уже видели тег <a> в уроке #2, когда разбирали атрибуты, — теперь изучим его подробно.

Тег a и атрибут href

Ссылку создаёт парный тег <a> (anchor — «якорь»). Адрес страницы задаёт атрибут href, а текст между тегами видит пользователь — обычно он синий и подчёркнутый:

<a href="https://fkn.ktu10.com/">Учебный сайт</a>

На странице это выглядит так: Учебный сайт.

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

Абсолютный адрес — полный: со схемой и доменом. Так ссылаются на чужие сайты:

<a href="https://www.example.com/">Чужой сайт</a>

Относительные адреса

Внутри своего сайта удобнее относительные адреса — путь от текущей страницы к файлу. Пусть сайт устроен так (схема вложенности файлов и папок):

mysite/
    index.html
    about.html
    pages/
        contact.html

Тогда:

<!-- из index.html -->
<a href="about.html">О сайте</a>
<a href="pages/contact.html">Контакты</a>

<!-- из pages/contact.html -->
<a href="../index.html">На главную</a>

.. означает «на папку выше». Относительные адреса удобны: сайт можно перенести в другую папку или на другой домен — ссылки не сломаются.

target: открыть в новой вкладке

По умолчанию страница открывается в той же вкладке. Атрибут target="_blank" заставит браузер открыть её в новой:

<a href="https://fkn.ktu10.com/" target="_blank">Сайт курса</a>

Пользуйтесь этим умеренно: пусть пользователь сам решает, где ему читать.

Якоря: переход внутри страницы

Ссылка может вести не на другую страницу, а на место внутри текущей. Для этого у целевого тега задают атрибут id, а в href пишут решётку и это имя:

<h2 id="part2">Раздел 2</h2>

<!-- где-то выше по странице -->
<a href="#part2">Перейти к разделу 2</a>

Так делают оглавления длинных страниц. Ссылка <a href="#">Наверх</a> просто прокручивает страницу в начало.

Практика

Создайте две страницы — index.html и about.html — и свяжите их относительными ссылками. На одной из них сделайте «оглавление» из якорей на три раздела. Добавьте внешнюю ссылку с target="_blank".