HTML тег link


Оглавление (нажмите, чтобы открыть):

HTML: тег link

Тег используется для создания ссылки связывающей текущую HTML-страницу и какой-либо документ в интернете. По сути, это означает, что документ, находящийся по адресу указанному в ссылке, будет найден и загружен браузером вместе с HTML-страницей, а затем использован им по назначению. Например, при помощи тега
можно подключить внешнюю таблицу стилей (CSS), иконку сайта, ну, или дополнительные шрифты, нужные для правильного отображения страницы и т.д.

Ссылки могут быть относительными и абсолютными. Относительные ссылки — ссылки относительно текущей страницы или корня сайта (используют относительные URL). Работают только в пределах текущего сайта. Абсолютные ссылки — включают URL с полным адресом документа и действуют везде, где указана ссылка: на любом сайте, на локальном компьютере.

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

Атрибуты

  • href — Задает адрес загружаемого документа.
  • media — Показывает для какого типа устройства предназначен подключаемый файл с таблицей стилей.
  • rel — Указывает вид прямой взаимосвязи между текущим документом и документом указанным в href .
  • type — Определяет к какому MIME-типу данных относится загружаемый документ.
  • accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
  • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри HTML-элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • tabindex — устанавливает порядок табуляции между элементами (клавиша Tab ).
  • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Модель тега: может располагаться только в «шапке» документа, внутри элемента , в любом количестве.

Может содержать: данный элемент является пустым/Empty.

Открывающий тег: необходим. Закрывающий тег: запрещен.

HTML :: Тег

Как мы уже знаем, HTML отвечает за логическую разметку веб-документа. За внешний вид отвечают каскадные таблицы стилей, а за функциональность – JavaScript . Но ведь и таблицы, и скрипты в большинстве случаев находятся в отдельных файлах. Соответственно возникает необходимость каким-то образом сообщать браузеру, что при формировании и отображении веб-страницы он должен использовать данные, расположенные за пределами документа, т.е. во внешних файлах. Одним из элементов, служащих для этих целей, является пустой элемент ‘link’ , формирующийся одиночным тегом (от англ. link – ссылка). Он как раз и устанавливает связь с внешними файлами, содержащими, например, необходимые стили CSS или другие данные.

Путь к требуемому файлу задается в качестве значения атрибута href элемента ‘link’ . Это может быть как абсолютный (полный), так и относительный адрес документа. Однако не стоит забывать, что ‘link’ , в отличие от гиперссылки ‘a’, находится в заголовке документа ‘head’ и является служебным элементом. Следовательно, его содержимое предназначено только для браузера и на странице не отображается.

Чтобы браузер понимал с каким типом данных в подключаемом внешнем файле он будет иметь дело, в элементе ‘link’ необходимо указывать атрибут rel (от англ. relation), который в качестве значения принимает тип подключаемых данных. Нас будет интересовать только значение «stylesheet» , соответствующее каскадным таблицам стилей. Использование элемента ‘link’ показано в примере №1.


Пример №1. Использование элемента ‘link’

Обычно при разработке объемных сайтов классы CSS объединяются в группы, которые размещаются в отдельных файлах с расширением .css . В дальнейшем, по мере необходимости, эти файлы подключаются к страницам при помощи элементов ‘link’ . В нашем примере было использовано две ссылки на таблицы стилей, но разрешается использовать столько элементов ‘link’, сколько потребуется.

В элементе ‘link’ используется еще один важный атрибут media . В качестве значения он принимает допустимый медиа-запрос или тип устройства, для которого будет применяться подключаемая таблица стилей. Перечислим возможные значения атрибута типов устройств:

  • «all» – все устройства (применяется по умолчанию);
  • «braille» – устройства, использующиеся слепыми людьми (основаны на системе Брайля);
  • «embossed» – принтеры, использующие для печати систему Брайля;
  • «handheld» – смартфоны, планшеты и другие устройства с малой шириной экрана;
  • «print» – принтер (так будет выглядеть страница на бумаге);
  • «screen» – экран монитора;
  • «speech» – речевые браузеры;
  • «projection» – проектор;
  • «tty» – терминалы и другие портативные устройства с ограниченными возможностями экрана;
  • «tv» – телевизор.

Рассмотрим пример №2 кода, который даст наглядное представление о возможностях атрибута media .

Пример №2. Использование атрибута ‘media’ элемента ‘link’

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

Также в элементе ‘link’ могут использоваться атрибуты type , hreflang , sizes и crossorigin , подробнее о которых можно узнать в нашем справочнике здесь.

Ссылка в html. Работа с тегами a и link

Ссылки html — это некие конструкции которые определяются тегами a , area , link и предоставляют связь между двумя ресурсами, одним из которых является документ на котором размещена ссылка.

Различают два типа ссылок в html:

Ссылки на внешние ресурсы

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

Гиперссылки

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

Ссылка в html элемент

Чтобы создать гиперссылку мы должны использовать тег a этот тег является парным и выглядит следующим образом.


Атрибут href

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

Различают несколько видов путей:

Относительный — путь к странице указывается относительно текущего документа или сайта. К примеру если файлы или картинки находятся в одной папке или соседних нет необходимости в указании домена (имени сайта). Ниже пример.

Абсолютный — наоборот указывает полный путь к странице. Такая страница может находится на другом сервере и относится к другому сайту. Обязательно указывать домен сайта.

Якорь — ссылка на html элемент, с помощью данного типа пути мы можем осуществлять навигацию по странице на которой находимся.

Очень часто это используется для создания оглавления по статье, и возврата на начало страницы. Урлом выступает id элемента и перед ним ставится знак решетки.

Атрибут title

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

Атрибут target

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

_blank — открывает ссылку html в новом окне
_self — открывает в текущем окне

Атрибут rel

Определяет отношение между текущим и связанным документом. Ниже приведены основные значения атрибута.

rchives — Указывает на архив страниц или записей на сайте.
author — Указывает на страницу об авторе.
bookmark — Указывает на категории или записи.
first — Ссылка указывает на первую страницу сайта.
help — Указывает на страницу помощи.
index — Ссылка на содержание.
last — Ссылка указывает на последнюю страницу сайта.
license — Указывает на страницу с лицензией или с информацией об авторских правах.
me — Указывает на страницу автора статьи на другом сайте.
next — Указывает на следующую страницу или категорию.
nofollow — Запрещает поисковым роботам передавать вес по ссылке.
prev — Указывает на предыдущую страницу или категорию.
search — Ссылка на поиск.
sidebar — Добавить ссылку в избранное браузера.
up — Указывает что ссылка ведет на родительскую страницу.

HTML: тег link

Ссылаемся на внешнюю таблицу стилей:

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


Тег
определяет взаимоотношение между документом и внешним источником.

Тег
чаще всего используют для ссылки на внешнюю таблицу стилей.

Разница между HTML и XHTML

В HTML тег
не имеет закрывающего тега.

В XHTML тег
должен быть правильно закрыт.

Советы и примечания

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

HTML тег link

Тег определяет ссылку на внешний ресурс. Наиболее часто этот тег используется для подключения файла стилей CSS к документу HTML.

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

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

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

Разница между HTML 4.01 и HTML5

Некоторые атрибуты, допустимые в HTML 4.01, не поддерживаются в HTML5.


В HTML5 был добавлен атрибут sizes.

В HTML тег — одиночный элемент без закрывающего тега. В XHTML тег необходимо закрывать должным образом, а именно — .

Атрибут Описание
charset Определяет кодировку символов подключаемого документа
href Определяет URL подключаемого внешнего ресурса
hreflang Определяет язык подключаемого внешнего документа
media Определяет устройства вывода, для которых оптимизирован внешний ресурс
rel Определяет отношение между текущим и подключаемым внешним документом/ресурсом
rev Определяет отношение с подключаемым документом/ресурсом
sizes Определяет размер иконки
target Определяет, куда будет загружаться подключаемый документ
type Определяет медиа-тип подключаемого документа

Общие атрибуты

HTML пример

Подключение внешнего файла стилей:

CSS стили по умолчанию

Большинство браузеров будут отображать тег
со следующими стилями

Тег link

Тег (с англ. ссылка) устанавливает связь с внешними документами, чаще всего с таблицами стилей.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис
Атрибуты
charset определяет набор символов, используемый браузером для отображения страницы, на которую оказывает ссылка
class определяет имя используемого класса
dir определяет направление символов:

  • ltr — слева направо
  • rtl — справа налево
disabled флаг. Определяет элемент как неактивный.
Отсутствует в спецификации HTML 4.01!
href URL подсоединяемого файла
hreflang определяет используемый язык в документе, на который указывает ссылка
id уникальный индетификатор
lang определяет язык отображаемого документа
media усторойство, для которого применяется стиль оформления

  • all — все устройства
  • braille — устройства для слепых на основе системы Брайля
  • screen — экран (по умолчанию)
  • print — устройство печати
  • projection — проектор
  • speech — синтезатор голоса
onclick щелчек на элементе
ondblclick двойной щелчек на элементе
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
rel тип взаимосвязи текущего документа и подключаемого

  • stylesheet — указывает на файл, содержащий таблицу стилей (CSS) для текущего документа
  • home — указывает на заглавную страницу сайта
  • toc, contents — указывают на файл, содержащий оглавление документа
  • index — указывает на файл, содержащий информацию для индексного поиска по текущему документу
  • glossary — указывает на файл, содержащий перечень терминов, относящихся к текущему документу
  • copyright — указывает на страницу сайта, в которой говорится об авторских правах
  • child — указывает на «дочернюю» страницу
  • next — указывает на следующую страницу в последовательности документов
  • previous — указывает на предыдущую страницу в последовательности документов
  • last, end — указывает на последнюю страницу в последовательности документов
  • first — указывает на первую страницу в последовательности документов
  • help — указывает на страницу с подсказкой
rev определяем обратную связь целевого документа к текущему
style задает встроенную таблицу стилей
target имя окна или фрейма. В качестве аргумента используется имя окна или фрейма.
Зарезервированные имена:

  • _blank — откроет документ в новом окне
  • _parent — откроет документ во фрейме-родителе. Если такого нет, откроет в текущем окне.
  • _top — отменяет все фреймы и загружает страницу в полном окне браузера, если фремов нет, откроет в текущем окне
  • _self — откроет в текущем окне (по умолчанию)
title всплывающая подсказка
type MIME-тип объекта, указанного в параметре href
Пример

Подключаем файл стилей

Рекомендации по использованию
  • должен закрываться слешем (
  • )
  • должен располагается в секции
  • обязательных атрибутов нет

Тег


может использоваться для предоставления дополнительной информации о документе, такой как:

HTML: тег link

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

Синтаксис

HTML
XHTML

Атрибуты

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

Пример. Использование тега

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

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

Спецификация Статус
WHATWG HTML Living Standard Живой стандарт
HTML5 Рекомендация
HTML 4.01 Specification Рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML ( Living ) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.


Браузеры: Настольные Мобильные ?

Internet Explorer Chrome Opera Safari Firefox
3 1 4 1 1
Android Firefox Mobile Opera Mobile Safari Mobile
1 1 6 1

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

HTML: тег link

Тег — элемент языка html, устанавливающий связь между web-страницей и внешним документом (такими как файл со стилями CSS или со шрифтами). Элемент
используется в заголовке страницы, то есть внутри элемента .

charset . . Кодировка связываемого документа.

href . Путь к связываемому файлу.

media . . Определяет устройство, для которого следует применять стилевое оформление.

rel . Определяет отношения между текущим документом и файлом, на который делается ссылка.

sizes . Указывает размер иконок для визуального отображения.

type . MIME-тип данных подключаемого файла.

Ссылка в html. Работа с тегами a и link


Ссылки html — это некие конструкции которые определяются тегами a , area , link и предоставляют связь между двумя ресурсами, одним из которых является документ на котором размещена ссылка.

Различают два типа ссылок в html:

Ссылки на внешние ресурсы

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

Гиперссылки

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

Ссылка в html элемент

Чтобы создать гиперссылку мы должны использовать тег a этот тег является парным и выглядит следующим образом.

Атрибут href

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

Различают несколько видов путей:

Относительный — путь к странице указывается относительно текущего документа или сайта. К примеру если файлы или картинки находятся в одной папке или соседних нет необходимости в указании домена (имени сайта). Ниже пример.

Абсолютный — наоборот указывает полный путь к странице. Такая страница может находится на другом сервере и относится к другому сайту. Обязательно указывать домен сайта.

Якорь — ссылка на html элемент, с помощью данного типа пути мы можем осуществлять навигацию по странице на которой находимся.

Очень часто это используется для создания оглавления по статье, и возврата на начало страницы. Урлом выступает id элемента и перед ним ставится знак решетки.

Атрибут title

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

Атрибут target


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

_blank — открывает ссылку html в новом окне
_self — открывает в текущем окне

Атрибут rel

Определяет отношение между текущим и связанным документом. Ниже приведены основные значения атрибута.

rchives — Указывает на архив страниц или записей на сайте.
author — Указывает на страницу об авторе.
bookmark — Указывает на категории или записи.
first — Ссылка указывает на первую страницу сайта.
help — Указывает на страницу помощи.
index — Ссылка на содержание.
last — Ссылка указывает на последнюю страницу сайта.
license — Указывает на страницу с лицензией или с информацией об авторских правах.
me — Указывает на страницу автора статьи на другом сайте.
next — Указывает на следующую страницу или категорию.
nofollow — Запрещает поисковым роботам передавать вес по ссылке.
prev — Указывает на предыдущую страницу или категорию.
search — Ссылка на поиск.
sidebar — Добавить ссылку в избранное браузера.
up — Указывает что ссылка ведет на родительскую страницу.

HTML: тег link

Ссылаемся на внешнюю таблицу стилей:

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

Тег
определяет взаимоотношение между документом и внешним источником.

Тег
чаще всего используют для ссылки на внешнюю таблицу стилей.

Разница между HTML и XHTML

В HTML тег
не имеет закрывающего тега.

В XHTML тег
должен быть правильно закрыт.

Советы и примечания

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

Добавить комментарий