1.11.8. Ссылки
Ссылки представляют связь между двумя ресурсами, одним из которых является текущий документ. Ссылки создаются элементами <a>, <area>, <form> и <link>. В HTML есть два вида ссылок:
Ссылки на внешние ресурсы — это ссылки на ресурсы, которые должны использоваться для дополнения текущего документа (метаданные), обычно автоматически обрабатываемые браузером.
Гиперссылки — это ссылки на другие ресурсы, которые пользователь может посещать в браузере или загружать.
Если элементы <a>, <form> и <area> имеют атрибут href и не имеют атрибут rel, либо атрибут rel не имеет ключевых слов, определяющих гиперссылки, то они создают гиперссылки.
Ссылки в HTML-документах
1. Ссылки, созданные элементами <a> и <area>
Атрибут href задает URL-адрес ссылки.
Атрибут target задает название контекста просмотра, который будет использоваться при переходе по гиперссылкам.
Контекст просмотра — это окружение, в котором браузер отображает документ (обычно это вкладки, однако, возможно окно или фрейм внутри страницы).
Атрибут download указывает, что гиперссылка используется для скачивания файла. Если атрибут имеет значение — имя файла, это позволяет переименовать файл при скачивании.
Атрибут ping задает URL-адреса ресурсов, которые получат уведомления, если пользователь перейдет по гиперссылке.
Атрибут rel дополняет атрибут href информацией об отношении между текущим и связанным документом.
Атрибут hreflang определяет язык связанного веб-документа, который задается аббревиатурой, состоящей из пары букв, обозначающих код языка.
Атрибут type указывает MIME-тип связанного ресурса.
Атрибут referrerpolicy устанавливает политику HTTP-заголовка — количество информации об исходной странице, с которой осуществлен переход на целевую страницу.
2. Типы ссылок
Атрибут rel определяет, какие типы ссылок создают элементы, устанавливая отношения между связанным ресурсом и текущим документом. Значением атрибута должен быть набор разделенных пробелами ключевых слов. Атрибут не имеет значения по умолчанию.
Ключевые слова dns-prefetch, modulepreload, pingback, preconnect, prefetch, preload, prerender и stylesheet, указанные для элемента <link>, разрешены внутри <body>.
| Ключевое слово | Элементы | Описание |
|---|---|---|
| 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) такой ссылки не запускает новую выборку скриптов модуля, так как карта модуля документа уже была заполнена предыдущей выборкой. |
| <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="https://html5book.ru/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="https://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="https://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. Тип ссылки
<a href="https://example.com/sample_page/" rel="external ">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="https://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="https://html5book.ru/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
