Урок 03. Структура HTML-документа
⚡ Кратко: суть урока
HTML-документ всегда начинается с <!DOCTYPE html>, затем идёт корневой <html>, внутри которого есть <head> для метаданных и <body> для видимого содержимого. Правильный порядок элементов помогает браузеру включить standards mode, а вам - читать и поддерживать страницу без хаоса.
- `doctype` сообщает браузеру, что страница написана на HTML5.
- `head` хранит `meta`, `title` и `link`.
- `body` содержит всё, что пользователь видит на экране.
Что запомнить: минимальный документ - это не просто набор тегов, а согласованный каркас страницы.
Частая ошибка: писать контент до `head` или забывать `meta charset`.
📖 О чём этот урок
Сначала мы собираем минимальный валидный HTML-документ и разбираем, зачем нужны `doctype`, корневой <html>, служебный <head> и видимый <body>. Это базовый каркас любой страницы: если он собран неправильно, дальше будут проблемы с кодировкой, стилями, адаптивностью и предсказуемым рендерингом.
Главная идея простая: браузер ожидает определённую структуру документа. Если вы даёте ему аккуратный каркас, он интерпретирует страницу стабильно и без сюрпризов. Если порядок нарушен, даже хороший контент может отображаться странно.
<!DOCTYPE html> нужен не для визуального эффекта, а чтобы браузер включил современный режим обработки HTML.
Что изучим
- Разницу между `doctype`,
<html>,<head>и<body>. - Зачем нужны `meta charset`, `meta viewport`, `title` и `link`.
- Почему порядок элементов в документе важен для поддержки и совместимости.
💻 Что покажем в примерах
В примерах урока вы увидите минимальный валидный документ, отдельный блок <head> с метаданными и разбор того, какие части страницы отвечают за техническую настройку, а какие - за видимый контент.
📝 Практика урока
- Собрать собственный HTML-каркас с `doctype`, `head` и `body`.
- Добавить `title`, `meta charset` и `meta viewport`.
- Открыть файл в браузере и убедиться, что страница отображается без ошибок.
🐛 На что обратить внимание
Новички часто забывают `doctype`, кладут текст в `head` или ставят `meta charset` слишком поздно. В этом уроке мы сразу формируем привычку собирать страницу в правильном порядке.
🔗 Ресурсы
Официальные ссылки собраны в resources.html. Там есть HTML Standard, MDN по элементам документа и валидатор разметки.
🏠 Домашнее задание
Домашнее задание этого урока - собрать собственный каркас страницы, открыть его в браузере и проверить базовую валидность. Подробности - в homework.html.
📚 Что повторить перед уроком
- ← Урок 02: как работает браузер
- Базовую идею, что HTML превращается в DOM, а браузер ждёт понятную структуру документа.
🎯 Что изучать дальше
- → Урок 04: теги, атрибуты, вложенность
- Следом перейдём от каркаса страницы к элементам, атрибутам и вложенным блокам.