HTML

HTML: основы и структура документа

📚 18 вопросовПройти тест →
Лекция

HTML: основы и структура документа

HTML

HTML: основы и структура документа

Введение: как паспорт страницы 🧾

Представьте страницу как документ: у неё есть «паспорт» (служебные данные) и «содержимое» (текст, блоки, картинки).
Если паспорт пустой — браузер и поисковик «не понимают», что перед ними.
Если содержимое без структуры — пользователю сложно читать и ориентироваться.
💡 Совет: структура — это не красота, а понятность.
✅ Вывод: правильный каркас делает страницу стабильной, понятной и удобной.

Проблема: страница без структуры ❌

Без структуры:
  • браузер может включить старый режим (quirks mode);
  • мобильная версия «ломается»;
  • поисковик хуже понимает страницу.
Со структурой:
  • всё читается предсказуемо;
  • контент адаптивный;
  • метаданные понятны для SEO.
✅ Вывод: структура — это фундамент всей страницы.

Чем помогает и как работает

  • помогает собирать каждую HTML-страницу по единому надёжному шаблону;
  • снижает риск проблем с отрисовкой из-за пропущенной структуры;
  • упрощает SEO и адаптивную проверку с первого дня.
Как это работает:
  1. Начинаем с <!doctype html> и задаём lang.
  2. В head настраиваем метаданные: charset, viewport, title, description.
  3. Весь видимый контент размещаем в body по семантическим блокам.
  4. Стили подключаем в head, скрипты — с defer.
  5. Перед публикацией проверяем desktop и mobile версии.
✅ Вывод: базовый HTML-каркас снижает количество ошибок на старте.

Что такое HTML

HTML (HyperText Markup Language) — язык разметки, который описывает структуру страницы.
Он отвечает за что находится на странице и как это организовано логически.
✅ Вывод: HTML — это каркас, на котором держится всё остальное.

Ключевые термины (простыми словами)

  • DOCTYPE — «паспорт стандарта», сообщает браузеру, что это HTML5.
  • html — корневой контейнер всей страницы.
  • head — служебные данные (кодировка, title, описание, стили).
  • body — видимое содержимое.
  • meta charset — кодировка текста.
  • meta viewport — правила адаптации на мобильных.
  • title — название вкладки.
  • description — краткое описание для поисковиков.
  • link — подключение CSS.
  • script — подключение JS.
✅ Вывод: термины — это словарь, без него структура непонятна.

1. <!doctype html> — режим стандартов

Назначение: включить современный режим отображения.
Простыми словами: это команда для браузера работать в современном режиме, без «старых странностей».
Аналогия: «заявить правила игры» перед началом.
Пример:
<!doctype html><html lang="ru">  <head></head>  <body></body></html>
🔎 Как это происходит на практике:
  1. Беру реальный шаблон страницы и применяю текущее правило в конкретном контексте.
  2. Проверяю через DevTools и предпросмотр браузера, что всё работает предсказуемо.
  3. Фиксирую это правило в базовом лейауте, чтобы не повторять одни и те же ошибки.
Характеристики:
  • ✅ Должен быть первой строкой.
  • ✅ Без него возможен quirks mode.
❗ Когда использовать: всегда.
✅ Вывод: DOCTYPE — обязательный старт любого HTML‑документа.

2. html и lang — корень и язык

Назначение: обозначить границы документа и язык текста.
Простыми словами: html — это оболочка всей страницы, а lang подсказывает её язык.
Аналогия: обложка и язык книги.
Пример:
<html lang="ru"></html>
🔎 Как это происходит на практике:
  1. Беру реальный шаблон страницы и применяю текущее правило в конкретном контексте.
  2. Проверяю через DevTools и предпросмотр браузера, что всё работает предсказуемо.
  3. Фиксирую это правило в базовом лейауте, чтобы не повторять одни и те же ошибки.
Характеристики:
  • ✅ lang нужен для доступности и SEO.
  • ✅ Помогает экранным дикторам.
❗ Когда использовать: всегда указывать язык страницы.
✅ Вывод: lang делает страницу «понятной» для технологий.

3. head — служебная часть

Назначение: хранить метаданные и подключения.
Простыми словами: в head лежат служебные настройки страницы, которые пользователь обычно не видит.
Аналогия: паспорт и документы.
Пример:
<head>  <meta charset="utf-8" />  <meta name="viewport" content="width=device-width, initial-scale=1" />  <title>Курс по HTML</title></head>
🔎 Как это происходит на практике:
  1. Беру реальный шаблон страницы и применяю текущее правило в конкретном контексте.
  2. Проверяю через DevTools и предпросмотр браузера, что всё работает предсказуемо.
  3. Фиксирую это правило в базовом лейауте, чтобы не повторять одни и те же ошибки.
Характеристики:
  • ✅ Здесь нет видимого контента.
  • ✅ Важен порядок: charset первым.
❗ Когда использовать: всегда, сразу после html.
✅ Вывод: head объясняет браузеру, как показывать страницу.

4. meta charset — кодировка

Назначение: чтобы текст отображался корректно.
Простыми словами: этот тег говорит браузеру, как правильно читать буквы и символы.
Аналогия: выбрать правильный алфавит.
Пример:
<meta charset="utf-8" />
🔎 Как это происходит на практике:
  1. Беру реальный шаблон страницы и применяю текущее правило в конкретном контексте.
  2. Проверяю через DevTools и предпросмотр браузера, что всё работает предсказуемо.
  3. Фиксирую это правило в базовом лейауте, чтобы не повторять одни и те же ошибки.
Характеристики:
  • ✅ Должен быть первым в head.
  • ✅ Без него возможны «кракозябры».
❗ Когда использовать: всегда.
✅ Вывод: кодировка = читаемый текст.

5. meta viewport — адаптивность

Назначение: правильно масштабировать страницу на мобильных.
Простыми словами: этот тег объясняет, как страница должна масштабироваться на телефоне.
Аналогия: подогнать лист под размер экрана.
Пример:
<meta name="viewport" content="width=device-width, initial-scale=1" />
🔎 Как это происходит на практике:
  1. Беру реальный шаблон страницы и применяю текущее правило в конкретном контексте.
  2. Проверяю через DevTools и предпросмотр браузера, что всё работает предсказуемо.
  3. Фиксирую это правило в базовом лейауте, чтобы не повторять одни и те же ошибки.
Характеристики:
  • ✅ Делает страницу адекватной на телефоне.
  • ✅ Без него мобильная версия «ломается».
❗ Когда использовать: всегда, если страница для веба.
✅ Вывод: viewport — база мобильной адаптации.

6. title — название вкладки

Назначение: показать, что это за страница.
Простыми словами: это имя страницы во вкладке браузера и в результатах поиска.
Аналогия: заголовок на обложке.
Пример:
<title>HTML Старт — курс для новичков</title>
🔎 Как это происходит на практике:
  1. Беру реальный шаблон страницы и применяю текущее правило в конкретном контексте.
  2. Проверяю через DevTools и предпросмотр браузера, что всё работает предсказуемо.
  3. Фиксирую это правило в базовом лейауте, чтобы не повторять одни и те же ошибки.
Характеристики:
  • ✅ Видно в вкладке браузера.
  • ✅ Используется в поиске.
❗ Когда использовать: всегда, с понятным названием.
✅ Вывод: title — лицо страницы.

7. meta description — краткое описание

Назначение: подсказка для поисковика и превью.
Простыми словами: это короткая аннотация страницы для поисковика и сниппета.
Аналогия: короткая аннотация книги.
Пример:
<meta name="description" content="Быстрый старт в HTML для новичков" />
🔎 Как это происходит на практике:
  1. Беру реальный шаблон страницы и применяю текущее правило в конкретном контексте.
  2. Проверяю через DevTools и предпросмотр браузера, что всё работает предсказуемо.
  3. Фиксирую это правило в базовом лейауте, чтобы не повторять одни и те же ошибки.
Характеристики:
  • ✅ Повышает кликабельность в поиске.
  • ✅ Должно быть коротким и точным.
❗ Когда использовать: на всех публичных страницах.
✅ Вывод: description помогает объяснить суть страницы.

8. link — подключение CSS

Назначение: подключить стили.
Простыми словами: через link подключают файл стилей, который отвечает за внешний вид.
Аналогия: надеть одежду после каркаса.
Пример:
<link rel="stylesheet" href="/styles/main.css" />
🔎 Как это происходит на практике:
  1. Беру реальный шаблон страницы и применяю текущее правило в конкретном контексте.
  2. Проверяю через DevTools и предпросмотр браузера, что всё работает предсказуемо.
  3. Фиксирую это правило в базовом лейауте, чтобы не повторять одни и те же ошибки.
Характеристики:
  • ✅ Стили должны быть в head.
  • ✅ Иначе можно увидеть «мигание» без стилей.
❗ Когда использовать: когда есть внешний CSS.
✅ Вывод: CSS подключаем через link в head.

9. body — видимое содержимое

Назначение: всё, что видит пользователь.
Простыми словами: body — это основное тело страницы, которое видит пользователь.
Аналогия: страницы книги после обложки.
Пример:
<body>  <header>...</header>  <main>...</main>  <footer>...</footer></body>
🔎 Как это происходит на практике:
  1. Беру реальный шаблон страницы и применяю текущее правило в конкретном контексте.
  2. Проверяю через DevTools и предпросмотр браузера, что всё работает предсказуемо.
  3. Фиксирую это правило в базовом лейауте, чтобы не повторять одни и те же ошибки.
Характеристики:
  • ✅ Здесь живут заголовки, текст, блоки.
  • ✅ В body не кладут метаданные.
❗ Когда использовать: всегда, всё видимое — в body.
✅ Вывод: body — это «сцена» для контента.

10. header, main, footer — базовый каркас

Назначение: логически разделить страницу.
Простыми словами:
  • header — шапка сайта (логотип, меню, заголовок).
  • main — основное тело страницы, которое видит пользователь.
  • footer — подвал со служебной информацией (копирайт, ссылки, контакты).
Аналогия: вход, основной зал, служебная часть.
Пример:
<header>...</header><main>...</main><footer>...</footer>
🔎 Как это происходит на практике:
  1. Беру реальный шаблон страницы и применяю текущее правило в конкретном контексте.
  2. Проверяю через DevTools и предпросмотр браузера, что всё работает предсказуемо.
  3. Фиксирую это правило в базовом лейауте, чтобы не повторять одни и те же ошибки.
Характеристики:
  • ✅ main должен быть один.
  • ✅ Упрощает навигацию для скринридеров.
❗ Когда использовать: на большинстве страниц есть шапка, контент и подвал.
✅ Вывод: семантический каркас делает страницу читабельной.

Простое описание блоков страницы

  • html — корневой контейнер, внутри него живёт весь HTML-документ.
  • head — служебная часть: кодировка, title, meta-теги, подключение CSS/JS.
  • body — основное тело страницы, которое видит пользователь.
  • header — шапка сайта/страницы: логотип, меню, ключевой заголовок.
  • main — главный уникальный контент конкретной страницы.
  • footer — подвал: копирайт, служебные ссылки, контакты.
  • section — тематический блок контента внутри main.
  • nav — блок навигации со ссылками по разделам сайта.
✅ Вывод: когда каждый блок имеет свою роль, страницу проще читать, поддерживать и продвигать в поиске.

11. script и defer — без блокировки

Назначение: подключить JS без тормозов.
Простыми словами: defer позволяет не тормозить показ страницы, пока грузится JavaScript.
Аналогия: сначала показать витрину, потом подключать кассу.
Пример:
<script src="/scripts/app.js" defer></script>
🔎 Как это происходит на практике:
  1. Беру реальный шаблон страницы и применяю текущее правило в конкретном контексте.
  2. Проверяю через DevTools и предпросмотр браузера, что всё работает предсказуемо.
  3. Фиксирую это правило в базовом лейауте, чтобы не повторять одни и те же ошибки.
Характеристики:
  • ✅ defer не блокирует рендер.
  • ✅ Скрипт выполняется после загрузки HTML.
❗ Когда использовать: почти всегда для внешних скриптов.
✅ Вывод: defer делает загрузку быстрее.

Сравнение: head vs body

Чтоheadbody
НазначениеМетаданные, подключениеВидимый контент
Примерыtitle, meta, link, scriptheader, main, текст
Видно пользователюНетДа

Часто спрашивают на собеседованиях

  • Зачем нужен DOCTYPE? Он включает стандартный режим. Без него возможен quirks mode.
  • Почему важен lang? Помогает доступности и поисковикам.
  • В чём разница head и body? В head метаданные, в body контент.
  • Зачем нужен viewport? Без него мобильная версия масштабируется неправильно.
  • Почему script с defer? Скрипт не блокирует загрузку страницы.
✅ Вывод: эти вопросы — базовый фильтр на собеседовании.

Типичные ошибки

Ошибка 1: Нет <!doctype html>

❌ Неправильно: браузер включает quirks mode.
✅ Правильно: DOCTYPE первой строкой.
Почему: иначе стили могут отображаться некорректно.

Ошибка 2: Нет lang

❌ Неправильно: экранные дикторы не понимают язык.
✅ Правильно: lang="ru".
Почему: улучшает доступность и SEO.

Ошибка 3: meta charset не первым

❌ Неправильно: кодировка не определена вовремя.
✅ Правильно: charset первым в head.
Почему: иначе возможны неверные символы.

Ошибка 4: Нет viewport

❌ Неправильно: страница «ломается» на телефоне.
✅ Правильно: meta viewport в head.
Почему: это базовая адаптация.

Ошибка 5: title отсутствует

❌ Неправильно: вкладка без названия.
✅ Правильно: конкретный title.
Почему: это влияет на UX и поиск.

Ошибка 6: Метаданные в body

❌ Неправильно: meta внутри body.
✅ Правильно: все метаданные в head.
Почему: браузер ожидает их до рендера.

Ошибка 7: Скрипт в head без defer

❌ Неправильно: блокируется рендер.
✅ Правильно: defer.
Почему: страница появляется быстрее.

Ошибка 8: Несколько main

❌ Неправильно: навигация ломается.
✅ Правильно: один main.
Почему: так устроена семантика.

Best Practices

  • Всегда начинайте с <!doctype html>.
  • Указывайте lang для доступности.
  • Ставьте meta charset первым.
  • Добавляйте viewport для мобильных.
  • Пишите понятный title и описание.
  • Подключайте CSS в head.
  • Подключайте JS с defer.
  • Держите один main.

Заключение

Ключевые мысли

🎯 Структура — это каркас страницы и основа стабильности.
🎯 head отвечает за правила отображения, body — за контент.
🎯 Правильная база экономит время и предотвращает ошибки.
Соберите правильный каркас — и дальше всё будет проще.
🎯

Проверьте знания

Закрепите материал — пройдите тест по теме «HTML: основы и структура документа»

Пройти тест →