ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML5. Уроки для начинающих

En Ua

HTML - Элемент Head


HTML элемент <head> - это контейнер для следующих элементов: <title>, <style>, <meta>, <link>, <script> и <base>.


HTML элемент <head>

Элемент <head> является контейнером для метаданных (данных о данных) и помещается между тегами <html> и <body>.

Метаданные HTML - это данные о документе HTML. Метаданные не отображаются на веб-странице.

Метаданные обычно определяют заголовок документа (title), набор символов (utf-8), стили (style), скрипты (script) и другую метаинформацию.


HTML элемент <title>

Элемент <title> определяет заголовок документа. Заголовок должен состоять только из текста и отображаться в строке заголовка браузера или на вкладке веб-страницы.

Тег <title> является обязательным в HTML документе - согласно спецификации HTML5!

Содержание заголовка страницы очень важно для поисковой оптимизации (SEO)! Заголовок страницы используется алгоритмами поисковой системы для определения порядка при перечислении страниц в результатах поиска. Именно по заголовку поисковики чаще всего определяют информацию о содержимом веб-страницы.

Элемент <title>:

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

Таким образом, постарайтесь сделать заголовок максимально точным и значимым!

Простой HTML документ:

Пример

<!DOCTYPE html>
<html>
<head>
  <title>Значимый заголовок страницы</title>
</head>
<body>

Содержание документа......

</body>
</html>
Попробуйте сами »

HTML элемент <style>

Элемент <style> используется для определения информации о стиле для одной HTML-страницы:

Пример

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>
Попробуйте сами »

HTML элемент <link>

Элемент <link> определяет отношения между текущим документом и внешним ресурсом.

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

Пример

<link rel="stylesheet" href="mystyle.css">
Попробуйте сами »

Примечание: Чтобы узнать больше о CSS, посетите CSS Учебник на нашем сайте W3Schools.


HTML элемент <meta>

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

Метаданные не будут отображаться на странице, но используются браузерами (как отображать контент или перезагружать страницу), поисковыми системами (ключевые слова) и другими веб-службами.

Примеры

Определяет используемый набор символов:

<meta charset="UTF-8">

Определяет ключевые слова для поисковых систем:

<meta name="keywords" content="HTML, CSS, JavaScript">

Определяет описание веб-страницы:

<meta name="description" content="Free Web tutorials">

Определяет автора веб-страницы:

<meta name="author" content="John Doe">

Обновляет документ каждые 30 секунд:

<meta http-equiv="refresh" content="30">

Настройка области просмотра, чтобы сайт выглядел хорошо на всех устройствах:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Пример <meta> тегов:

Пример

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
Попробуйте сами »

Настройка области просмотра

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

Необходимо включить следующий элемент <meta> на все веб-страницы:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Это дает браузеру инструкции о том, как контролировать размеры и масштаб веб-страницы.

Часть width=device-width задает ширину страницы, соответствующую ширине экрана устройства (которая будет зависеть от устройства).

Часть initial-scale=1.0 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

Это пример веб-страницы без метатега viewport, и той же веб-страницы из метатегом viewport:

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



HTML элемент <script>

Элемент <script> используется для определения клиентского JavaScript.

Следующий JavaScript-код пишет "Hello JavaScript!" в HTML элементе с id="demo":

Пример

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Попробуйте сами »

Примечание: Чтобы узнать больше о JavaScript, посетите JavaScript Учебник на нашем сайте W3Schools на русском.


HTML элемент <base>

Элемент <base> определяет базовый URL-адрес и/или цель для всех относительных URL-адресов на странице.

Тег <base> должен иметь либо атрибут href, либо атрибут target, либо оба.

В документе может быть только один элемент <base>!

Пример

Укажите URL-адрес по умолчанию и цель по умолчанию для всех ссылок на странице:

<head>
<base href="https://w3schoolsrus.github.io/" target="_blank">
</head>

<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.html">HTML base Tag</a>
</body>
Попробуйте сами »

Резюме

  • Элемент <head> - контейнер для метаданных (данных о данных)
  • Элемент <head> помещается между тегом <html> и тегом <body>
  • Элемент <title> является обязательным и определяет заголовок документа
  • Элемент <style> используется для определения информации о стиле для одного документа
  • Тег <link> чаще всего используется для ссылки на внешние таблицы стилей
  • Элемент <meta> обычно используется для указания набора символов, описания страницы, ключевых слов, автора документа и настроек области просмотра
  • Элемент <script> используется для определения клиентского JavaScript
  • Элемент <base> определяет базовый URL-адрес и/или цель для всех относительных URL-адресов на странице

HTML элементы head

Тег Описание
<head> Определяет информацию о документе
<title> Определяет заголовок документа
<base> Определяет адрес по умолчанию или цель по умолчанию для всех ссылок на странице
<link> Определяет связь между документом и внешним ресурсом
<meta> Определяет метаданные об HTML-документе
<script> Определяет скрипт на стороне клиента
<style> Определяет информацию о стиле для документа

Для получения полного списка всех доступных тегов HTML посетите HTML Справочник тегов на нашем сайте W3Schools на русском.