Структура head элемента [Модуль 10: Метаданные и head]: Тренажер HTML

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

В этой серии заданий мы разберемся с "мозгом" HTML-документа — элементом `<head>`. Хотя его содержимое не отображается напрямую на веб-странице (кроме заголовка в названии вкладки), оно играет критически важную роль. Именно здесь мы подключаем стили, скрипты, указываем кодировку, добавляем метаданные для поисковиков и задаем фавикон. Проходя эти упражнения, вы научитесь правильно структурировать эту невидимую, но незаменимую часть любой веб-страницы, что необходимо для корректной работы сайта, его оптимизации и хорошего отображения на разных устройствах.

Список тем

Основной контейнер для метаданных

id: 37889_head-structure-01

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

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f9f9f9;
}

h1 {
  font-size: 24px;
  color: #333;
}

                     <!DOCTYPE html>
<html>
  <input1>
    <title>Моя страница</title>
  </input1>
  <body>
    <h1>Привет, мир!</h1>
  </body>
</html>

HTML

<!DOCTYPE html>
<html>
  <input1>
    <title>Моя страница</title>
  </input1>
  <body>
    <h1>Привет, мир!</h1>
  </body>
</html>

Вся метаинформация страницы, такая как заголовок, стили и скрипты, должна находиться внутри тега `<head>`, который располагается сразу после открывающего тега `<html>` и перед тегом `<body>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Заголовок документа

id: 37889_head-title-02

У каждой страницы должен быть заголовок, который отображается во вкладке браузера. Это один из самых важных тегов для SEO и удобства пользователя. Добавьте тег для заголовка документа.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}

p {
  color: #555;
}

                     <head>
  <input1>Мой первый заголовок</input1>
</head>
<body>
  <p>Содержимое страницы...</p>
</body>

HTML

<head>
  <input1>Мой первый заголовок</input1>
</head>
<body>
  <p>Содержимое страницы...</p>
</body>

Чтобы задать заголовок страницы, используйте тег `<title>`. Текст внутри этого тега появится в названии вкладки вашего браузера.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Указание кодировки

id: 37889_head-charset-03

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

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  font-size: 18px;
}

                     <head>
  <title>Кодировка</title>
  <input1 charset="UTF-8">
</head>
<body>
  <p>Правильный текст: Привет!</p>
</body>

HTML

<head>
  <title>Кодировка</title>
  <input1 charset="UTF-8">
</head>
<body>
  <p>Правильный текст: Привет!</p>
</body>

Для указания кодировки используется тег `<meta>` с атрибутом `charset`. Самая распространенная и рекомендуемая кодировка — `UTF-8`. Вся конструкция выглядит так: `<meta charset="UTF-8">`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Атрибут для кодировки

id: 37889_head-charset-attr-04

Мы уже знаем, что для указания кодировки используется тег `<meta>`. Теперь давайте укажем правильный атрибут, который отвечает именно за определение набора символов.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  font-size: 18px;
}

                     <head>
  <title>Атрибут кодировки</title>
  <meta input1="UTF-8">
</head>
<body>
  <p>Проверка кодировки</p>
</body>

HTML

<head>
  <title>Атрибут кодировки</title>
  <meta input1="UTF-8">
</head>
<body>
  <p>Проверка кодировки</p>
</body>

Атрибут, который устанавливает кодировку символов для HTML-документа, называется `charset`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Описание страницы для SEO

id: 37889_head-description-05

Поисковые системы используют описание страницы для формирования сниппета в результатах поиска. Это описание задается с помощью тега `<meta>`. Заполните пропущенные атрибуты.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}

p {
  color: #777;
  font-style: italic;
}

                     <head>
  <title>SEO Описание</title>
  <meta input1="description" input2="Это краткое и понятное описание моей веб-страницы.">
</head>
<body>
  <p>Эта информация видна только поисковым роботам.</p>
</body>

HTML

<head>
  <title>SEO Описание</title>
  <meta input1="description" input2="Это краткое и понятное описание моей веб-страницы.">
</head>
<body>
  <p>Эта информация видна только поисковым роботам.</p>
</body>

Для создания описания страницы используется тег `<meta>` с парой атрибутов: `name="description"` и `content="Ваше описание"`. Атрибут `name` указывает тип метаданных, а `content` — их значение.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Адаптивность для мобильных устройств

id: 37889_head-viewport-06

Чтобы ваш сайт корректно отображался на смартфонах и планшетах, нужно добавить важный мета-тег `viewport`. Укажите правильное значение для атрибута `name`.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  background: #eef;
}

div {
  width: 100%;
  max-width: 340px;
  padding: 10px;
  background: white;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

                     <head>
  <title>Адаптивность</title>
  <meta name="input1" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div>Этот блок займет всю ширину экрана на мобильном устройстве.</div>
</body>

HTML

<head>
  <title>Адаптивность</title>
  <meta name="input1" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div>Этот блок займет всю ширину экрана на мобильном устройстве.</div>
</body>

Чтобы управлять областью просмотра на мобильных устройствах, используется мета-тег с `name="viewport"`. Это говорит браузеру, как контролировать размеры и масштабирование страницы.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

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

id: 37889_head-link-css-07

Внешние таблицы стилей (CSS) подключаются в `<head>`. Для этого используется специальный тег. Добавьте тег для подключения файла `style.css`.

CSS

/* Этот CSS код будет применен, когда вы правильно подключите его в HTML */
body {
  background-color: lightblue;
}
h1 {
  color: navy;
  text-align: center;
}

                     <head>
  <title>Подключение стилей</title>
  <input1 rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Страница со стилями</h1>
</body>

HTML

<head>
  <title>Подключение стилей</title>
  <input1 rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Страница со стилями</h1>
</body>

Для подключения внешних ресурсов, таких как CSS-файлы или иконки, используется одиночный тег `<link>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Атрибуты для подключения CSS

id: 37889_head-link-css-attrs-08

При подключении CSS-файла с помощью тега `<link>` необходимо указать два ключевых атрибута: один определяет тип связи, а другой — путь к файлу. Заполните пропуски.

CSS

body {
  background-color: #fff0f5;
}
p {
  color: #c71585;
  border: 1px dashed #c71585;
  padding: 10px;
}

                     <head>
  <title>Атрибуты Link</title>
  <link input1="stylesheet" input2="style.css">
</head>
<body>
  <p>Стили применились!</p>
</body>

HTML

<head>
  <title>Атрибуты Link</title>
  <link input1="stylesheet" input2="style.css">
</head>
<body>
  <p>Стили применились!</p>
</body>

Первый атрибут — `rel` (от relationship — отношение), ему нужно задать значение `stylesheet` (таблица стилей). Второй атрибут — `href` (hypertext reference), он указывает URL-адрес файла.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Добавление иконки сайта (Favicon)

id: 37889_head-favicon-09

Чтобы во вкладке браузера рядом с заголовком появилась иконка вашего сайта (favicon), нужно использовать тег `<link>`. Укажите правильное значение для атрибута `rel`.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  background: #f0fff0;
}

p {
  font-size: 16px;
}

                     <head>
  <title>Иконка сайта</title>
  <link input1="icon" type="image/svg+xml" href="https://naytikurs.ru/img/11s.svg">
</head>
<body>
  <p>Посмотрите на вкладку браузера, там должна появиться иконка.</p>
</body>

HTML

<head>
  <title>Иконка сайта</title>
  <link input1="icon" type="image/svg+xml" href="https://naytikurs.ru/img/11s.svg">
</head>
<body>
  <p>Посмотрите на вкладку браузера, там должна появиться иконка.</p>
</body>

Для указания иконки сайта в атрибуте `rel` тега `<link>` обычно используют значение `icon`. Также исторически использовалось `shortcut icon`, и многие браузеры его по-прежнему понимают.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Внутренние стили

id: 37889_head-style-tag-10

Иногда небольшие фрагменты CSS-кода удобнее размещать прямо в HTML-документе, а не в отдельном файле. Для этого в `<head>` существует специальный тег. Добавьте его.

CSS

                     <head>
  <title>Внутренние стили</title>
  <input1>
    body {
      background-color: #333;
    }
    h1 {
      color: white;
    }
  </input1>
</head>
<body>
  <h1>Текст на тёмном фоне</h1>
</body>

HTML

<head>
  <title>Внутренние стили</title>
  <input1>
    body {
      background-color: #333;
    }
    h1 {
      color: white;
    }
  </input1>
</head>
<body>
  <h1>Текст на тёмном фоне</h1>
</body>

Чтобы написать CSS-правила прямо внутри HTML-документа, используется парный тег `<style>`. Весь CSS-код помещается между открывающим и закрывающим тегами.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Подключение JavaScript

id: 37889_head-script-tag-11

JavaScript-файлы также подключаются в `<head>`. Для этого используется специальный тег, который указывает на источник скрипта. Вставьте пропущенный тег и атрибут пути к файлу.

CSS

body { font-family: sans-serif; padding: 15px; }

                     <head>
  <title>Скрипты</title>
  <input1 input2="script.js"></input1>
</head>
<body>
  <p>Скрипт будет загружен, но его работу мы здесь не увидим.</p>
</body>

HTML

<head>
  <title>Скрипты</title>
  <input1 input2="script.js"></input1>
</head>
<body>
  <p>Скрипт будет загружен, но его работу мы здесь не увидим.</p>
</body>

Для подключения JavaScript используется тег `<script>`. Атрибут, указывающий путь к файлу, — это `src` (от source — источник).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Базовый URL для относительных ссылок

id: 37889_head-base-url-12

Представьте, что все относительные ссылки на странице (например, на картинки) должны вести в одну и ту же папку. Чтобы не прописывать путь каждый раз, можно задать базовый URL для всего документа. Используйте для этого соответствующий тег.

CSS

body { font-family: sans-serif; padding: 15px; }
img { max-width: 100%; border: 2px solid #ccc; }

                     <head>
  <title>Базовый URL</title>
  <input1 href="https://naytikurs.ru/img/">
</head>
<body>
  <p>Картинка ниже загружается по относительной ссылке '1.png', но благодаря базовому URL браузер ищет её по полному пути.</p>
  <img src="1.png" alt="Пример картинки">
</body>

HTML

<head>
  <title>Базовый URL</title>
  <input1 href="https://naytikurs.ru/img/">
</head>
<body>
  <p>Картинка ниже загружается по относительной ссылке '1.png', но благодаря базовому URL браузер ищет её по полному пути.</p>
  <img src="1.png" alt="Пример картинки">
</body>

Тег `<base>` позволяет задать базовый URL для всех относительных ссылок на странице. Он имеет атрибут `href`, в котором и указывается этот базовый адрес. Это одиночный тег.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку