Пути, ссылки

Элемент <a> (с англ. anchor — якорь), отвечающий за работу ссылок, находится на первом месте в алфавитном порядке тегов. Это весьма символично, потому что ссылки являются одним из важнейших элементов в веб разработке. Хотя работа их проста — открывать определённую страницу, их роль и значение сложно переоценить.

Прежде чем говорить о ссылках, вернёмся к теме, которую мы начали прежде в уроке про теги метаданных. Эта тема — абсолютные и относительные URL адреса. Обратимся к примеру, что рассматривали ранее. У нас есть сайт, находящийся на домене mysite.info и страница «Контакты». Ссылка, ведущая на неё, может быть описана двумя различными способами:

                

                <!-- абсолютный адрес ссылки -->
<a href="https://mysite.info/contacts.html">Контакты</a>

<!-- относительный адрес ссылки -->
<a href="/contacts.html">Контакты</a> 

Напомним, абсолютным адресом считается тот, который включает в себя протокол HTTP(S), домен, доменную зону и непосредственно адрес страницы, он же запрос path. Относительный адрес включает в себя только path и подразумевает, что домен у нас будет тот же, на котором мы находимся сейчас. URL имеют все страницы сайта, медиа элементы (картинки, видео, аудио) и все ресурсы (стили, скрипты, шрифты). В зависимости от того, что мы используем, для чего и откуда это берём, зависит, указывать нам абсолютный или относительный путь. Так, если мы загружаем что-то с внешних ресурсов, например шрифты из Google Fonts или фреймворк Bootstrap с официального сайта, мы указываем их абсолютный путь. Мы знаем, что сегодня, завтра, через неделю и через год этот адрес не изменится. Он будет доступен, вероятно, всегда, потому что от него зависят тысячи сайтов в интернете.

Если мы в разработке сайта используем собственные картинки, иконки, сами написали стили и скрипты, мы размещаем всё это на своём хостинге, там же, где находится и наш сайт. В таком случае мы указываем относительные пути соответственно расположению нужных файлов. Файлы CSS, как правило, располагаются в папке «css», скрипты в папке «js», шрифты в папке «fonts», а картинки в «img». Файл главной страницы обычно называется index.html

Получаем структуру следующего вида:

Это и будет весь наш сайт. В html файле подключённые стили, скрипты и картинки будут описаны так:

                

                <link rel="stylesheet" href="css/style.css">

<img src="img/mountains.jpg" alt="">

<script src="js/script.js"></script>

Все пути относительные, потому что всё, что нам нужно для работы сайта, лежит тут же в соседних папках и загружается с нашего же хостинга. Абсолютный URL файла стилей будет в таком случае — https://mysite.info/css/style.css, скрипта — https://mysite.info/js/script.js, и т.д. Вы наверняка догадались, что URL запрашиваемых ресурсов повторяет файловую структуру нашего сайта на хостинге.

Другой способ указать пути — добавить ко всем путям точку и слэш «./», что будет означать текущую директорию. Из неё начнётся поиск файла по указанному пути. Несмотря на разницу в написании пути, работать этот и предыдущий пример будут одинаково:

                

                <link rel="stylesheet" href="./css/style.css">

<img src="./img/mountains.jpg" alt="">

<script src="./js/script.js"></script>

В настоящей коммерческой разработке мы должны использовать и абсолютные, и относительные пути. Абсолютно мы можем подключать различные библиотеки и плагины, которые мы не хотим скачивать на свой хостинг (вы также уже могли догадаться, что любой файл, подключённый абсолютно, можно скачать и разместить у себя на хостинге, а после этого подключить относительно; в таком случае мы не будем скачивать этот файл с внешних источников, а будем загружать со своего хостинга). Относительно подключаем всё остальное. Стоит сделать одно важное замечание: не указывайте абсолютный путь для ресурсов, загружаемых с вашего же хостинга. То есть не нужно писать:

                

                <link rel="stylesheet" href="https://mysite.info/css/style.css">

Не следует так делать потому, что, как правило, при разработке мы ещё не знаем, какой будет домен у сайта, или не имеем доступа к этому домену, а потому мы «собираем» сайт либо на временном домене, либо вообще локально на своём компьютере и только позже в какой-то момент переносим готовый результат на хостинг заказчика, или прикрепляем к IP адресу настоящий домен. В случае, если вы собираете сайт на временном домене domain215vf.dev.info и указываете путь:

                

                <link rel="stylesheet" href="https://domain215vf.dev.info/css/style.css">

После переноса сайта и всех файлов на новый домен все пути поломаются, потому что они будут указывать на старый временный домен, с которого после переноса мы файлы удалим. Поэтому всё, что мы загрузили на хостинг в папку сайта, должно быть описано относительными путями и должно полностью переноситься c нашего рабочего хостинга на хостинг заказчика.

В некоторых случах нужный нам файл будет находиться не в этой же, и не в соседней папке, а в находящихся «выше» директориях. При указанной ниже файловой структуре:

                

                <!--
index.html
/calculator
    calculator.html
/css
    style.css
/js
    script.js
 -->

В файле calculator.html, если мы захотим подключить style.css, мы должны будем указать следующий путь:

                

                <link rel="stylesheet" href="../css/style.css">

То есть относительно файла мы поднимаемся вверх на один уровень (../), попадаем в главную папку проекта, далее переходим в папку css и затем обращаемся к файлу style.css. Структура файлов проекта может быть различной, поэтому вам необходимо быть внимательными, указывая пути. В первую очередь, если что-то не подключилось к документу, нужно проверять путь.

Наверняка вы обращали внимание на www в URL сайтов, а также обращали внимание на то, что в некоторых случаях эти три буквы отсутствуют, однако при этом всё работает правильно. Дело в том, что www это необязательный веб-префикс, указывающий на то, что сайт использует протокол HTTP, а не какой либо другой. Необходимость в www уже давно отпала, потому как почти все сервера и хостинги настроены так, чтобы перенаправлять пользователей с домена www.domain.com на domain.com (без www) и наоборот. Хотя эти два домена не являются одним и тем же и при определённых настройках сервера могут вести на разные сайты, такая ситуация — редкое исключение из правил. Считайте, что сайт с www и сайт без www это одно и то же.

Выше уже было сказано, что файл главной страницы называется index.html. Сервера у всех хостеров настроены так, что первый файл в директории сайта, который будет открываться при запросе главной страницы,
будет index.html или index.php в случае, если сайт написан на языке программирования php. Конечно, веб мастер всегда может самостоятельно настроить сервер и переопределить подобное
поведение, однако для нас сейчас важно понимание того, как работает файловая система сайта с привязанным доменом.

Подобное правило применяется не только к корневой директории сайта, а также и ко всем остальным директориям. То есть, если у нас на сайте mydomain.com есть директория
contacts, то чтобы попасть на соответствующую страницу mydomain.com/contacts, мы должны в этой директории создать файл index.html. Другой способ реализовать
такой путь на сайте — создать contacts.html в корневой директории сайта. Вы, наверное, уже запутались, однако пример с указанными путями расставит всё на места:

                

                Мы находимся в корневой директории сайта, к которой прикреплён домен mydomain.com.
Слева указаны папки и файлы, а справа от них - соответствующие этим файлам и папкам
путь запроса:

index.html           |  mydomain.com
contacts.html        |  mydomain.com/contacts
/calculator
    index.html       |  mydomain.com/calculator
    calculator.html  |  mydomain.com/calculator/calculator
/css                 |  mydomain.com/css (доступа не будет)
    style.css        |  mydomain.com/css/style.css
/js                  |  mydomain.com/js (доступа не будет)
    script.js        |  mydomain.com/js/script.js

Рассмотрите данную структуру и пути очень внимательно, потому что понимание того, как всё работает — крайне важно. Обратите внимание
также на то, что пользователи не имеют доступа к папкам, находящимся на нашем хостинге. То есть они могут запрашивать конкретные
файлы, обращаясь к ним, однако не могут просматривать содержимое папок, как на своём компьютере. Это установлено настройками серверов
и сделано для безопасности. Разумеется, эти настройки также можно при желании переопределить.

Что касается относительных ссылок, есть одно важное замечание, которое не сразу понимают начинающие разработчики. Поскольку сайты всегда находятся на
доменах, относительные ссылки, имеющие например код <a href="/contacts/user2321"> и находящиеся на домене mydomain.com, в конечной форме получают вид
https://mydomain.com/contacts/user2321. Т.е. при создании пути браузер добавляет к относительной ссылке домен.

Исходя из этого, мы можем заключить, что ссылка на главную страницу будет выглядеть так: <a href="/">. Поэтому мы, в каком бы html файле на каком бы
уровне вложенности не находились, всегда можем так создать ссылку на главную страницу сайта. Итоговый вид ссылки будет: https://mydomain.com/.

Итак, теперь о ссылках. Это специальный интерактивный тег, который даёт инструкцию браузеру открыть определённую страницу. Какую — мы указываем в атрибуте href ссылки. Это может быть не только ссылка на одну из html страниц нашего сайта. Это может быть ссылка на номер телефона (по клику на неё откроется приложение для звонков), на емаил (откроется приложение электронной почты), на какой-либо документ или файл (он будет открыт в браузере или скачан, смотря что укажет разработчик), и т.д. В последние годы с распространением мессенджеров стали популярны ссылки на Телеграм, WhatsApp и пр. Базовые примеры ссылок:

                

                <a href="https://mail.ru">Mail.ru</a><br>
<a href="mailto:m.bluth@example.com">Email</a><br>
<a href="tel:+123456789">Phone</a>

Первая ссылка ведёт на информационный портал. Здесь, думаю, всё просто: указываем адрес страницы и попадаем по клику на неё. Второй пример — ссылка на адрес электронной почты, и здесь мы уже видим не протокол HTTP, а выражение mailto. Это не какое-то волшебное слово, а непосредственно схема написания URI, связанная с почтовым протоколом SMTP. Именно она позволяет нам по клику на такую ссылку вызывать в телефоне или на компьютере почтовую программу. Более того, в ссылку мы можем изначально задать различные параметры письма:

                

                <a href="mailto:someone@example.com?subject=This%20is%20the%20subject&cc=someone_else@example.com&body=This%20is%20the%20body">Send email</a>

Письмо будет написано для адреса someone@example.com. В качестве темы будет взято значение параметра subject — «This is the subject», копия — параметр cc — пойдёт на адрес someone_else@example.com, а сообщением будет «This is the body». Если присмотритесь к примеру и к объяснениям, то, думаю, разберётесь. Прокомментировать можно тольно использование английского в данном примере, а также символов %20, повторяющихся несколько раз. Под %20 на самом деле скрывается пробел, а по-английски всё написано для упрощения примера. Дело в том, что в URI мы не можем использовать кириллицу, а также некоторые другие символы (среди них есть и пробел), поэтому всё это кодируется специальными функциями, а результат такой кодировки выглядит нечеловекочитаемым. Вот так, например, будет выглядеть фраза «Привет, мир!», если мы захотим поместить её в URI:

%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82,%D0%BC%D0%B8%D1%80!

Впрочем, это уже довольно глубокое погружение в mailto. Почти всегда достаточно просто указать email получателя.

По ссылке мы можем обращаться и к телефонному приложению, в таком случае в мобильном телефоне вы сразу увидите набранный номер, указанный в ссылке. Вам останется только нажать кнопку «Начать звонок»:

                

                <a href="tel:+79991234567">Позвоните нам!</a>
<a href="tel:+7(999)1234567">Позвоните нам!</a>
<a href="tel:+7.999.123.45.67">Позвоните нам!</a>
<a href="tel:+7-999-123-45-67">Позвоните нам!</a>

В случае, если мы нажали такую ссылку на компьютере, вам будет предложена наиболее подходящая для звонков программа. Обратите внимание на синтаксис написания номера телефона: после выражения tel следует телефонный номер в международном формате. Важно всегда указывать номер именно в международном формате! Разделитель же в номере может быть различный.

Другие популярные примеры ссылок:

                

                <!-- Skype -->
<a href="skype:user_name">Позвонить в Skype</a>
<!-- Telegram -->
<a href="https://tlgg.ru/babyfrontent">Телеграм канал BabyFrontent</a>
<!-- WhatsApp -->
<a href="https://api.whatsapp.com/send?phone=7999123467&text=%D0%94%D0%BE%D0%B1%D1%80%D1%8B%D0%B9%20%D0%B4%D0%B5%D0%BD%D1%8C!">WhatsApp</a>

Если вы присмотритесь к атрибуту href, в значении которого указывается адрес для перехода, вы увидите, что среди примеров только у скайпа есть собственный протокол, а Телеграм и Ватсап используют собственные сервера, доступ к которым осуществляется через уже привычный нам HTTP. То есть разработчики мессенджеров решили не создавать собственные протоколы, а просто направлять все запросы на определённый сервер, на котором срабатывает скрипт, предлагающий пользователю открыть или установить приложение. В будущем, возможно, и у этих мессенджеров появятся собственные протоколы.

Откуда мы взяли эти ссылки? Скайп это весьма известный протокол. Создание ссылок для мессенджеров легко находится в интернете. Скорее всего вы попадёте на какой-либо конструктор ссылок, где сможете ввести имя пользователя, тему и сообщение, а в результате получите URI-закодированную ссылку, которую вам просто останется добавить на свой сайт. Разумеется, заучивать синтаксис написания ссылок для Телеграма и для других мессенджеров не нужно.

Для ссылок доступны глобальные атрибуты, а также собственные:

href
— самый важный атрибут, он указывает адрес страницы\файла\документа, на который нужно перейти по клику по ссылке. Как и любой другой путь, может быть абсолютным и относительным.

download
— наличие этого атрибута указывает на то, что документ по адресу, указанному в href, должен быть скачан. Если указывается без значения, то документ будет просто скачан. Если указать значение, то оно будет предложено в качестве имени файла при сохранении его на компьютере.

                

                <!-- файл будет скачан по клику -->
<a href="mountains.jpg" download>Горы 1</a>
<!-- файл будет скачан по клику, в качестве имени файла будет предложено "beautyful_mountains.jpg" -->
<a href="mountains.jpg" download="beautyful_mountains">Горы 2</a>

ping
— представляет собой список разделённых пробелом URL, которым нужно направить запрос в случае перехода пользователем по ссылке. Это может использоваться для отслеживания пользовательских действий. Этот атрибут ещё описывается в справочниках, хотя на практике не применяется и удалён из спецификации HTML5 в 2010 году.

rel
— аналогично, как и для тега <link>, определяет отношение между текущим документом и тем, на который мы ссылаемся в ссылке. Полный список значений приведён в справочнике, а мы опишем основные (большинство данных атрибутов являются машиночитаемыми и не несут никакой информации для пользователя, а также не влияют на работу браузера, безопасность и пр.):

alternate — указывает на альтернативную версию страницы, например для других устройств, если указан атрибут media, на других языках, если указан атрибут hreflang, на страницу в другом формате (PDF,DOC), если указан атрибут type.

author — определяет ссылку как ведущую на страницу автора статьи\новости, или на страницу, на которой размещены контактные данные автора.

bookmark — определяет, что данная ссылка является постоянной ссылкой для ближайшего тега <article> или <section>. Т.е. подразумевается, что текст, описанный на нашем сайте в теге <article>, находится по этой ссылке.

external — указывает, что ссылка ведёт на внешний ресурс, т.е. на сайт с другим доменом.

help — указывает, что ссылка ведёт на вспомогательную страницу, относящуюся к родительскому элементу ссылки, или его потомкам.

license — указывает, что ссылка ведёт на документ или страницу, описывающие лицензионные права на сайт, материалы сайта и пр.

next,prev — указывают, что страница ведёт к следующему\предыдущему ресурсу в последовательности, определённой автором сайта.

nofollow — указывает, что ресурс, указанный в ссылке, не одобряется автором текущего сайта как достоверный и авторитетный источник информации. Данное значение имеет прямое отношение к СЕО и поисковым роботам и влияет на создание ссылочного веса. Речь об этом пойдёт в уроке по СЕО.

noopener — блокирует сайту, на который мы переходим, доступ к JavaScript-свойству документа, указывающему, откуда был осуществлён переход. Данное значение следует указывать для ненадёжных сайтов с целью повышения общего уровня сетевой безопасности.

noreferrer — определяет, будет ли на сайт, на который мы переходим по данной ссылке, в заголовке HTTP запроса передана информация о нашем сайте. Обыкновенно все сайты могут видеть параметр Referer, указывающий на адрес сайта, с которого пришёл пользователь. В целях безопасности при помощи noreferer данный параметр не передаётся. Всегда указывайте данный атрибут для ссылок, ведущих на сомнительный сайты!

search — указывает, что ссылка ведёт на страницу поиска по сайту. Может также ссылаться на браузерные расширения для поиска.

На самом деле это ещё не все значения для rel. Есть ещё другие, тоже довольно важные для любого вебмастера, хотя они не указаны даже в справочнике. Они имеют отношение к СЕО, и про них мы поговорим в соответствующем уроке.

target
— определяет, следует ли открывать документ по ссылке в текущей вкладке браузера, или создать новую.

_blank — открывает в новой вкладке. Ссылка в данном случае автоматически получает поведение, аналогичное указанию атрибута rel=noopener, т.е. не передаёт значение в JavaScript свойство opener в новой вкладке.

_self — значение по умолчанию, открывает в текущей вкладке.
Два других значения (_parent,_top), относящихся к фреймам, запрещены и не должны использоваться.

type
— указывает на MIME-тип документа, находящегося по адресу ссылки. Неполный список MIME типов представлен в справочнике.

Предположим, что наш сайт переведён на несколько языков. Структура файлов может быть такой:

                

                /ru
    index.html
/en
    index.html
/fr
    index.html

То есть наша главная страница представлена на трёх языках. В таком случае в ru/index.html ссылка на страницу на другом языке может выглядеть так:

                

                <a href="../en/index.html" rel="alternate" hreflang="en" target="_blank">Read this page in English</a>

Атрибут href говорит, что нам нужно подняться на одну директорию вверх, затем перейти в директорию «en», обратиться к файлу index.html. Атрибут rel=alternate указывает, что это альтернативная версия текущей страницы, а hreflang сообщает, что версия на английском языке. target=_blank откроет новую вкладку.

Можно поместить в ссылку лишь часть текста:

                

                <p>
    Подробности о произошедшем вы можете узнать из <a href="/article.html">статьи Анастасии Журавлёвой</a>
</p>

А также изображение, карточку продукта и т.д. При этом в ссылке может не быть текстового контента вообще:

                

                <!-- Изображение-ссылка -->
<a href="/places/caucasus.html">
    <img src="img/mountains.jpg" alt="">
</a>
<!-- Карточка-ссылка -->
<a href="/products/item.html">
   <div class="product-card">
       Какой-то текст и иллюстрация, рассказывающие о продукте...
   </div>
</a>

Немного истории: изначально в спецификации HTML запрещалось вкладывать в ссылку блочные теги, в том числе любимый всеми <div>. Со временем от этого ограничения отказались.

В связи с тем, что интернетом пользуются также люди с ограниченными возможностями (используя речевые браузеры), с расстройствами восприятия и пр., правильным было бы указывать в теле самой ссылки, что она открывается в новой вкладке:

                

                <a target="_blank" href="https://www.wikipedia.org">
  Wikipedia (открыть в новой вкладке)
</a>

Хорошим тоном считается в случае, если ссылка ведёт не на html страницу, а на какой-либо документ, указывать об этом также в теле ссылки:

                

                <a href="/reports/babyfrontent-visits-2022.xls">
  Отчёт по посещениям сайта BabyFrontent (Excel)
</a>

Пользователи скажут вам спасибо за это маленькое, но удобное примечание.

Бывают случаи, когда мы на нашем сайте для обозначения различного поведения интерфейса используем иконки, описывая их тегом <img>. В таком случае для <img> необходимо указать соответствующий альтернативный текст (атрибут alt). Слабовидящий пользователь не увидит иконку, но альтернативный текст будет прочитан речевым браузером:

                

                <a target="_blank" href="https://www.wikipedia.org">
  Wikipedia
  <img alt="(открыть в новой вкладке)" src="icons/newtab.svg">
</a>

<a href="/reports/babyfrontent-visits-2022.xls">
  Отчёт по посещениям сайта BabyFrontent
  <img alt="(Excel)" src="icons/excel-icon.svg">
</a>

Ссылки являются интерактивным элементом. То есть по клику на них что-то происходит. Также интерактивными элементами являются кнопки, видео, аудио, фреймы <iframe> (не путать с запрещёнными <frame>). Запомните: интерактивные элементы нельзя вкладывать друг в друга! Технически, конечно, вы можете написать разметку, где внутри <a> будет <video>, однако это приведёт к избыточной интерактивности: нажав на такую ссылку, мы не только перейдём по ссылке, но и начнём воспроизведение видео. Избыточная интерактивность сильно раздражает пользователей, вплоть до того, что после такого опыта они могут покинуть наш сайт.

Также необходимо учесть при создании разметки и стилей вашего сайта, что интерактивные элементы не должны быть очень маленькими. Минимальным размером для кнопок, кликабельных иконок и пр. считается 44х44 пикселя. Это требование не применяется к простым текстовым ссылкам, однако стоит всё же учесть, что ссылка должна быть заметна и доступна для нажатия.
Помимо всего вышесказанного интерактивные элементы не должны располагаться слишком близко друг к другу, чтобы пользователь, нажимая на кнопку, случайно не нажал на воспроизведение видео, и наоборот.

У ссылок есть ещё одно применение. Ссылки могут быть «якорями» и использоваться для внутристраничной навигации. То есть, нажав на ссылку, мы можем переместиться к определённому месту на странице. Для того, чтобы ссылка стала «якорем» и привела нас к необходимому месту, необходимо указать для неё в href специальный символ решётки #, а также идентификатор элемента, к которому мы хотим переместиться:

                

                <a href="#element">Ссылка-якорь</a>

<div id="element">Тег, к которому мы переместимся по клику на ссылку</div>

Существует очень много сайтов-одностраничников, где все ссылки либо ведут на внешние ресурсы, либо являются якорями, ведь страниц у сайта больше нет и ссылаться не на что. В таком случае ссылки-якоря могут представлять из себя навигацию по секциям сайта, то есть ссылка «О компании» ведёт к блоку, где рассказана история компании, ссылка «Наши продукты» ведёт к галерее продуктов и т.д.

Кроме того, что ссылки могут вести на страницы или быть якорями, они могут одновременно ссылаться на страницу и на конкретный элемент на ней. Такая ссылка переместит нас на страницу «Контакты», а также сразу там отыщет элемент с идентификатором «map» и переместит нас к нему:

                

                <a href="contacts.html#map">Мы на карте Москвы</a>

Помимо всего вышесказанного, у якорей есть ключевое слово top, которое переместит нас в самый верх страницы. Используется обязательно вместе с #:

                

                <a href="#top">В начало страницы</a>

Зачастую разработчики, когда делают сайт, имеют только дизайн и ещё не знают, на какие страницы\документы будут вести ссылки. В таких случаях атрибут href пустым не оставляют, а указывают просто решётку #. Когда менеджер проекта скажет, куда будет вести ссылка, разработчик добавит путь

                

                <a href="#">Ссылка, адрес которой пока что не известен</a>

Урок получился сложный, но и продуктивный: вы изучили одну из важнейших тем в HTML. Несмотря на большой объём материала, это не исчерпывающая информация по ссылкам. В дальнейшем вы должны будете в своей работе обращаться к документации, а также мы вернёмся к ссылкам в уроке по СЕО.

Домашнее задание к уроку

Домашнее задание необходимо для проверки усвоенного материала. Скачайте оба файла.
В первом находится задание для решения, а во втором готовый код для самопроверки

Задание (zip)Решение (zip)