×
А Б В Г Д Е Ё Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 0-9
С

Служебные теги

Служебные теги — это элементы языка HTML, формирующие структуру документа (страницы). Они хранят различные скрипты, стили и метаданные, которые необходимы для поисковых роботов и браузеров.

К служебным тегам относят:

  • html;
  • head;
  • title;
  • meta;
  • style;
  • body;
  • script.

Тег html

1.png

Элемент html — это первый служебный тег, который пишет разработчик, создавая HTML-документ. Между открывающим и закрывающим тегами располагается вся информация о веб-странице.

Открывающий тег всегда стоит вторым после элемента, устанавливающего тип документа !DOCTYPE, и может содержать внутри себя атрибуты title, manifest, xmlns.

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

Между открывающим html и закрывающим /html находятся теги head и body, которые отвечают за техническую и видимую информацию страницы соответственно.

Тег head

2.png

Элемент head — это служебный тег, который содержит в себе всю техническую информацию о веб-странице, а также задает ее заголовок. Эта информация не видна обычному пользователю (кроме title — заголовка окна веб-страницы), но помогает браузерам и поисковым системам работать с данными страницы.

Данная область пишется первой и является неким контейнером для метаданных html-документа. В ней могут содержаться такие элементы, как title, base, meta, link, style.

Внутри открывающего head может содержаться атрибут profile, который задает адрес профиля метаданных.

Тег title

3.png

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

Данный тег пишется один раз и располагается в контейнере head. Его написание обязательно, так как браузер не может самостоятельно определить заголовок.

Тег meta

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

Элемент meta не имеет закрывающего тега. Он располагается в контейнере head и может содержать внутри себя несколько атрибутов одновременно:

  • charset. Указывает кодировку документа (страницы). Например, utf-8;

4.png

  • http-equiv. Данный атрибут формирует http-заголовок и определяет действия браузера. Название заголовка указывается в самом атрибуте http-equiv, а его значение — в атрибуте content. Примеры значений — content-security-policy (задает правила и политику сайта, защищает от атак с внедрением контента и т. д.), content-type (кодировка для документа), default-style (предпочитаемые стили), refresh (интервал обновления страницы в секундах);

5.png

  • name. Задает тип метатега. Используется в паре «имя=значение». Примеры значений — author (имя автора), description (описание веб-страницы), keywords (ключевые слова). Недопустимо одновременное использование name и http-equiv;

6.png

  • content. Устанавливает значение атрибутов name и http-equiv. Атрибут content может содержать не одно, а несколько значений, указанных через запятую или точку с запятой.

7.png

Тег style

8.png

Служебный тег style определяет стили элементов страницы. Например, стиль H1 (его размер, шрифт, цвет). Задается данный тег в контейнере head и может применяться неоднократно (для разных элементов).

Задав стиль в head, браузер использует его в body к соответствующему элементу.

Атрибуты:

  • media — позволяет определить устройство вывода, для которого задана таблица стилей. Для каждого устройства можно задать свой стиль;
  • type — задает синтаксис, который необходимо использовать для верной интерпретации таблиц стилей. По умолчанию значение равно «text/css».

Тег body

9.png

Элемент body — это служебный тег, содержащий в себе все данные, которые отображаются на веб-странице (текст, медиафайлы, таблицы и т. д.). Иными словами, body отвечает за отображение контента документа.

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

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

Атрибуты:

  • alink — цвет активных ссылок;
  • background — фон страницы (изображение, картинка, видео);
  • bgcolor — цвет фона (если это простая заливка);
  • bgproperties — свойства фона (прокручиваться вместе с контентом, оставаться неподвижным, прокручиваться в режиме Paralax и т. д.);
  • bottommargin, topmargin, rightmargin, leftmargin — отступы от соответствующих краев страницы до контента;
  • link — цвет ссылок;
  • scroll — отображение полос прокрутки;
  • text — цвет текста на странице;
  • vlink — цвет нажатых ссылок.

Кроме вышеописанных атрибутов в служебном теге body можно также использовать универсальные атрибуты и события.

Тег script

10.png

Элемент script — служебный тег, предназначенный для описания скриптов. Он может содержать в себе ссылку на саму программу или ее текст, написанный на другом языке. Данный тег позволяет HTML-документам работать с программами, написанными на языке JavaScript и др.

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

Атрибуты для тега script:

  • async — позволяет загружать скрипт асинхронно;
  • defer — не дает скрипту начать работу до тех пор, пока страница не будет загружена полностью;
  • language — указывает язык программирования скрипта;
  • src — адрес внешнего файла;
  • type — определяет тип содержимого тега script.

Служебный тег script можно располагать в любом месте документа (как в контейнере head, так и в контейнере body).




Похожие темы: нет

Синонимы: нет
Все термины на букву «С»
Все термины в глоссарии

Отправьте отзыв!