Содержание

Атрибут rel | htmlbook.ru

Атрибут rel | htmlbook.ru

Атрибуты тегов

Значения атрибутов

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

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

Синтаксис

HTML
<link rel="тип">
XHTML
<link rel="тип" />

Значения

stylesheet
Определяет, что подключаемый файл хранит таблицу стилей (CSS).
alternate
Альтернативный тип, используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
  <head>
   <meta charset="utf-8">
   <title>Тег LINK, атрибут rel</title> 
   <link rel="stylesheet" href="hb.css">
  </head> 
  <body>
   <p>...</p>
  </body>
</html>

Статьи по теме

О сайте

Помощь

Копирование материалов

Борьба с ошибками

Технологии

Поисковый плагин

Основные разделы

Статьи

Блог

Практикум

Цифровые книги

Форум

HTML

Самоучитель HTML

XHTML

Справочник по HTML

HTML5

CSS

Самоучитель CSS

Справочник по CSS

Рецепты CSS

CSS3

Сайт

Вёрстка

Макеты

Веб-сервер

htmlbook.ru использует хостинг timeweb

© 2002–2021 Влад Мержевич, по всем вопросам пишите по адресу [email protected]

Подпишитесь на материалы сайта по RSS

Тег | htmlbook.

ru
Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. В отличие от тега <a>, тег <link> размещается всегда внутри контейнера <head> и не создает ссылку.

Синтаксис

HTML
<head>
  <link атрибуты>
</head>
XHTML
<head>
  <link атрибуты />
</head>

Атрибуты

charset
Кодировка связываемого документа.
href
Путь к связываемому файлу.
media
Определяет устройство, для которого следует применять стилевое оформление.
rel
Определяет отношения между текущим документом и файлом, на который делается ссылка.
sizes
Указывает размер иконок для визуального отображения.
type
MIME-тип данных подключаемого файла.

Также для этого тега доступны универсальные атрибуты.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
  <head>
   <meta charset="utf-8">
   <title>Тег LINK</title>  
   <link rel="stylesheet" href="ie.css">
   <link rel="alternate" type="application/rss+xml" 
     title="Статьи с сайта htmlbook.ru" href="http://htmlbook.ru/rss.xml"> 
   <link rel="shortcut icon" href="http://htmlbook.ru/favicon.ico">
  </head> 
  <body>
    <p>...</p>
  </body>
</html>

В данном примере подключается внешний файл со стилями с помощью атрибута rel=»stylesheet» тега <link>, указывается RSS-документ текущего сайта (link rel=»alternate» type=»application/rss+xml») и устанавливается иконка сайта в адресной строке браузера (link rel=»shortcut icon»).

Атрибут media | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Определяет устройство, для которого следует применять стилевое оформление. Это позволяет сделать разный стиль для отображения документа на экране монитора и при его печати. Допускается писать несколько значений через запятую.

Синтаксис

HTML
<link media="all|braille|handheld|print|screen|speech|projection|tty|tv">
XHTML
<link media="all|braille|handheld|print|screen|speech|projection|tty|tv" />

Значения

all
Все устройства.
braille
Устройства, основанные на системе Брайля, предназначены для слепых людей.
handheld
Наладонники, смартфоны, устройства с малой шириной экрана.
print
Печатающее устройство вроде принтера.
screen
Экран монитора.
speech
Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.
projection
Проектор.
tty
Телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана. Для них не должны использоваться пикселы в качестве единиц измерения.
tv
Телевизор.

В HTML5 в качестве значений могут быть указаны медиа-запросы.

Значение по умолчанию

all

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

: Элемент — ссылка на внешний ресурс — HTML

Элемент HTML — Ссылка на Внешний Ресурс (<link>) определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на  stylesheets, а также для создания иконок сайта (как для иконок в стиле «favicon», так и для иконок домашних экранов и приложений мобильных устройств) среди прочего.

Чтобы подключить таблицу стилей, вы должны включить элемент <link> внутри вашего <head> следующим образом:

<link href="main.css" rel="stylesheet">

В этом простом примере указывается путь к таблице стилей внутри атрибута href и атрибут rel со значением stylesheet. rel означает «отношения (relationship)», и, вероятно, является одной из ключевых особенностей элемента <link>  — значение сообщает как указанный элемент связан с  содержащим его документом. Как вы увидите в нашем справочнике типы ссылок, есть много различных видов отношений.

Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:

<link rel="icon" href="favicon. ico">

Есть ряд других значений rel для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например:

<link rel="apple-touch-icon-precomposed"
      href="apple-icon-114.png" type="image/png">

Атрибут sizes определяет размер иконки, когда type содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.

Вы можете, также, указать медиа тип или запрос внутри атрибута media; этот ресурс будет загружен только в том случае, если media состояние равно true. Например:

<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

В элемент <link> также были добавлены некоторые новые интересные возможности производительности и безопасности, к примеру:

<link rel="preload" href="myFont.
 
 woff2" as="font"
      type="font/woff2" crossorigin="anonymous">

Значение rel — preload указывает, что браузер должен предварительно загрузить этот ресурс (смотрите Предварительная загрузка контента при помощи rel=»preload» для более подробной информации), атрибут as указывает на определённый класс загружаемого контента. Атрибут crossorigin указывает должен ли ресурс загружаться с помощью запроса  CORS.

Другие замечания по использованию:

  • Элемент <link> может присутствовать в элементах <head> или <body>, в зависимости от того, имеет ли он тип ссылки, являющейся
    body-ok    . Например, ссылка типа stylesheet является body-ok,и, поэтому,  <link rel="stylesheet"> допускается в body. Однако, это не очень хорошая практика использования; более осмысленно отделять ваши <link> от содержимого body, помещая их в <head>.
  • При использовании <link> для установки favicon сайта, и когда ваш сайт использует Политику Безопасности Контента (CSP) для повышения безопасности, политика применяется к favicon. Если вы столкнулись с проблемой при загрузке favicon, проверьте, что img-src
    директива заголовка Content-Security-Policy (en-US) не препятствует доступу к ней.
  • Спецификации HTML и XHTML определяют обработчики событий для элемента  <link>, но не указывают как они будут использоваться.
  • В XHTML 1.0, пустые элементы, такие как <link>, требуют слеш: <link />.
  • WebTV поддерживает использование значения next для rel в качестве предварительной загрузки следующей страницы в серии документов.

Этот элемент включает в себя глобальные атрибуты.

as
Этот атрибут используется только для элементов <link> с атрибутом
rel="preload" или rel="prefetch". Он указывает тип контента, загружаемого <link>, который необходим для определения приоритетов контента, сравнения запросов, применения корректного content security policy, и установки корректного Accept запрашиваемого заголовка.
crossorigin
Этот перечисляемый атрибут указывает, должен ли CORS использоваться при загрузки ресурса. CORS-поддерживаемые изображения могут быть повторно использованы в элементе <canvas> не искажая их. Допустимы значения:
anonymous
Cross-origin запрос (т.е. с HTTP-заголовком Origin) выполняется, но учётные данные не отправляются (т.е. нет cookie, сертификата X.509, или базовой аутентификации HTTP). Если сервер не передал учётные данные исходному сайту (нет настроенного HTTP-заголовка Access-Control-Allow-Origin),  изображение будет искажено, а его использование ограничено.
use-credentials
Cross-origin запрос (т. е. с HTTP-заголовком Origin) выполняется вместе с отправкой учётных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учётные данные исходному сайту (через HTTP-заголовок Access-Control-Allow-Credentials (en-US)), ресурс будет искажён, а его использование ограничено.
Если атрибут отсутствует, ресурс загружается без запроса CORS (т.е. без отправки HTTP-заголовка Origin), предотвращая его незагрязненное использование. В случае невалидности, он обрабатывается как при использовании ключевого слова anonymous. Для получения дополнительной информации смотрите  CORS settings attributes.
href
Этот атрибут определяет URL, связываемого ресурса. URL может быть абсолютным или относительным.
hreflang
Этот атрибут определяет язык, связываемого ресурса. Он является консультативным. Допустимые значения определяются BCP47. Используйте этот атрибут только если присутствуют атрибуты href.
importance 
Указывает на относительную важность ресурса. Приоритетные подсказки передаются используя значения:

auto: указывает на отсутствие предпочтений. Браузер может использовать собственную эвристику для определения приоритетов ресурсов.

high: указывает браузеру, что ресурс находится в высоком приоритете.

low: указывает браузеру, что ресурс находится в низком приоритете.

Примечание: Атрибут importance можно использовать только для элементов <link> с атрибутами rel="preload" или rel="prefetch".

integrity 
Содержит встроенные метаданные — криптографический хеш-код ресурса(файла) в кодировке base64, который вы сообщаете браузеру для загрузки. Браузер может использовать его для проверки, что загруженный ресурс был получен без неожиданных манипуляций. Смотрите Subresource Integrity.
media
Этот атрибут указывает медиа, который применяет связываемый ресурс. Его значение должно быть типом медиа или медиавыражением. Этот атрибут, в основном, полезен при связывании с внешними таблицами стилей — он позволяет пользовательскому агенту выбрать наиболее подходящее устройство для запуска.

Примечания:

  • В HTML 4, это может быть только простой, разделённый пробелами, список литералов, описывающих медиа, т.е.  media типы и группы, которые определены и допустимы в качестве значений для этого атрибута, такие как print, screen, aural, braille. HTML5 распространил это на любые медиавыражения, которые являются расширенным набором допустимых значений HTML 4.
  • Браузеры, не поддерживающие медиавыражения, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определённым в HTML 4.
referrerpolicy 
Строка, указывающая какой реферер использовать при загрузки ресурсов:
  • no-referrer означает, что заголовок Referer не будет отправлен.
  • no-referrer-when-downgrade означает, что заголовок Referer не будет отправлен при переходе к источнику без TLS (HTTPS). Это поведение пользовательского агента по умолчанию, если не указано иное.
  • origin означает, что реферером будет источник, который соответствует схеме, хосту и порту.
  • origin-when-cross-origin означает, что навигация к другим источникам будет ограничена схемой, хостом, портом, в то время как навигация по одному и тому же источнику будет включать путь реферер .
  • unsafe-url означает, что в качестве источника ссылки будет указываться источник и путь (но не фрагмент, пароль или имя пользователя). Этот вариант небезопасен, потому что он может способствовать утечки источников и путей из TLS-защищённых ресурсов в незащищённые источники.
rel
Этот атрибут определяет отношения связываемого документа и текущего документа. Атрибут должен быть разделённым пробелами списком значений типов ссылки.
sizes
Этот атрибут определяет размеры иконки для визуальных медиа, содержащихся в ресурсе. Он должен быть представлен только, если rel содержит значение icon или нестандартный тип, например apple-touch-icon Apple. Может иметь следующие значения:
  • any, означает, что иконка может быть масштабируема до любого размера, например в векторном формате image/svg+xml.
  • пробелоразделенный список размеров, каждый в формате <width in pixels>x<height in pixels> или <width in pixels>X<height in pixels>. Каждый из этих размеров должен содержаться в ресурсе.

Примечание: Большинство форматов иконок могут хранить только одну иконку, поэтому чаще всего sizes содержит только одну запись. MS’s ICO формат, как и Apple’s ICNS. ICO более распространены; вы должны использовать их.

title
Атрибут title имеет особое значение для элемента <link>. При использовании <link rel="stylesheet"> он определяет предпочтительную или альтернативную таблицу стилей. Неверное использование может стать причиной игнорирования таблицы стилей.
type
Этот атрибут используется для определения типа связываемого контента. Значение атрибута должно быть типом MIME, такое как text/html, text/css и т.д. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например, text/css), но, учитывая, что CSS является единственным языком таблиц стилей, используемым в сети, этот атрибут может быть пропущен, что является рекомендацией.  Он также используется для типов ссылок rel="preload", чтобы браузер загружал только те типы файлов, которые он поддерживает.

Нестандартные атрибуты

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

Примечание: Хотя в стандарте  HTML нет атрибута disabled, атрибут disabled есть в объекте DOM HTMLLinkElement.

methods 
Значение этого атрибута предоставляет информацию о функциях, которые могут выполняться над объектом. Значения обычно задаются протоколом HTTP, когда он используется, но может быть (аналогично атрибуту title) полезно заранее включить в ссылку консультативную информацию. Например, браузер может выбрать другое отображение ссылки в зависимости от указанных методов; то, что доступно для поиска может получить другую иконку, или внешняя ссылка может отображаться с указанием перехода с текущего сайта. Этот атрибут не совсем понятен и не поддерживается, даже определяющим браузером, Internet Explorer 4.
prefetch Secure context
Этот атрибут идентифицирует ресурс, который может потребоваться при следующей навигации, и необходимость получить его пользовательским агентом. Это позволяет пользовательскому агенту быстрее реагировать, когда, в будущем, ресурс будет запрошен.
target 
Определяет название фрейма или окна, которое определяет связывающие отношения, или, которое будет показывать рендеринг любого связываемого ресурса.

Устаревшие атрибуты

charset Этот API вышел из употребления и его работа больше не гарантируется.
Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделённый пробелами и/или запятыми, как определено в  RFC 2045. Значение по умолчанию iso-8859-1. Примечание по использованию: Для получения эффекта использования данного устаревшего атрибута, используйте HTTP-заголовок Content-Type на связываемый ресурс.
rev Этот API вышел из употребления и его работа больше не гарантируется.

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

Примечание: Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что rev не считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться на rev не стоит.

Взамен, вы должны использовать атрибут rel с противоположным значением типов ссылки. Например, чтобы установить обратную ссылку для made, укажите author. Также, этот атрибут не означает «ревизия» и не должен использоваться с номером версии, даже если многие сайты используют его в этих целях.

Элемент <link> не имеет визуального представления в веб-документе, поэтому он не должен стилизоваться.

Включение таблицы стилей

Включение таблицы стилей на страницы имеет следующий синтаксис:

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

Предоставление альтернативных таблиц стилей

Вы можете указать альтернативные таблицы стилей.

Пользователь может выбрать, какую таблицу стилей использовать, выбрав её в меню  Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.

<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">

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

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


<link rel="apple-touch-icon-precomposed" href="favicon144.png">

<link rel="apple-touch-icon-precomposed" href="favicon114.png">

<link rel="apple-touch-icon-precomposed" href="favicon72.png">

<link rel="apple-touch-icon-precomposed" href="favicon57.png">

<link rel="icon" href="favicon32.png">

Условная загрузка ресурсов с медиавыражениями

Вы можете предоставить тип медиа или запрос внутри атрибута media; этот ресурс будет загружен только в том случае, если условия медиа равно true. Например:

<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="all">
<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)">
<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">

События загрузки таблицы стилей

Вы можете определить,  когда таблица стилей была загружена, наблюдая за событием  load, запускающимся в нем; аналогично, вы можете обнаружить, произошла ли ошибка при обработки таблицы стилей, наблюдая за событием error:

<script>
var myStylesheet = document. querySelector('#my-stylesheet');

myStylesheet.onload = function() {
  
}

myStylesheet.onerror = function() {
  console.log("An error occurred loading the stylesheet!");
}
</script>

<link rel="stylesheet" href="mystylesheet.css">

Примечание: Событие load запускается после загрузки и анализа таблицы стилей и всего импортируемого содержимого, непосредственно перед тем, как стили будут применены к содержимому.

Preload примеры

BCD tables only load in the browser

Тег | HTML справочник

Поддержка браузерами

Описание

HTML тег <link> определяет отношение между текущим html-документом и внешним ресурсом, на который он ссылается. Он является пустым элементом (не имеет содержимого и закрывающего тега) и всегда должен располагаться внутри элемента <head>. Чаще всего тег <link> используется для подключения внешних таблиц стилей:


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

Первый атрибут href определяет адрес документа, который может быть как абсолютным так и относительным. Второй атрибут rel указывает связь между HTML файлом и тем, на что вы ссылаетесь, в данном случае мы ссылаемся на таблицу стилей, поэтому используется значение stylesheet. Атрибут type сообщает браузеру MIME тип документа, для таблиц стилей значением всегда будет "text/css".

Примечание: по стандарту HTML5, при подключении к документу внешнего файла CSS, атрибут type указывать не требуется:

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

Предварительная загрузка страниц

Обычно, когда вы кликаете по ссылке на другую страницу приходится ждать несколько секунд пока она загрузится. Однако, вы можете настроить вашу веб-страницу таким образом, чтобы определённые страницы загружались заранее в кэш браузера в то время пока вы находитесь на текущей странице. Это означает, что когда вы кликнете по ссылке для перехода на другую веб-страницу, то она откроется сразу и не надо будет ждать, пока она загрузится. Это называется «предварительное получение страницы». Чтобы сделать это, используется тег <link> с атрибутом rel="prefetch", а также указывается целевая страница, которая будет заранее загружена на компьютер.

<link rel="prefetch" href="httр://www.puzzleweb/html/tag_p.php">

Такая запись позволит заранее закешировать страницу tag_p.php на компьютере, пока вы читаете содержимое текущей страницы. Вы можете использовать тег <link> для предварительной загрузки любого количества страниц вашего собственного сайта или любых других из интернета.

Примечание: вместо адреса на HTML-документ можно указать путь к файлу другого типа (картинку, видео и тд.).

Атрибуты

href:
Указывает месторасположение (URL) внешнего файла (путь к файлу может быть указан с помощью абсолютного или относительного адреса).
hreflang:
Указывает двухбуквенный код языка, определяющий язык документа, на который ведет ссылка. Атрибут hreflang используется только совместно с атрибутом href.
media:
Определяет под какие устройства оптимизирован файл. Главным образом он используется с файлами таблиц стилей, для определения различных стилей под разные типы носителей. Атрибут media может принимать сразу несколько значений, разделяемых между собой пробелами.
rel:
Указывает связь между текущим документом и документом, на который ведет ссылка.
  • alternate — ссылка на альтернативную версию документа (то есть страницы для печати, перевод или зеркало).
  • author — определяет ссылку страницу об авторе документа или на страницу с контактными данными автора.
  • canonical — позволяет пометить страницы с дублирующимся контентом, это значит что все страницы, имеющие одинаковое содержимое должны содержать тег <link> с атрибутом rel="canonical".

    Атрибут href, в этом случае, должен содержать ссылку на страницу с идентичным содержимым, которую поисковые системы должны считать основной: 

    <link rel="canonical" href="httр://www.puzzleweb/html/tag_p.php">
  • first — указывает ссылку, ведущую на первый документ из последовательности документов.
  • help — ссылка на документ со справкой.
  • icon — определяет путь к иконке, которая будет использована для текущего документа.
  • last — указывает ссылку, ведущую на последний документ в последовательности документов.
  • licence — ссылка на сведения об авторских правах для документа.
  • next — указывает, что этот документ является частью серии, и что ссылка будет вести на следующий документ в этой серии.
  • prefetch — указывает, что следует заранее кэшировать файл, на который ведет ссылка.
  • prev — указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии.
  • search — ссылка на поиск для документа.
  • stylesheet — определяет внешний файл, который будет использоваться в качестве таблицы стилей для данного документа.
sizes:
Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon", может принимать следующий значения:
type:
Указывает MIME-тип (спецификация форматирования сообщений и кодирования информации для передачи по интернету) документа, на который ведет ссылка, используется только совместно с атрибутом href.

Тег <link> так же поддерживает Глобальные атрибуты

Стиль по умолчанию


link {
    display: none;
}

Пример


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

Результат данного примера в окне браузера:

Что такое — CodeRoad



Сегодня я наткнулся на бирку <link rel="image_src"> . Я не знаю об этом, поэтому я использую google. Google говорит мне, что этот тег похож на og:image . Поэтому я пришел на главный сайт open graph, чтобы прочитать об этом http://ogp.me/, но ничего не нашел о ссылке rel="image_src" . Таким образом, этот тег является заменой meta property="og:image" или находится в специальном теге в другой спецификации ? Как использовать этот тег или для чего он используется?

html xhtml
Поделиться Источник Heroes84     09 октября 2013 в 14:10

3 ответа

  • Поведение <link rel=alternate> в браузерах

    Я немного смущен поведением <link rel=alternate . ..> в браузерах и ищу некоторые разъяснения. Давайте используем следующий код для иллюстрации: <!DOCTYPE html> <html lang=en> <head> <link rel=stylesheet href=a.css type=text/css title=Main Stylesheet> <link…

  • сопоставление обоих возможных значений rel в a <link>

    В настоящее время я анализирую конечные точки webmention со следующим кодом. Это работает либо для <link rel=webmention href= > , либо для <link rel=http://webmention.org/ href= > , но не в том случае, если оба включены, то есть <link rel=webmention http://webmention.org/ href= >…


34

Атрибут rel указывает тип ссылки, то есть вид связи между документом и связанным ресурсом. Обычно используется всего несколько ключевых слов, таких как stylesheet и icon. Хотя было предложено и зарегистрировано много других ключевых слов, большинство из них предназначены только для записи: они предназначены для выражения чего-то, но никого это не волнует (ни одно программное обеспечение не использует эту информацию).

Механизмы расширения HTML5 включают в описание типов ссылок несколько неясный механизм, который теоретически позволяет любому зарегистрировать свое любимое ключевое слово в существующих значениях rel wiki, чтобы сделать документы, использующие его как rel значение “conforming”.

И image_src действительно был зарегистрирован там, с информацией о том, что он используется для “указания значка веб-страницы для использования Facebook, Yahoo, Digg и т. д.”, никакой спецификации не было идентифицировано, но статья о нем связана, и это “probably redundant with rel=icon”.

Поделиться Jukka K. Korpela     09 октября 2013 в 14:31


7

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

Поделиться Adler     10 февраля 2014 в 23:48


2

Когда кто-то размещает ссылку на ваш сайт в социальной сети media, например Facebook, изображение, которое отображается вместе с вашей ссылкой, обычно является первым в вашем коде. Это может быть не то изображение, которое лучше всего подходит для вашего сайта, и оно может плохо вписаться в маленькую коробку, которую публикует Facebook. Тег link rel=»image_src» позволяет вам управлять тем, какое изображение (или изображения, которые вы можете иметь более одного, складывая отдельные ссылки) отображается рядом с вашей ссылкой.

Поделиться TychaBrahe     20 октября 2016 в 16:22

Похожие вопросы:


rel=image_src не изменяет миниатюру

Я добавил этот код в голову, но когда я пытаюсь опубликовать что-то о веб-сайте внутри страницы Facebook, изображение, которое я указал, все еще не отображается как опция. Я использую wordpress как…


Зачем использовать <link rel=»apple-touch-icon image_src» …> ?

Пока я смотрел на источник HTML для моего любимого сайта , я заметил, что он использует <link rel=shortcut icon href=favicon. ico> <link rel=apple-touch-icon image_src…


HTML5 ` <link rel=»shortcut icon» /> `

В документе WHATWG для HTML5 говорится, что атрибут rel должен содержать значения, разделенные пробелом, а затем он дает таблицу допустимых значений. Значение атрибута должно быть набором маркеров,…


Поведение <link rel=alternate> в браузерах

Я немного смущен поведением <link rel=alternate …> в браузерах и ищу некоторые разъяснения. Давайте используем следующий код для иллюстрации: <!DOCTYPE html> <html lang=en>…


сопоставление обоих возможных значений rel в a <link>

В настоящее время я анализирую конечные точки webmention со следующим кодом. Это работает либо для <link rel=webmention href= > , либо для <link rel=http://webmention.org/ href= > , но…


Для чего используется LINK rel=subresource?

Для чего используется ссылка rel=subresource ? Какая разница, если я использую link rel=subresource вместо link rel=text/javascript для включения файлов . JS?


Как извлечь значение href из тега rel в Python

…html… <link rel=image_src href=image.jpg /> ….more html…. Как извлечь изображение url с помощью BeautifulSoup в Python


Что делает тег <link rel=»author» ..?

В настоящее время я пытаюсь изучить HTML, и у меня есть вопрос об элементе ссылки: <link rel=author href=URL> . Что делает этот элемент? В моей книге говорится:: установление связи между…


Что лучше <link rel=»prefetch» vs script defer?

Я использовал атрибут defer с тегами скрипта, но только что узнал о <link rel=»prefetch» as=»script»-это вещь, но не могу найти, что лучше или предпочтительнее? И в чем…


Как изменить значение тега link rel

Мой CMS использует <link rel=»prev» href=»/t/119152/page-18″ /> <link rel=»next» href=»/t/119152/page-20″ /> ссылка на предыдущую и следующую…

Что делает тег



В настоящее время я пытаюсь изучить HTML, и у меня есть вопрос об элементе ссылки: <link rel="author" href="URL"> . Что делает этот элемент?

В моей книге говорится::

установление связи между документом и автором (документом).

Но что это значит на самом деле?

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

html link-tag
Поделиться Источник Nier     28 мая 2019 в 14:25

2 ответа

  • почему тег <link> в HTML имеет различные значения атрибутов rel в реальном мире

    Как описывает w3school.com: тег link в HTML5 правил 10 значений для атрибута rel , но я всегда находил много других, используемых на веб-страницах, таких как: <link rel=me type=text/html href=www.example.com/> Для атрибута rel нет значения me , но он все еще широко используется. Почему это…

  • HTML5 ` <link rel=»shortcut icon» /> `

    В документе WHATWG для HTML5 говорится, что атрибут rel должен содержать значения, разделенные пробелом, а затем он дает таблицу допустимых значений. Значение атрибута должно быть набором маркеров, разделенных пробелами. Допустимые ключевые слова и их значения … Список разрешенных ключевых слов…


2

Вы должны помнить, что HTML-это структурированный язык, который предназначен для чтения машинами, а затем используется для визуализации чего-то, что гораздо легче читается людьми. Браузер берет все HTML и затем использует его, чтобы знать, как визуализировать веб-страницу. <link> , <meta> и другие теги в <head> считываются машиной и, хотя они непосредственно не отображаются на то, что видно людям, они все же играют определенную роль в общем опыте.

Тег <link> может быть использован несколькими способами машинной частью, которая читает документ HTML. Например, веб-искатель может прочитать документ и представить вам результаты поиска, если вы ищете конкретного автора. Если бы в документе говорилось, что он был написан Бобом Баркером, и вы искали в Google статьи, написанные Бобом Баркером, то именно так он знал бы, как представить вам этот документ.

Предположим также, что браузер хотел предоставить вам простой способ связаться с автором страницы, самый простой способ узнать, с кем вы должны связаться, — это прочитать этот элемент, поскольку его цель явно (от MDN ):

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

Однако этот тег <link> — лишь один из примеров. Одним из наиболее современных способов выражения метаданных является использование тегов <meta> . Я не совсем в курсе всех способов их использования, но рассмотрим этот пример:

Когда я ищу в Google «html card meta», я получаю в этой статье Основные мета-теги для Social Media в качестве первого результата:

Если вы внимательно посмотрите, то увидите, что рядом со статьей «Jun 20, 2016» стоит дата. Это дата публикации. Единственная причина, по которой Google может разумно распознать это, заключается в теге <meta property="article:published_time" content="2016-06-20T13:18:32+00:00"> в фактическом источнике страницы статьи. В противном случае ему пришлось бы догадываться об этом по другим функциям страницы.

Поделиться zero298     28 мая 2019 в 14:35


0

Использование rel=author указывает на то, что ссылка указывает на информацию об авторе страницы или статьи. Он устанавливает связь между страницей, на которой он находится, и ссылочным документом об авторе.

Чтобы ответить на ваш вопрос непрофессионалом, рассмотрим типичный пример, который выглядит следующим образом <a href="/author-page.html" rel="author">link text</a> приведенный выше код в основном говорит…

Вот ссылка на автора-page. html автор-page.html-это об авторе этого документа.

нажмите «upvote best answer», если вы считаете это полезным

Поделиться RC-AI     28 мая 2019 в 14:52

Похожие вопросы:


Regex чтобы найти тег <link rel=»stylesheet»

Мне нужно найти тег ссылки с помощью Regex. У меня есть эта строка в моем файле html. <link rel=stylesheet href=<c:url value=/styles/folders/masterTree.css /> type=text/css media=screen,…


Должен ли я использовать <meta name=»author» content=»Your Name» /> или <link rel=»author» href=»http://mysite.com/about/» /> ?

В html 5, rel=author используется для ссылки на информацию об авторе страницы. Это может быть адрес mailto: , хотя это и не обязательно. Он может просто ссылаться на контактную форму или страницу…


html <link /> тег истинные обычаи?

его время от времени я вижу теги + данные, такие как : (, кроме css ссылки) <link rel=Home href=/ title=Page d’accueil de Babysun /> <link rel=Index href=/ /> <link rel=Top href=/. ..


почему тег <link> в HTML имеет различные значения атрибутов rel в реальном мире

Как описывает w3school.com: тег link в HTML5 правил 10 значений для атрибута rel , но я всегда находил много других, используемых на веб-страницах, таких как: <link rel=me type=text/html…


HTML5 ` <link rel=»shortcut icon» /> `

В документе WHATWG для HTML5 говорится, что атрибут rel должен содержать значения, разделенные пробелом, а затем он дает таблицу допустимых значений. Значение атрибута должно быть набором маркеров,…


Что такое <link rel=»image_src»>

Сегодня я наткнулся на бирку <link rel=image_src> . Я не знаю об этом, поэтому я использую google. Google говорит мне, что этот тег похож на og:image . Поэтому я пришел на главный сайт open…


Что означает тег rel=»generator» в WordPress?

В теме WordPress, которую я использую, я увидел строку, которая сказала следующее в нижнем колонтитуле: <a href=http://wordpress. org/ rel=generator>Proudly powered by WordPress</a> Что…


web2py вставить <link rel=canonical> в заголовок

В web2py, из представления, как вставить ссылку <link rel=canonical href=…> в заголовок страницы. Я знаю, что могу добавить тег ссылки с rel=stylesheet, используя, например,…


Что делает тег <link rel=»icon» href=»data:,»> ?

Я видел этот тег несколько раз, но не могу найти простого объяснения, которое было бы понятно нам non-professionals.


Как изменить значение тега link rel

Мой CMS использует <link rel=»prev» href=»/t/119152/page-18″ /> <link rel=»next» href=»/t/119152/page-20″ /> ссылка на предыдущую и следующую…

HTML-ссылка Атрибут rel

❮ HTML тег

Пример

Внешняя таблица стилей:

Попробуй сам »

Определение и использование

Требуемый атрибут rel определяет связь между текущим документом и связанным документом / ресурсом.

Поддержка браузера

Атрибут
отн. Есть Есть Есть Есть Есть

Синтаксис

Значения атрибутов

Значение Описание
альтернативный Предоставляет ссылку на альтернативную версию документа (т.е. распечатать страницу, переведенную или зеркально).
Пример:
автор Дает ссылку на автора документа
предварительная выборка dns Указывает, что браузер должен выполнять приоритетное разрешение DNS для источника целевого ресурса.
справка Предоставляет ссылку на справочный документ.Пример:
значок Импортирует значок для представления документа.
Пример:
лицензия Предоставляет ссылку на информацию об авторских правах для документа
следующая Дает ссылку на следующий документ в серии.
пингбэк Предоставляет адрес сервера pingback, который обрабатывает pingback-запросы к текущему документу.
предварительное соединение Указывает, что браузер должен предварительно подключиться к источнику целевого ресурса.
предварительная выборка Указывает, что браузер должен предварительно получить и кэшировать целевой ресурс, поскольку он может потребоваться для последующей навигации.
предварительный натяг Указывает, что агент браузера должен предварительно получить и кэшировать целевой ресурс для текущей навигации в соответствии с пунктом назначения, заданным атрибутом «as» (и приоритетом, связанным с этим пунктом назначения).
предварительная обработка Указывает, что браузер должен предварительно отрисовать (загрузить) указанный веб-страница в фоновом режиме.Итак, если пользователь переходит на эту страницу, он ускоряет увеличить загрузку страницы (потому что страница уже загружена). Предупреждение! Это тратит полосу пропускания пользователя! Используйте пререндер только в том случае, если вы абсолютно уверены что веб-страница требуется на каком-то этапе пути пользователя
предыдущая Указывает, что документ является частью серии, и что предыдущий документ в серии является ссылочным документом
поиск Предоставляет ссылку на ресурс, который можно использовать для поиска в текущем документе и связанных с ним страницах.
таблица стилей Импортирует таблицу стилей
❮ HTML-тег

: элемент ссылки на внешний ресурс — HTML: язык разметки гипертекста

HTML-элемент определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на таблицы стилей, но также используется для установки значков сайта (как значков стиля «favicon», так и значков для домашнего экрана и приложений на мобильных устройствах) среди прочего.

Чтобы связать внешнюю таблицу стилей, вы должны включить элемент в свой следующим образом:

Этот простой пример предоставляет путь к таблице стилей внутри атрибута href и атрибута rel со значением таблица стилей . rel означает «взаимосвязь» и, вероятно, является одной из ключевых особенностей элемента — значение указывает, как элемент, на который делается ссылка, связан с содержащим его документом.Как вы увидите из нашего справочника по типам ссылок, существует много различных видов отношений.

Есть ряд других распространенных типов, с которыми вы столкнетесь. Например, ссылка на фавикон сайта:

Существует ряд других значений значков rel , которые в основном используются для обозначения специальных типов значков для использования на различных мобильных платформах, например:

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

Вы также можете указать тип носителя или запрос внутри атрибута носителя ; этот ресурс будет загружен только в том случае, если условие носителя истинно. Например:

В элемент были добавлены некоторые интересные новые функции производительности и безопасности. Возьмем этот пример:

Значение rel для preload указывает, что браузер должен предварительно загрузить этот ресурс (дополнительные сведения см. В разделе «Предварительная загрузка содержимого с rel =» preload «), при этом атрибут как указывает конкретный класс извлекаемого содержимого.Атрибут crossorigin указывает, следует ли извлекать ресурс с помощью запроса CORS.

Другие примечания по использованию:

  • Элемент может встречаться либо в элементе , либо в элементе , в зависимости от того, имеет ли он тип ссылки body-ok . Например, тип ссылки таблицы стилей является нормальным, поэтому разрешен в теле.Однако это не лучшая практика; имеет смысл отделить элементы от содержимого тела, поместив их в .
  • При использовании для создания значка для сайта, а ваш сайт использует политику безопасности контента (CSP) для повышения своей безопасности, политика применяется к значку. Если вы столкнулись с проблемами, когда значок не загружается, убедитесь, что директива img-src заголовка Content-Security-Policy не препятствует доступу к нему.
  • Спецификации HTML и XHTML определяют обработчики событий для элемента , но неясно, как они будут использоваться.
  • В XHTML 1.0 пустые элементы, такие как , требуют завершающей косой черты: .
  • WebTV поддерживает использование значения следующий для rel для предварительной загрузки следующей страницы в серии документов.

Этот элемент включает глобальные атрибуты.

как
Этот атрибут используется, только если для элемента установлено значение rel = "preload" или rel = "prefetch" .Он определяет тип контента, загружаемого <ссылка> , который необходим для сопоставления запросов, применения правильной политики безопасности контента и установки правильного заголовка запроса Accept . Кроме того, rel = "preload" использует это как сигнал для установления приоритета запроса. В таблице ниже перечислены допустимые значения этого атрибута и элементы или ресурсы, к которым они применяются.
Значение Относится к
аудио элементов
документ