Ссылки
Ссылки связывают страницы между собой — именно они превращают отдельные документы во «всемирную паутину». По-английски ссылка — hyperlink, отсюда «HyperText» в названии HTML.
Ссылка
Тег <a> (от anchor — якорь) превращает текст в ссылку. Куда она ведёт, указывают в атрибуте href:
<a href="https://example.com">Перейти на example.com</a>Браузер выделил ссылку синим цветом и подчеркнул. Посещённые ссылки становятся фиолетовыми.
Абсолютные адреса
Абсолютный адрес содержит всё, начиная с протокола https://. Он ведёт на конкретную страницу в интернете и работает откуда угодно:
<p><a href="https://example.com/docs/start">Документация</a></p>
<p><a href="https://developer.mozilla.org">Справочник MDN</a></p>Такие адреса используют для ссылок на чужие сайты.
Относительные адреса
Относительный адрес отсчитывается от текущей страницы — им ссылаются на страницы своего сайта. Допустим, файлы лежат так:
my-site/
├── index.html
├── about.html
└── blog/
└── first-post.html| Откуда | Адрес в href | Куда ведёт |
|---|---|---|
index.html | about.html | Файл в той же папке |
index.html | blog/first-post.html | Файл во вложенной папке |
blog/first-post.html | ../index.html | На папку выше: .. — родительская папка |
| любая страница | /about.html | От корня сайта |
Переход внутри страницы
Атрибут id даёт элементу уникальное имя. Ссылка с решёткой и этим именем прокручивает страницу к элементу:
<p><a href="#prices">К ценам</a></p>
<p style="height: 300px;">Длинный рассказ о кофейне...</p>
<h2 id="prices">Цены</h2>
<p>Капучино — $4.</p>Нажмите на ссылку в превью — окно прокрутится к заголовку «Цены». Так делают оглавления длинных статей.
Новая вкладка
Атрибут target="_blank" открывает ссылку в новой вкладке:
<a href="https://example.com" target="_blank">Откроется в новой вкладке</a>Не злоупотребляйте им: пользователь сам решает, где открыть ссылку. Новая вкладка уместна, например, для документа, который нужен рядом с заполняемой формой.
Почта и телефон
Ссылка может не только открывать страницу. Адрес mailto: открывает почтовую программу, tel: на телефоне предлагает позвонить:
<p><a href="mailto:hello@example.com">Написать нам</a></p>
<p><a href="tel:+12025550123">+1 202 555-01-23</a></p>Частая ошибка
Текст ссылки «здесь» или «тут» ничего не говорит о том, куда она ведёт. Люди с программами чтения с экрана часто слушают список всех ссылок страницы — и слышат десять одинаковых «здесь». Делайте ссылкой слова, которые описывают цель:
<p>Плохо: прайс-лист можно скачать <a href="/price.pdf">здесь</a>.</p>
<p>Хорошо: скачайте <a href="/price.pdf">прайс-лист в PDF</a>.</p>