1.11.8. Ссылки

Ссылки представляют связь между двумя ресурсами, одним из которых является текущий документ. Ссылки создаются элементами <a>, <area>, <form> и <link>. В HTML есть два вида ссылок:

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

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

Если элементы <a>, <form> и <area> имеют атрибут href и не имеют атрибут rel, либо атрибут rel не имеет ключевых слов, определяющих гиперссылки, то они создают гиперссылки.

Ссылки в HTML-документах

Атрибут href задает URL-адрес ссылки.

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

Контекст просмотра — это окружение, в котором браузер отображает документ (обычно это вкладки, однако, возможно окно или фрейм внутри страницы).

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

Атрибут ping задает URL-адреса ресурсов, которые получат уведомления, если пользователь перейдет по гиперссылке.

Атрибут rel дополняет атрибут href информацией об отношении между текущим и связанным документом.

Атрибут hreflang определяет язык связанного веб-документа, который задается аббревиатурой, состоящей из пары букв, обозначающих код языка.

Атрибут type указывает MIME-тип связанного ресурса.

Атрибут referrerpolicy устанавливает политику HTTP-заголовка — количество информации об исходной странице, с которой осуществлен переход на целевую страницу.

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

Ключевые слова dns-prefetch, modulepreload, pingback, preconnect, prefetch, preload, prerender и stylesheet, указанные для элемента <link>, разрешены внутри <body>.

Таблица 1. Значения атрибута rel
Ключевое слово Элементы Описание
alternate <link>, <a>, <area> Дает ссылку на альтернативную версию документа.
author <link>, <a>, <area> Для элементов <a> и <area> указывает, что связанный документ (или mailto:) предоставляет информацию об авторе родительского элемента <article>, если он есть, в противном случае — страницы в целом.

Для элемента <link> указывает на автора всего документа.

bookmark <a>, <area> Помечает ссылку на ближайший связанный родительский элемент <article> или раздел, если нет родительского <article>, как постоянную.
canonical <link> Помечает страницу как первоисточник. Если у вас есть одна страница, доступная по нескольким URL, или разные страницы с практически одинаковым контентом (например, версии для мобильных устройств и компьютеров), поисковая система будет считать один URL каноническим, а остальные – его копиями. Сканирование канонического URL будет выполняться чаще, чем сканирование копий.
dns-prefetch <link> Указывает браузеру о приоритетном выполнении преобразования IP-адреса в доменное имя для ресурса, с которого подгружаются скрипты, стили и т.д. в текущий документ.
external <a>, <area>, <form> Указывает, что ссылка ведет к документу, который не является частью сайта.
help <link>, <a>, <area>, <form> Указывает, что текущая страница является справочной страницей для той, на которую она ссылается.
icon <link> Создает ссылку на значок, который должен использоваться браузером при представлении страницы во вкладке.
license <link>, <a>, <area>, <form> Указывает, что документ по ссылке содержит условия лицензии на авторское право, в соответствии с которыми предоставляется основное содержимое текущего документа.
manifest <link> Создает ссылку на файл в формате JSON, содержащий параметры запуска и значения по умолчанию для PWA (прогрессивного веб-приложения).
modulepreload <link> Является альтернативой preload. Браузер выполняет предварительную загрузку скриптов модуля. Изменение соответствующих атрибутов (таких как, crossorigin и referrerpolicy) такой ссылки не запускает новую выборку скриптов модуля, так как карта модуля документа уже была заполнена предыдущей выборкой.
nofollow <a>, <area>, <form> Указывает поисковым роботам игнорировать связь между ссылками.
noopener <a>, <area>, <form> Указывает браузеру перейти к документу по ссылке без предоставления новому контексту просмотра доступа к текущему документу, запрещая новой вкладке использовать свойство window.opener для изменения исходной страницы для кражи информации и распространения вредоносного кода.
noreferrer <a>, <area>, <form> Информация о Referer не отправляется при переходе по ссылке.
pingback <link> Уведомляет сайт, когда кто-то ссылается на один из его документов.
preconnect <link> Оповещает браузер о том, что к источнику по ссылке нужно подключиться как можно скорее, чтобы извлечь ресурсы, используемые текущим документом, которые загружаются, например, по CDN.
prefetch <link> Подсказывает браузеру, что целевой ресурс понадобится пользователю для будущих переходов, поэтому браузер может улучшить взаимодействие с пользователем, предварительно извлекая и кэшируя ресурс.
preload <link> Указывает, что браузер должен предварительно получить и кэшировать ресурс по ссылке в соответствии атрибутом as. Это гарантирует, что они такие ресурсы будут доступны раньше и с меньшей вероятностью заблокируют отрисовку страницы, что повысит производительность.
prerender <link> Указывает, что браузер должен предварительно получить целевой ресурс и обработать его, например, путем получения его подресурсов или выполнения некоторого рендеринга в фоновом режиме.
search <link>, <a>, <area>, <form> Указывает, что указанный документ предоставляет специальный интерфейс для поиска в документе и связанных с ним ресурсах.
stylesheet <link> Импортирует внешний ресурс, который будет использоваться в качестве таблицы стилей. Атрибут type не нужен, так как по умолчанию это таблица стилей text/css. Если это не таблица стилей, то тип нужно объявить.
tag <a>, <area> Указывает, что последняя часть URL является «меткой» для текущего документа.
next <link>, <a>, <area>, <form> Указывает, что текущий документ является частью группы страниц, и что ссылка ведет на следующий документ в серии.
prev <link>, <a>, <area>, <form> Указывает, что текущий документ является частью группы страниц, и что ссылка ссылается на предыдущий документ в серии.

3. Примеры ссылок

3.1. Тип ссылки alternate

<!-- основная таблица стилей -->
<link rel="stylesheet" href="default.css">

<!-- предпочтительная альтернативная таблица стилей -->
<link rel="stylesheet" href="green.css" title="Green styles>"

<!-- указывает на новостную ленту формата Atom для текущей страницы -->
<link rel="alternate" type="application/atom+xml" href="posts.xml" title="Cool Stuff Blog">

<!-- указывает версию страницы на другом языке и для других носителей --> 
<link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML">

3.2. Тип ссылки author

<article>
  <!-- Автором этого раздела является Someone Else -->
  <h1>An Awesome Guest Post</h1>
  <p>This article is by Someone Else.</p>
  <a rel="author" href="someone-else.html">About Someone Else</a>
</article>
<!-- Comments Section -->
<h2>Comments</h2>
<article>
  <a rel="author" href="commenter.html">A Commenter</a>
  <p>This comment was written by A Commenter.</p>
</article>

3.3. Тип ссылки bookmark

<h1>Example of permalinks</h1>
<div id="a">
    <h2>First example</h2>
    <p><a href="a.html" rel="bookmark">This permalink applies to only the content from the first H2 to the second H2</a>. The DIV isn't
        exactly that section, but it roughly corresponds to it.</p>
</div>
<h2>Second example</h2>
<article id="b">
    <p><a href="b.html" rel="bookmark">This permalink applies to the outer ARTICLE element</a> (which could be, e.g., a blog post).</p>
    <article id="c">
        <p><a href="c.html" rel="bookmark">This permalink applies to the inner ARTICLE element</a> (which could be, e.g., a blog comment).</p>
    </article>
</article>

3.4. Тип ссылки canonical

<link rel="canonical" href="https://example.com/dresses/green-dresses">

3.5. Тип ссылки dns-prefetch

<link rel="dns-prefetch" href="https://example.com">

3.6. Тип ссылки external

<a href="http://example.com/sample_page/" rel="external">Your Link</a>

3.7. Тип ссылки help

<p><label> Topic: <input name=topic> <a href="help/topic.html" rel="help">(Help)</a></label></p>

3.8. Тип ссылки icon

<head>
    <title>lsForums — Inbox</title>
    <link rel=icon href=favicon.png sizes="16x16" type="image/png">
    <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
    <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
    <link rel=icon href=iphone.png sizes="57x57" type="image/png">
    <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
    <link rel=stylesheet href=lsforums.css>
    <script src=lsforums.js></script>
    <meta name=application-name content="lsForums">
</head>

3.9. Тип ссылки license

<p>
    <small>
        <a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a>
    </small>
</p>

3.10. Тип ссылки manifest


 дать веб-приложению резервное имя и набор значков. 
<link rel="manifest" href="manifest.webmanifest">
<meta name="application-name" content="Racer3K">
<link rel="icon" sizes="16x16 32x32 48x48" href="lo_def.ico">
<link rel="icon" sizes="512x512" href="hi_def.png">

3.11. Тип ссылки modulepreload

<link rel="modulepreload" href="awesome-viewer.mjs">
<button onclick="import('./awesome-viewer.mjs').then(m => m.view())">
  View awesome thing
</button>

3.12. Тип ссылки nofollow

<a href="http://example.com/sample_page/" rel="external nofollow">Other Domain Link</a>

3.13. Тип ссылки noopener

<a href=help.html target=example rel=noopener>Help!</a>

3.14. Тип ссылки noreferrer

<a href="https://www.mytech.com/store/" target="_blank" rel="noreferrer">MyStore</a>

3.15. Тип ссылки pingback

<link rel="pingback" href="http://bob.example.net/xmlrpcserver">

3.16. Тип ссылки preconnect

<link rel="preconnect" href="https://example.com">

3.17. Тип ссылки prefetch

<link rel="prefetch" href="style.css" as="style">

3.18. Тип ссылки preload

<link rel="preload" href="style.css" as="style">

3.19. Тип ссылки prerender

<link rel="prerender" href="https://example.com/about.html">

3.20. Тип ссылки search

<link rel="search" type="application/opensearchdescription+xml" title="searchTitle" href="pluginURL">

3.21. Тип ссылки stylesheet

<link href="/media/example.css" rel="stylesheet">

3.22. Тип ссылки tag

<header>
    <h1>My precious</h1>
    <p>Summer 2012</p>
</header>
<p>Recently I managed to dispose of a red gem that had been
    bothering me. I now have a much nicer blue sapphire.</p>
<p>The red gem had been found in a bauxite stone while I was digging
    out the office level, but nobody was willing to haul it away. The
    same red gem stayed there for literally years.</p>
<footer>
    Tags: <a rel=tag href="https://en.wikipedia.org/wiki/Gemstone">Gemstone</a>
</footer>

3.23. Тип ссылки next / prev

<link rel="next" href="https://site.ru/catalog/?page=3>
<link rel="prev" href="https://site.ru/catalog/?page=2">

По материалам Links

Поделиться: