Войти Регистрация
🔒 Ты не вошёл(вошла) в аккаунт — прогресс, работы и результаты теста не сохраняются. Что недоступно?

✅ Без входа можно

  • читать все 33 занятия, смотреть слайды и шпаргалку;
  • пробовать код в редакторе и песочнице.

⛔ Без входа нельзя

  • сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
  • отмечать пройденные занятия и видеть свой прогресс;
  • выбрать тему итогового проекта и отмечать чек-лист;
  • отправить итоговый тест и сохранить результат.
Зарегистрироваться бесплатно У меня есть аккаунт
Модуль 1. Введение и HTML Занятие 3

Структура HTML-документа

Сегодня мы разберёмся, из каких частей состоит HTML-документ, и сделаем страницу «О себе» с заголовками разных уровней.

Изучаем: <!DOCTYPE html>, html, head, title, body, заголовки h1–h6
Результат: Страница «О себе» с заголовками

🎬 Слайды для урока Листай стрелками ← →, F — весь экран, N — подсказки

👀 Сегодня сделаем вот такое

Показать код примера 
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>О себе — Маша</title>
</head>
<body>
  <h1>Привет, я Маша!</h1>
  <h2>Мои увлечения</h2>
  <h3>Рисование</h3>
  <h3>Плавание</h3>
  <h2>Моя мечта</h2>
  <h3>Сделать свою компьютерную игру</h3>
</body>
</html>

💡 Объяснение

Зачем странице структура

Любой HTML-документ устроен одинаково, как стандартный конверт для письма: есть место для адреса, марки и само письмо внутри. Благодаря единому порядку браузер в любой стране понимает любую страницу.

Разбираем каркас по строчкам

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>О себе</title>
  </head>
  <body>
    <h1>Привет, я Маша!</h1>
  </body>
</html>
  • <!DOCTYPE html> — самая первая строка. Это не тег, а объявление: «Браузер, перед тобой современный HTML5». Без неё браузер может включить старый режим, и страница будет выглядеть странно.
  • <html lang="ru"> — корневой элемент, «коробка», в которой лежит всё остальное. Атрибут lang="ru" сообщает, что страница на русском: так браузер правильно переносит слова, а программы для незрячих читают текст с правильным произношением.
  • <head> — «голова» документа, служебная часть. То, что внутри, не показывается на самой странице.
  • <meta charset="UTF-8"> — кодировка. Она объясняет, как превращать байты в буквы. Без неё вместо русского текста могут появиться «кракозябры» вроде Привет.
  • <title> — название страницы. Его видно на вкладке браузера, в закладках и в результатах поиска.
  • <body> — «тело» документа. Всё, что внутри, посетитель видит на экране.

Вложенность и отступы

Теги вкладываются друг в друга, как матрёшки: head и body лежат внутри html, а title — внутри head. Элемент, внутри которого лежит другой, называют родителем, а вложенный — ребёнком.

Главное правило вложенности: закрываем в обратном порядке. Что открыли последним — закрываем первым:

✅ <p><strong>Верно</strong></p>
❌ <p><strong>Неверно</p></strong>

Чтобы видеть вложенность, дочерние теги пишут с отступом (2 или 4 пробела, или Tab). Браузеру отступы не нужны, но человеку они очень помогают читать код. В VS Code код можно выровнять автоматически: Shift+Alt+F.

Заголовки h1–h6

В HTML шесть уровней заголовков: от <h1> (самый главный и крупный) до <h6> (самый мелкий). Их можно сравнить с оглавлением учебника:

  • h1 — название книги. На странице обычно один h1.
  • h2 — названия глав.
  • h3 — параграфы внутри главы, и так далее.

Не выбирай заголовок по размеру букв! Размер мы потом легко поменяем через CSS. Выбирай по важности и не перепрыгивай через уровни: после h2 идёт h3, а не h5. Правильные заголовки помогают поисковикам понять страницу, а незрячим людям — быстро перемещаться по разделам.

Частые ошибки

  • Текст страницы написан внутри head — его не будет видно.
  • Несколько h1 подряд вместо h2 для разделов.
  • Заголовки выбраны «по размеру», а не по смыслу.
  • Потерян закрывающий </body> или </html>.

Проверь себя

  1. Что будет, если убрать <meta charset="UTF-8">?
  2. Где будет виден текст из тега title?
  3. Можно ли после h2 сразу поставить h4? Почему так делать не стоит?

⌨️ Практика

  1. Напиши в <title> своё имя — оно появится на вкладке.
  2. Добавь заголовок h1 «Привет, я …».
  3. Добавь три заголовка h2: «Мои увлечения», «Мой класс», «Моя мечта».
  4. Под одним из h2 добавь два заголовка h3 (например, «Спорт» и «Музыка»).

🧪 Редактор

🔒 Работа не сохраняется на сайте. Черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве. Зарегистрируйся или войди, чтобы сохранить работу в «Мои работы».

Результат обновляется сам. Tab — отступ, Esc затем Tab — выйти из поля.

🪞 Рефлексия

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

🔒 Отметить занятие пройденным можно только после входа. Без аккаунта сайт не запомнит, до какого занятия ты дошёл(дошла). Регистрация · Вход