Что значит тег link

Тег link подключает CSS файлы на HTML страницу. Кроме того, link подключает некоторые другие файлы, например, фавикон. (Фавикон — это ярлычок сайта, который виден во вкладке браузера. Его также можно увидеть в некоторых поисковиках при поиске напротив сайтов, например в Яндексе).

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

Как подключить CSS в HTML5: . В более ранних версиях нужно было добавлять атрибут type в значении text/css. В HTML5 так тоже можно делать, но это не обязательно.

Как подключить фавикон: .

Тег link не требует закрывающего тега.

Атрибуты

Атрибут Описание
href Путь к подключаемому файлу.
media Тип устройства, для которого следует подключить файл.
Что имеется ввиду — вы можете подключить CSS файл только для больших экранов (значение screen ) или только для маленьких экранов: для мобильников или планшетов (значение handheld ).
Возможные значения: all, braille, handheld, print, screen, speech, projection, tty, tv. Подробнее смотрите ниже.
rel Тип подключаемого файла. Возможные значения: stylesheet | alternate. Значение stylesheet указывает на то, что подключается CSS файл, значение alternate используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей.
charset Кодировка подключаемого файла. В настоящее время стандартом является utf-8 .
type Тип данных подключаемого файла. Для CSS следует использовать text/css, для фавикона: image/x-icon.
Читайте также:  Что значит если парень трогает попу во время поцелуя

Значения атрибута media

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

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

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

Пример

Давайте посмотрим, как выглядит структура простейшей html страницы, к которой добавим подключение CSS файлов и фавикона:

Источник

Тег link в HTML применяется для ссылки на другие ресурсы, используемые в документе.

Типы ссылок

Существует много типов ресурсов, на которые может ссылаться документ. Это делается с помощью ключевых слов, указанных в атрибуте отношения ( rel ). Они должны использоваться в разделе как метаданные:

  • alternate ;
  • author ;
  • help ;
  • icon ;
  • license ;
  • next ;
  • prefetch ;
  • prev ;
  • search ;
  • stylesheet .

Тег link в HTML размещается в и , хотя чаще он встречается в в качестве метаданных. Тег link может ссылаться на традиционную гиперссылку, используемую для навигации или присоединения к документу внешних ресурсов, таких как CSS и Javascript .

Alternate

Используется для альтернативного представления HTML документа .

В приведенном ниже примере представлены два альтернативных языка для данного документа HTML на английском — французский и испанский языки. Атрибут hreflang используется, чтобы сообщить пользовательскому агенту доступный код страны по стандарту ISO 639-1 :

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

Author

Используется для получения информации об авторе. Как правило, гиперссылка ведет на страницу автора. В данном атрибуте тега может быть указан только один автор:

Если имеется много авторов, связанных с HTML-страницей , нужно применить несколько тегов link HTML :

В завершении можно добавить метатег author :

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

Это значение HTML link rel указывает на иконку страницы. Может быть множество иконок, представляющих страницу. Используется та, которая является наиболее подходящей:

License

Это условия лицензии авторских прав на документ. Можно использовать лицензию на весь сайт или лицензию, имеющую отношение к конкретному документу:

Указывает на следующую страницу в HTML-документе . Для поисковых систем весьма полезно знать, какая страница является следующей:

Prefetch

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

Определяет предыдущую страницу в HTML-документе . Полезно для навигации по страницам:

Определяет документ, который используется для поиска существующего документа. Как правило, это страница со специальной формой для поиска ключевых слов в документе. Для реализации рекомендуется использовать спецификацию OpenSearch :

Stylesheet

HTML link CSS используется для импорта таблицы стилей, используемой для отображения документа. Это делается с помощью каскадных таблиц стилей ( CSS ):

Пожалуйста, оставьте свои комментарии по текущей теме статьи. За комментарии, лайки, дизлайки, отклики, подписки огромное вам спасибо!

Источник

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

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

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

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

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

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

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

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

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

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

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

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

Атрибуты

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

as Этот атрибут используется только для элементов

  • с атрибутом rel=»preload» или rel=»prefetch» . Он указывает тип контента, загружаемого
  • , который необходим для определения приоритетов контента, сравнения запросов, применения корректного content security policy, и установки корректного Accept запрашиваемого заголовка. crossorigin Этот перечисляемый атрибут указывает, должен ли CORS использоваться при загрузки ресурса. CORS-поддерживаемые изображения могут быть повторно использованы в элементе не искажая их. Допустимы значения: 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 можно использовать только для элементов
    с атрибутами rel=»preload» или rel=»prefetch» .

    Примечания:

    • В HTML 4, это может быть только простой, разделённый пробелами, список литералов, описывающих медиа, т.е. media типы и группы, которые определены и допустимы в качестве значений для этого атрибута, такие как print , screen , aural , braille . HTML5 распространил это на любые медиавыражения, которые являются расширенным набором допустимых значений HTML 4.
    • Браузеры, не поддерживающие медиавыражения, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определённым в HTML 4.

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

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

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

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

    Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделённый пробелами и/или запятыми, как определено в RFC 2045. Значение по умолчанию iso-8859-1 .

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

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

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

    Стилизация с CSS

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

    Примеры

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

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

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

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

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

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

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

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

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

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

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

    Источник

  • Оцените статью