Ссылки¶

Все, что нужно знать о ссылках.

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

Тег <a> якоря вместе с атрибутом href создают гиперссылку. Ссылки являются основой Интернета. Первая веб-страница [http://info.cern.ch/hypertext/WWW/TheProject.html] содержала 25 ссылок и гласила: "Все, что есть в Интернете о W3, прямо или косвенно связано с этим документом". По всей вероятности, все, что есть в Интернете о W3, прямо или косвенно связано и с этим документом!

Возможности Интернета и тега <a> значительно возросли с тех пор, как Тим Бернерс-Ли опубликовал это первое объяснение в августе 1991 года. Ссылки представляют собой связь между двумя ресурсами, одним из которых является текущий документ. Ссылки могут быть созданы с помощью тегов <a>, <area>, <form> и <link>. Вы уже узнали о <link>, а о forms вы узнаете в отдельном разделе. Существует также целый раздел изучение форм. На этом занятии вы узнаете об однобуквенном, не очень простом теге <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:[email protected]"
    >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, таких как blobs и data URLs (см. примеры в обсуждении атрибута download). Для защищенных сайтов (обслуживаемых по протоколу https) можно создавать и запускать протоколы, специфичные для приложения с помощью registerProtocolHandler().

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

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

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

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

Также имеется демонстрация <canvas>, создающего загружаемый PNG-данный URL.

Для ссылки на загружаемый ресурс в качестве значения атрибута href следует указать URL актива, а в качестве значения атрибута 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.

В данном примере в качестве значения href, rel="alternate", мы указываем URL переведенной страницы, чтобы показать, что это альтернативная версия сайта; атрибут 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
>

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

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

Советы по работе с пользователями¶

Всегда учитывайте пожелания пользователей при написании HTML. Ссылки должны содержать достаточно информации о ресурсе, на который они ссылаются, чтобы пользователь знал, на что он нажимает.
Внутри текстового блока убедитесь, что внешний вид ссылок достаточно отличается от окружающего текста, чтобы пользователи могли легко отличить ссылки от остального содержимого, причем цвет не является единственным средством отличия текста от окружающего содержимого.
Всегда включайте стили фокуса; это позволит клавиатурным навигаторам знать, где они находятся при переходе по вкладкам вашего содержимого.
Содержимое между открывающим <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

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

Источник¶

Links