Загрузка...

Элемент head в HTML

Предыдущая сессия была посвящена одному дочернему элементу головы документа: title. Теперь отойдём назад к самому элементу head — контейнеру, который хранит метаданные страницы для браузеров, поисковых инструментов и связанных ресурсов. Посетители не читают head так, как читают историю в основной области. Они ощущают его эффекты через подпись вкладки, корректные символы, масштабирование на мобильных и таблицы стилей, которые загружаются до отрисовки содержимого body.

Для чего нужен head

<head>...</head> находится внутри <html>, обычно сразу после открывающего тега html и перед <body>. Это «пульт управления» документа для метаданных и ссылок на ресурсы. Это не видимый баннер. Видимый баннер страницы, который вы позже можете собрать с помощью элемента <header>, — другой тег с другой задачей.

Прямой ответ

Размещайте метаданные в <head>...</head>: title, обычно <meta charset="UTF-8">, часто meta viewport для мобильной вёрстки и <link rel="stylesheet" href="...">, когда используете внешний CSS. Видимые заголовки, абзацы, изображения и интерактивный интерфейс — в <body>. title — важный дочерний элемент head, но он не заменяет сам head.

Частые дочерние элементы одним взглядом

📊 Частые дочерние элементы head

Элемент Роль
title Подпись вкладки / документа
meta charset Кодировка символов (UTF-8)
meta viewport Подсказка ширины и масштаба на мобильных
link stylesheet Внешний файл CSS
style Необязательный внутренний CSS
script Необязательные скрипты (привычки размещения различаются; многие новички загружают в конце body)

Практичный стартовый head

В первый день вам не нужны все возможные meta-теги. Надёжный head для новичка покрывает кодировку, мобильный viewport, заголовок документа и ссылку на таблицу стилей, когда CSS лежит в отдельном файле.

Практичный стартовый head

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<p>Visible content lives in the body.</p>
</body>
</html>

Читаем образец

  • meta charset="UTF-8" сообщает браузеру, как декодировать символы — включая эмодзи и нелатинский текст из предыдущих сессий
  • viewport помогает мобильным браузерам использовать ширину устройства вместо крошечной «сжатой» десктопной вёрстки
  • title подписывает вкладку, как вы практиковали в сессии про page-title
  • link rel="stylesheet" подключает styles.css, не вставляя правила CSS в каждый HTML-файл
  • Всё, что посетитель читает на странице, находится под body

Charset первым, рано в head

Размещайте meta charset ближе к началу head, чтобы браузер знал кодировку до интерпретации остального текста документа. UTF-8 — современный стандарт по умолчанию, если редкое устаревшее ограничение не требует иного. Отсутствующий или поздний charset — классическая причина «сломанных» символов, похожих на случайную порчу текста.

Viewport и мобильные браузеры

Без meta viewport многие телефоны предполагают широкий десктопный холст и уменьшают страницу. Распространённый стартовый набор width=device-width, initial-scale=1.0 говорит браузеру совпасть с шириной устройства и начать с нормального масштаба. Адаптивный дизайн вы позже уточните с помощью CSS; viewport — это HTML-сторона рукопожатия, которое делает эти макеты пригодными на телефонах.

Подключение CSS из head

Внешние таблицы стилей отделяют оформление от структуры. Элемент link в head с rel="stylesheet" и путём href — удобный для новичка способ подключить CSS. Пути следуют тем же идеям файловых путей, что вы изучали раньше. Если файл CSS отсутствует, HTML всё равно работает — просто выглядит без стилей.

head vs body vs header

  • head — метаданные и ссылки на ресурсы; не основной читаемый текст статьи
  • body — видимое содержимое, которое посетители читают и с которым взаимодействуют
  • header — видимый секционный элемент для баннеров или вводных блоков внутри body (вы используете его в более поздних сессиях по вёрстке)
    Не переименовывайте head в header в надежде, что это псевдонимы. Это разные элементы. Путаница приводит к неверной или бесполезной разметке.

Скрипты и head (заметка для новичка)

Скрипты могут появляться в head или в body. Многие учебные страницы загружают простые скрипты в конце body, чтобы структура HTML сначала существовала. Продвинутые стратегии загрузки придут позже. В этой сессии важно знать: script допустим как дочерний элемент head, но видимое содержимое по-прежнему не принадлежит head.

Практика в редакторе

  1. Начните с базового HTML-каркаса с html, head и body.
  2. Внутри head добавьте charset UTF-8, meta viewport и понятный title.
  3. Добавьте link на простой styles.css, если он есть (или создайте пустой файл, чтобы путь был реальным).
  4. Весь видимый текст и заголовки держите только в body.
  5. Через View Source или DevTools Elements убедитесь, что секция head соответствует задумке.
  6. Временно уберите viewport, перезагрузите в узком окне или эмуляторе телефона, если можете, и заметьте, как может измениться масштаб — затем верните его.

Лёгкие ошибки

  • Размещать абзацы, изображения или основные заголовки только внутри head, словно это холст страницы
  • Забывать charset — спецсимволы и эмодзи ломаются
  • Пропускать viewport и удивляться странному масштабу мобильной вёрстки
  • Путать head (метаданные) с header (видимая секция позже в курсе)
  • Считать, что одного title достаточно, и оставлять charset на многоязычных страницах
  • Подключать таблицу стилей с неверным путём и винить HTML, когда CSS не загружается

Итог

  • head хранит метаданные и ссылки на ресурсы; body — видимое содержимое
  • Стартовые части: charset, viewport, title и часто CSS-link
  • title — один дочерний элемент head, а не замена head
  • head — не тот же элемент, что видимый header
  • Ставьте charset рано, чтобы браузер корректно декодировал документ

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
6
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Html Урок