Ссылки: как связать страницы между собой
Тег a, абсолютные и относительные пути, якоря внутри страницы, ссылки на почту и телефон — и первое настоящее меню.
Что ты научишься делать
- Свяжешь две страницы так, чтобы между ними можно было ходить
- Разберёшься, когда путь пишется от корня, а когда от текущего файла
- Сделаешь якорные ссылки внутри длинной страницы
#Ссылка — то, из-за чего веб называется вебом
Сайт из одной страницы — это документ. Сайт становится сайтом, когда страницы связаны между собой. Связывает их один тег — a, от слова anchor, «якорь».
У ссылки два обязательных куска: адрес и текст. Адрес живёт в атрибуте href, текст — между тегами.
<a href="menu.html">Посмотреть меню</a><!-- ↑ куда ведёт ↑ что видит человек -->#Абсолютные и относительные пути
Абсолютный путь — полный адрес с протоколом: https://example.com/menu.html. Так ссылаются на чужие сайты.
Относительный путь — адрес относительно текущего файла: menu.html. Так ссылаются внутри своего сайта. Это удобно: сайт можно переложить в другую папку или на другой домен, и ссылки не сломаются.
Представь папку сайта:
my-site/ index.html ← главная menu.html ← меню pages/ contacts.html ← контакты, лежат глубже images/ logo.svg| Откуда | Куда | Как писать |
|---|---|---|
| index.html | menu.html | menu.html — рядом, в той же папке |
| index.html | pages/contacts.html | pages/contacts.html — вглубь |
| pages/contacts.html | index.html | ../index.html — на уровень выше |
| любая страница | главная | / — от корня сайта |
#Ссылки на чужие сайты
Для внешних ссылок часто хотят открывать новую вкладку — чтобы человек не ушёл с твоего сайта. За это отвечает атрибут target="_blank".
Вместе с ним обязательно пишут rel="noopener". Без него открытая страница получает доступ к твоей вкладке через JavaScript и может её подменить. Современные браузеры страхуют сами, но привычку стоит завести.
<a href="https://ru.wikipedia.org/wiki/Кофе" target="_blank" rel="noopener"> Что такое кофе — Википедия</a>#Якоря: ссылки внутри страницы
На длинной странице удобно сделать оглавление, которое прыгает к нужному разделу. Для этого нужны две вещи: у раздела — атрибут id, у ссылки — адрес с решёткой.
<ul> <li><a href="#coffee">Кофе</a></li> <li><a href="#tea">Чай</a></li></ul><h2 id="coffee">Кофе</h2><p>Эспрессо, капучино, раф.</p><h2 id="tea">Чай</h2><p>Улун, пуэр, ромашка.</p>#Почта и телефон
Ссылка умеет не только открывать страницы. Схема mailto: открывает почтовую программу, tel: — звонилку на телефоне.
<a href="mailto:hi@polka.ru">hi@polka.ru</a><a href="tel:+79000000000">+7 900 000-00-00</a>#Текст ссылки — это её адрес для человека
Программы чтения с экрана умеют собирать все ссылки страницы в один список и зачитывать его подряд. Человек слышит только сами тексты, без окружающих абзацев. Если на странице пять ссылок «подробнее» и три «здесь», такой список бесполезен.
Поэтому текст ссылки должен отвечать на вопрос «куда я попаду», будучи вырванным из контекста. «Условия доставки» вместо «читай здесь», «Меню кофейни» вместо «перейти». Это же правило помогает и в поиске: слова ссылки поисковик засчитывает странице, на которую она ведёт.
Отдельный случай — ссылка-картинка, у которой текста нет вовсе. Тогда роль текста играет alt изображения: он должен описывать не картинку, а цель перехода.
Так не надо
<p>Мы возим кофе по всему городу.
<a href="delivery.html">Подробнее</a></p>В списке ссылок это «подробнее» — и таких на сайте будет десяток. Куда ведёт каждая, неизвестно.
Так надо
<p>Мы возим кофе по всему городу:
<a href="delivery.html">условия доставки</a>.</p>Текст говорит сам за себя и в потоке чтения, и списком отдельно.
#Первое меню
Меню — это список ссылок. Именно список: пункты меню равнозначны, порядок не важен, значит ul. Так его увидят и поисковики, и программы чтения с экрана — «список из четырёх ссылок».
Где спотыкаются почти все
Ссылка ведёт в никуда: <code>href="#"</code>
Почему Такая ссылка прыгает в начало страницы и сбивает человека с толку. Часто её оставляют «на потом» и забывают.
Как надо Если страницы ещё нет — не делай ссылку. Просто текст. Ссылка появится вместе со страницей.
Путь написан с диска: <code>href="C:/Users/Маша/site/menu.html"</code>
Почему Такой адрес существует только на твоём компьютере. У всех остальных ссылка сломается.
Как надо Внутри сайта — относительные пути: menu.html, pages/contacts.html.
Кириллица и пробелы в именах файлов
Почему Ссылка href="о нас.html" на сервере превратится в %D0%BE%20... и часто ломается.
Как надо Файлы называй латиницей через дефис: about-us.html.
Весь абзац завёрнут в ссылку
Почему Голосовая читалка зачитает три предложения как название ссылки. Понять, куда она ведёт, невозможно.
Как надо Оборачивай в ссылку короткую осмысленную фразу — два-пять слов.
- Гиперссылка hyperlink, a
- Элемент, ведущий на другую страницу, файл или раздел этой же страницы.
- Абсолютный путь absolute path
- Полный адрес с протоколом и доменом. Нужен для внешних ресурсов.
- Относительный путь relative path
- Адрес относительно текущего файла. Используется внутри сайта.
- Якорь anchor
- Ссылка на элемент с определённым
idвнутри страницы. - Атрибут rel rel
- Уточняет отношение между страницами.
noopenerзакрывает доступ открытой странице к твоей вкладке.
Проверь себя
<code>../</code> поднимает на папку выше — из <code>pages</code> в корень. Дальше уже имя файла.
Без <code>noopener</code> новая страница может через JavaScript подменить содержимое вкладки, из которой её открыли.
Решётка означает «на этой странице». Браузер ищет элемент с таким <code>id</code> и прокручивает к нему.
Текст ссылки должен быть понятен без окружающего абзаца — его читают отдельным списком в голосовых читалках и поисковиках.
Пункты меню равнозначны — это список. Голосовая читалка скажет «список из четырёх пунктов», и человек поймёт объём меню сразу.
Задание
Мини-сайт из двух страниц
Собери шапку сайта: маркированный список из трёх ссылок — «Главная» на index.html, «Меню» на menu.html и «Контакты» на contacts.html. Ниже — заголовок h1 и абзац, в котором есть ссылка на почту через mailto:.
Подсказка 1
Каждая ссылка живёт внутри своего <li>: <li><a href="menu.html">Меню</a></li>.
Подсказка 2
Почтовая ссылка выглядит так: <a href="mailto:hi@polka.ru">напиши нам</a>. Она должна быть внутри абзаца.
Показать решение
<ul> <li><a href="index.html">Главная</a></li> <li><a href="menu.html">Меню</a></li> <li><a href="contacts.html">Контакты</a></li></ul><h1>Кофейня «Полка»</h1><p>Работаем с 8 до 22. Вопросы шли на <a href="mailto:hi@polka.ru">hi@polka.ru</a>.</p>