HTML :: Тег <link>

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

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

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

HTML

htmlCodes

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">	
  <title>Элемент «link»</title>

  <!-- Привязываем к нашей странице две таблицы стилей -->
  <link href="https://site.name/css/style_1.css" type="text/css" rel="stylesheet">
  <link href="https://site.name/css/style_2.css" rel="stylesheet" type="text/css">
	
</head>
<body>
  <!-- Применяем к абзацам классы из подключенных таблицы стилей -->
  <p class="orange_paragraph">
	К данному абацу применяется класс, который по логике, <br>
	должен находиться в одной из подключенных таблиц стилей.
  </p>

  <p class="mainFont">
	При разработке большого проекта (сайта) <br>
	таблиц стилей может быть много. По мере необходимости <br>
	они подключаются то к одной, то к другой странице.
  </p>

</body>
</html>

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

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

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

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

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

HTML

htmlCodes

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">	
  <title>Элемент «link» и его атрибут media</title>
  
  <!-- Зададим базовый адрес -->
  <base href="https://site.name/">
  
  <!-- Эта таблица будет использоваться всегда, пока не  -->
  <!-- будет переопределена нижними таблицами   -->
  <link href="css/style_1.css" media="all" type="text/css" rel="stylesheet">
  
  <!-- Если смартфон, то будет использоваться style_2.css -->
  <link href="css/style_2.css" media="handheld" rel="stylesheet" type="text/css">
  
  <!-- Если принтер, то будет использоваться style_3.css -->
  <link href="css/style_3.css" media="print" rel="stylesheet" type="text/css">
 	
</head>
<body>
  Тут расположена выводимая информация.
</body>
</html>

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

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

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

HTML :: Тег <link>

Быстрый переход к другим страницам