Ссылки

В разделе, посвященном атрибутам, мы привели пример добавления атрибутов к открывающему тегу. В примере использовался тег <a> , но ни сам элемент, ни конкретные атрибуты, представленные в этом примере, не обсуждались.

Тег <a> вместе с атрибутом href создает гиперссылку. Ссылки — это основа интернета. Первая веб-страница содержала 25 ссылок с текстом: «Всё, что есть в интернете о W3, прямо или косвенно связано с этим документом». По всей вероятности, всё, что есть в интернете о W3, также прямо или косвенно связано с этим документом.

Мощь интернета и тега <a> значительно возросла с тех пор, как Тим Бернерс-Ли опубликовал первое объяснение в августе 1991 года. Ссылки представляют собой связь между двумя ресурсами, один из которых — текущий документ. Ссылки могут создаваться с помощью тегов <a> , <area> , <form> и <link> . Вы уже узнали о <link> , а о формах вы узнаете в отдельном разделе. Также есть целый раздел, посвященный изучению форм . В этом разделе вы узнаете о сложном, состоящем из одной буквы теге <a> .

Атрибут href

Хотя атрибут href не является обязательным, он присутствует почти во всех тегах <a> . Указание адреса гиперссылки превращает тег <a> в ссылку. Атрибут href используется для создания гиперссылок на отдельные разделы текущей страницы, другие страницы сайта или даже другие сайты. Он также может использоваться для загрузки файлов или отправки электронного письма на определенный адрес, включая тему и предлагаемое содержимое текста письма.

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

Первая ссылка содержит абсолютный URL-адрес , который можно использовать на любом сайте в мире для перехода на главную страницу MLW. Абсолютные URL-адреса включают протокол, в данном случае https:// , и доменное имя. Если протокол указан как // , это неявный протокол, означающий «используйте тот же протокол, который активно используется».

Относительные URL-адреса не содержат протокола или доменного имени. Они являются «относительными» по отношению к текущему файлу. MLW — это одностраничный сайт, но эта серия HTML-уроков состоит из нескольких разделов. Для того чтобы сослаться с этой страницы на урок по атрибутам, используется относительный URL-адрес: <a href="../attributes/">Attributes</a> .

Вторая ссылка — это просто идентификатор фрагмента ссылки , и она будет вести к элементу с id="teachers", если таковой имеется на текущей странице. Браузеры также поддерживают две ссылки "вверху страницы": нажатие на <a href="#top">Top</a> (регистр не имеет значения) или даже просто <a href="#">Top</a> возвращает пользователя в начало страницы, если только нет элемента с идентификатором top , заданным в том же регистре букв.

MLW — довольно длинный документ. Чтобы не прокручивать страницу, вы можете добавить ссылку на начало страницы из раздела #teachers:

<a href="#top">Go to top.</a>

Третья ссылка объединяет два значения: она содержит абсолютный URL-адрес, за которым следует фрагмент ссылки. Это позволяет напрямую ссылаться на раздел в заданном URL-адресе, в данном случае, на раздел #teachers на главной странице MLW. Страница MLW загружается, и браузер прокручивает страницу до раздела с учителями, не отправляя фрагмент в HTTP-запросе.

Атрибут href может начинаться с mailto: или tel: для отправки электронных писем или совершения звонков, при этом обработка ссылки зависит от устройства, операционной системы и установленных приложений.

Ссылка mailto не обязательно должна содержать адрес электронной почты, но может, наряду с cc , bcc , subject и текстом body , автоматически заполнить поле для письма. По умолчанию будет открыто почтовое приложение. Вы можете автоматически заполнить тему и текст сообщения без адреса электронной почты, чтобы посетители сайта могли приглашать своих друзей. В нашей ссылке в нижнем колонтитуле документа мы указываем URL-адрес для регистрации:

<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

Вопросительный знак ( ? ) отделяет mailto: и адрес электронной почты (если таковой имеется) от поискового запроса. Внутри запроса поля разделяются амперсандами ( & ), а знаками равенства (=) каждое имя поля соответствует его значению. Вся строка кодируется с помощью процентного кодирования, что обязательно необходимо, если значение href не заключено в кавычки или если значения содержат кавычки.

Какое приложение откроется при нажатии пользователем кнопки «Нажать» или «Ввести» в tel линии, зависит от операционной системы, установленных приложений и настроек устройства. На iPhone может открыться FaceTime, телефонное приложение или контакты. На компьютере с Windows может открыться Skype, если он установлен.

Существует несколько других типов URL-адресов, таких как блобы и URL-адреса данных (см. примеры в разделе, посвященном атрибутам download ). Для защищенных сайтов (работающих по https ) можно создавать и запускать протоколы, специфичные для приложения, с помощью функции registerProtocolHandler() .

При добавлении ссылок, которые могут открывать другие установленные приложения, важно сообщить об этом пользователю. Убедитесь, что текст между открывающим и закрывающим тегами указывает пользователю, какой тип ссылки он собирается активировать. Для выбора стилей в зависимости от типа приложения можно использовать селекторы атрибутов CSS, такие как [href^="mailto:"] , [href^="tel:"] и [href$=".pdf"] .

Загружаемые ресурсы

Атрибут download следует указывать, когда атрибут href ведет к загружаемому ресурсу. Значение атрибута `download` — это предлагаемое имя файла для сохранения ресурса в локальной файловой системе пользователя. SVGOMG, оптимизатор SVG, использует атрибут download для предложения имени файла для загружаемого объекта `blob`, создаваемого оптимизатором. При оптимизации hal.svg открывающий тег ссылки для скачивания в SVGOMG будет выглядеть примерно так:

<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

Также есть демонстрация элемента <canvas> , который создает URL-адрес для загрузки данных в формате PNG .

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

Контекст просмотра

Атрибут target позволяет определить контекст просмотра для навигации по ссылкам (и отправки форм ). Четыре регистронечувствительных ключевых слова с префиксом подчеркивания были рассмотрены с элементом <base> . К ним относятся:

• (По умолчанию) _self : Открыть ссылку в текущем окне.
• _blank : Открыть ссылку в новой вкладке.
• _parent : Открыть ссылку в родительском объекте или iframe.
• _top : Открывает ссылку в самом верхнем родительском элементе. Это особенно полезно, если ссылка глубоко вложена.

Если ссылка не вложенная, атрибуты _top и _parent действуют так же, как _self . Атрибут target не ограничивается этими четырьмя ключевыми терминами: можно использовать любой термин.

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

Чтобы открыть ссылку в новой вкладке, пользователь может щелкнуть правой кнопкой мыши и выбрать «Открыть в новой вкладке». Разработчики могут принудительно включить эту опцию, добавив target="_blank" .

Ссылка с target="_blank" открывается в новой вкладке с пустым именем, при каждом клике по которой открывается новая, безымянная вкладка. Это может создать множество новых вкладок. Слишком много вкладок. Например, если пользователь кликнет по ссылке <a href="registration.html" target="_blank">Register Now</a> 15 раз, форма регистрации откроется в 15 отдельных вкладках. Эту проблему можно решить, указав имя контекста вкладки. Включив атрибут target со значением, чувствительным к регистру, например, <a href="registration.html" target="reg">Register Now</a> , первый клик откроет форму регистрации в новой вкладке reg . Повторный клик по этой ссылке 15 раз перезагрузит регистрацию в контексте просмотра reg , не открывая дополнительных вкладок.

Атрибут rel определяет тип создаваемых ссылок, задавая связь между текущим документом и ресурсом, на который ведет гиперссылка. Значение атрибута должно представлять собой список, разделенный пробелами, из одного или нескольких значений атрибута `rel`, поддерживаемых тегом <a> .

Ключевое слово nofollow можно добавить, если вы не хотите, чтобы поисковые роботы переходили по ссылке. Значение external можно добавить, чтобы указать, что ссылка ведет на внешний URL-адрес и не является страницей в текущем домене. Ключевое слово help указывает, что гиперссылка будет предоставлять контекстно-зависимую справку. При наведении курсора на ссылку с этим значением rel будет отображаться курсор справки, а не обычный указатель мыши. Не используйте это значение только для получения курсора справки; вместо этого используйте свойство CSS cursor . Значения prev и next можно использовать для ссылок, указывающих на предыдущий и следующий документ в серии.

Аналогично <link rel="alternative"> , значение <a rel="alternative"> зависит от других атрибутов. Альтернативы RSS-ленты также будут включать type="application/rss+xml" или type="application/atom+xml , альтернативные форматы будут включать атрибут type , а переводы — атрибут hreflang . Если содержимое между открывающим и закрывающим тегами написано на языке, отличном от языка основного документа, добавьте атрибут lang . Если язык документа, на который ведет гиперссылка, другой, добавьте атрибут hreflang .

В этом примере мы указываем URL переведенной страницы в качестве значения атрибута href , rel="alternate", чтобы обозначить, что это альтернативная версия сайта; атрибут hreflang указывает язык переводов:

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
<a href="/pt" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>

Если французский перевод представляет собой PDF-файл, вы можете указать атрибут type с MIME-типом PDF связанного ресурса. Хотя MIME-тип носит исключительно рекомендательный характер, всегда полезно сообщить пользователю, что ссылка откроет документ другого формата.

<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>

Отслеживание переходов по ссылкам

Один из способов отслеживания действий пользователя — отправка уведомления (ping) на URL-адрес при нажатии на ссылку. Атрибут ping , если он присутствует, содержит список защищенных URL-адресов (начинающихся с https ), разделенных пробелами, на которые следует отправить уведомление (ping), если пользователь активирует гиперссылку. Браузер отправляет POST запросы с телом PING на URL-адреса, указанные в значении атрибута ping .

Советы по улучшению пользовательского опыта

• При написании HTML-кода всегда учитывайте пользовательский опыт. Ссылки должны содержать достаточно информации о ресурсе, на который ведет ссылка, чтобы пользователь понимал, на что он нажимает.
• Внутри текстового блока внешний вид ссылок должен достаточно отличаться от окружающего текста, чтобы пользователи могли легче идентифицировать ссылки из другого контента. Используйте несколько визуальных индикаторов, таких как цвет и подчеркивание. Одного цвета недостаточно.
• Всегда добавляйте стили фокусировки. Это помогает пользователям, использующим клавиатуру для навигации, ориентироваться в содержимом при переключении между вкладками (например, Tab).
• Содержимое между открывающим тегом <a> и закрывающим тегом </a> — это доступное имя ссылки по умолчанию, которое должно информировать пользователя о назначении или цели ссылки. Если содержимое ссылки — изображение, то alt описание — это доступное имя. Текст ссылки и alt текст должны быть более описательными, чем «нажмите здесь» или «подробнее». Вместо этого они должны предоставлять пользователю информацию о том, куда он перейдет после активации ссылки. Это крайне важно для пользователей программ чтения с экрана и для результатов поиска.
• Не следует включать интерактивный контент, например, <button> или <input> , внутрь ссылки. Также не следует вкладывать ссылку внутрь кнопки <button> или <label> . Хотя HTML-страница всё равно будет отображаться, вложение элементов, на которые можно нажать и которые доступны для фокусировки, внутрь интерактивных элементов ухудшает пользовательский опыт.
• Если присутствует атрибут href , его активация произойдет при нажатии клавиши Enter, когда фокус находится на элементе <a> .
• Ссылки не ограничиваются HTML. Элемент a ` также можно использовать внутри SVG, образуя ссылку с атрибутами `href` или `xlink:href`.

Ссылки и JavaScript

Атрибут links возвращает HTMLCollection соответствующий элементам a и area , имеющим атрибут href .

let a = document.links[0]; // obtain the first link in the document

a.href = 'newpage.html'; // change the destination URL of the link
a.protocol = 'ftp'; // change just the scheme part of the URL
a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly

В этом разделе вы узнали все о ссылках. В следующем разделе рассматриваются списки, которые нам необходимо изучить, чтобы создавать списки ссылок, также известные как навигация.

Проверьте свое понимание

Проверьте свои знания о ссылках.