Урок 3.1 — Скелет страницы: html, head, body

Каждая HTML-страница в интернете имеет одинаковую базовую структуру. Это как скелет человека — у всех он устроен одинаково. Этот каркас состоит из четырёх обязательных частей:

• <!DOCTYPE html> — объявление типа документа. Первая строчка любой страницы.
• <html> — корневой тег, в который помещается всё остальное.
• <head> — контейнер для мета-информации: заголовок вкладки, кодировка, настройки.
• <body> — всё, что видит пользователь на странице.

Самая первая строчка любого HTML-документа — <!DOCTYPE html>. Она говорит браузеру: "Эй, я написан на современном HTML5, обрабатывай меня правильно!" Раньше DOCTYPE был длинным и страшным, сейчас всё просто:

Если её не написать, браузер может включить режим совместимости (quirks mode), и страница будет отображаться неправильно. Поэтому DOCTYPE — обязательный элемент. Это не тег HTML, а инструкция для браузера. У неё нет закрывающего тега. Просто всегда пишите её первой строчкой.

Сразу после DOCTYPE идёт тег <html>. Это корневой элемент всего документа. Все остальные теги находятся внутри него. Внутри <html> — два главных раздела: <head> и <body>. Сначала голова, потом тело — как у человека!

У тега <html> есть полезный атрибут lang, который указывает язык страницы. Для русскоязычных сайтов пишут lang="ru", для английских — lang="en". Это помогает браузеру, поисковым системам и программам для чтения с экрана.

<html lang="ru">
  
</html>

Тег <head> — контейнер для служебной информации. Пользователь её не видит (кроме заголовка вкладки), но она критически важна. Внутри <head> находятся три обязательных тега:

title — заголовок вкладки браузера. Он также отображается в результатах поиска Яндекса и Google.

<title>Урок 3.1 — Изучаем HTML с нуля</title>

meta charset — кодировка страницы. Без него вместо русского текста появятся "кракозябры". Используйте UTF-8 — самую популярную кодировку в вебе.

<meta charset="UTF-8">

meta viewport — настройка для мобильных устройств. Без него ваш сайт будет выглядеть на телефоне как сильно уменьшенная десктопная версия.

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

Вот как выглядит head целиком:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Моя первая страница</title>
</head>

Порядок внутри head не важен, но charset лучше ставить первым. Некоторые браузеры перечитывают страницу, если видят meta charset не в начале. В head также подключают CSS-файлы, шрифты и иконки — но об этом позже.

Тег <body> — место, где живёт всё видимое содержимое: заголовки, абзацы, картинки, ссылки, кнопки, меню, формы. Если <head> — мозг страницы, то <body> — её тело.

Все теги из предыдущих уроков (<h1>, <p>, <strong>, <ul>, <ol>, <a>, <img>) пишутся внутри <body>. Ни один из них не должен быть вне body.

<body>
  <h1>Привет, мир!</h1>
  <p>Это моя первая HTML-страница.</p>
  <p>Я изучаю <strong>скелет документа</strong>.</p>
  <a href="https://example.com">Нажми меня</a>
</body>

В <body> может быть сколько угодно контента. Откройте инструменты разработчика (F12) и найдите тег <body> — вся вёрстка, все элементы на странице находятся внутри него.

Теперь соберём всё вместе. Вот полная структура HTML-документа, которая будет основой для любой вашей страницы:

<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Моя первая страница</title>
</head>
<body>
  <h1>Добро пожаловать на мой сайт!</h1>
  <p>Это моя первая полноценная HTML-страница. У неё есть DOCTYPE, html, head и body.</p>
  <p>Я уже умею создавать <strong>скелет</strong> любой веб-страницы!</p>
</body>
</html>

Попробуйте прямо сейчас: создайте файл index.html, скопируйте код и откройте в браузере. Вы увидите свою первую полноценную HTML-страницу!

Теперь добавим больше контента — заголовки, списки и ссылку:

<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Моя страница</title>
</head>
<body>
  <h1>Главный заголовок</h1>
  <p>Это введение в мою страницу.</p>

  <h2>Раздел первый</h2>
  <p>В этом разделе я расскажу о <strong>важных вещах</strong>.</p>

  <h3>Подраздел</h3>
  <p>А тут можно написать что-то ещё более детальное.</p>

  <h2>Мои любимые вещи</h2>
  <ul>
    <li>Кодить на HTML</li>
    <li>Изучать CSS</li>
    <li>Пить кофе</li>
  </ul>

  <p>А ещё я люблю <a href="https://developer.mozilla.org/ru/">MDN</a> — лучший справочник по веб-технологиям.</p>
</body>
</html>

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

HTML — иерархическая структура. Теги вкладываются друг в друга, как матрёшки. Главное правило: теги нельзя пересекать. Если открыли <p>, потом <strong>, закрывать нужно сначала </strong>, потом </p>.

<p>Текст с <strong>жирным</strong> словом.</p>

<p>Текст с <strong>жирным</p></strong> ❌

Создайте страницу со следующим содержимым:

1. Правильный DOCTYPE
2. <html lang="ru">
3. В head: charset UTF-8, viewport, title "Моя страница о себе"
4. h1 "Привет! Меня зовут [имя]"
5. Абзац с кратким описанием
6. h2 "Мои хобби" + маркированный список
7. h2 "Мои цели" + нумерованный список
8. Абзац со ссылкой на любимый сайт

<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Моя страница о себе</title>
</head>
<body>
  <h1>Привет! Меня зовут Алексей</h1>
  <p>Я начинающий веб-разработчик из Москвы. Учу HTML и CSS.</p>

  <h2>Мои хобби</h2>
  <ul>
    <li>Программирование</li>
    <li>Музыка</li>
    <li>Чтение</li>
  </ul>

  <h2>Мои цели</h2>
  <ol>
    <li>Научиться верстать</li>
    <li>Выучить CSS</li>
    <li>Изучить JavaScript</li>
  </ol>

  <p>Любимый сайт: <a href="https://developer.mozilla.org/ru/">MDN</a></p>
</body>
</html>

Забыли DOCTYPE. Без него браузер включает quirks mode — CSS работает непредсказуемо. Всегда начинайте с <!DOCTYPE html>.

Контент вне body. Новички часто пишут текст в head или после </html>. Всё видимое — только в <body>.

Не закрыли тег. Пропустили </html> или </body>? Браузер всё покажет, но может "додумать" неправильно. Проверяйте парность.

Не указали lang. Атрибут не обязательный, но важный для поисковиков и скринридеров. Просто добавьте lang="ru".

Пересечение тегов. Закрывайте в обратном порядке открытия. LIFO — Last In, First Out.

• Любая HTML-страница начинается с <!DOCTYPE html>
• <html> — корневой тег с атрибутом lang
• <head> — мета-информация: charset, viewport, title
• <body> — всё, что видит пользователь
• Теги закрываются в обратном порядке открытия
• Отступы делают код читаемым

Этот скелет будет повторяться в каждом HTML-файле. Потренируйтесь: создайте 2-3 страницы с разным содержимым, но одинаковым скелетом. В следующем уроке — таблицы!