Тег <link>

Связи с ресурсами
  • Категории: Мета-содержимое, Потоковое содержимое, Фразовое содержимое
  • Контекст:

    В секции <head>, а также в теле документа, где ожидается фразовое содержимое.

  • Модель:

    Без содержимого.

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

Каждый элемент link должен иметь обязательный атрибут href с адресом связанного ресурса, а также rel с указанием предназначения ссылки:

  • alternate - альтернативная версия документа
  • author - дополнительная информация об авторе
  • help - дополнительная справочная информация
  • icon - favicon (иконка во вкладке браузера)
  • license - лицензия данного документа
  • next - следующий документ в серии
  • prefetch - предварительная подгрузка
  • prev - предыдущий документ в серии
  • search - страница поиска
  • stylesheet - каскадная таблица стилей

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

Атрибуты

  • Глобальные атрибуты

  • Подключение CSS-файлов

    Чаще всего тег <link> используется, чтобы связать текущий документ с каскадной таблицей стилей. Таким образом прописанные в CSS-файле стили применяются к текущему документу и его элементам.

  • Перевод документа

    Значение alternate позволяет указать ссылки на альтернативные версии документа, например, на его переводы на другие языки. Для указания языка используется атрибут hreflang.

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

  • Альтернативный формат документа

    Второй вариант использования alternate - совместно с атрибутом type, для указания ссылки на версию данного документа в другом формате.

    В примере мы указываем ссылку на PDF-версию текущего документа. Некоторые программы и устройства для чтения предпочитают PDF-версии обычным сайтам и могут предложить пользователю открыть данную ссылку.

    Кроме того мы указываем ссылки на XML-представления страницы для Atom и RSS-каналов.

  • Серия документов

    Значения prev и next работают аналогично и позволяют задать ссылки на предыдущий и следующий документ серии. Также укажем значение prefetch для следующего документа, чтобы браузер постарался подгрузить его в кеш заранее.

  • Автор документа

    Значение author указывает ссылку на дополнительную информацию об авторе текущей страницы - ссылка на его профиль, либо его email через mailto:.

  • Дополнительные страницы

    Рассмотрим ряд значений, которые позволяют задать ссылки на дополняющие ресурсы:

    • help - ссылка на документ со справочной информацией о текущей странице
    • license - ссылка на лицензию, которой защищен страница
    • search - ссылка на интерфейс поиска по текущему документу и связанными с ним ресурсам.

  • favicon

    Значение favicon позволяет установить ссылку на favicon-изображение, которое будет использоваться браузером на вкладке страницы, при добавлении ее в избранное и т.д. Поисковые системы также отображают данный favicon в результатах выдачи рядом с названием сайта.

    Можно одновременно задать несколько иконок, браузер автоматически выберет наиболее подходящий файл, либо последний указанный. Чтобы помочь ему с выбором, мы можем использовать атрибут size с указанием размера каждой иконки в формате ширина x высота. Если вы используете масштабируемое изображение, например, SVG, то размер можно указать ключевым словом any.

    Помимо этого мы можем указать тип изображения, используя атрибут type.

Поделитесь данной записью с друзьями