Урок 2. Скелет HTML-документа ← Уроки по HTML

Урок 2. Скелет HTML-документа

Темы. <!DOCTYPE>, <html>, <head>, <body>, <meta>, <title>, кодировка, viewport

Практика. Собрать корректную заготовку страницы

Скачайте готовый boilerplate с нашего сайта: html-boilerplate.html.

Подробный конспект

1. Зачем нужен «скелет» страницы?

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

Эту структуру называют boilerplate (шаблон-заготовка). Ты пишешь её один раз и копируешь в каждый новый проект.

2. Полный минимальный шаблон

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Описание страницы для поисковиков">
    <title>Название страницы</title>
</head>
<body>

    <!-- Здесь будет содержимое страницы -->

</body>
</html>

3. Разбор каждого элемента

<!DOCTYPE html>

Объявление типа документа. Это не тег, а инструкция для браузера. Говорит: «Это HTML5, рендери по современным стандартам».

  • Всегда пишется первой строкой
  • Без неё браузер включает «режим совместимости» (quirks mode) — ведёт себя непредсказуемо
  • Регистр не важен, но <!DOCTYPE html> — общепринятая запись

<html lang="ru">

Корневой элемент — обёртка для всего содержимого страницы.

  • Атрибут lang указывает язык содержимого
  • Используется поисковиками, скринридерами и браузерными переводчиками
  • Примеры: lang="ru", lang="en", lang="uk"

<head>

Невидимая «голова» документа. Содержит служебную информацию — её не видит пользователь, но она критически важна для браузера и поисковиков.

Что обычно находится внутри:

  • Кодировка страницы
  • Настройки viewport
  • Мета-теги (описание, ключевые слова, OG-теги)
  • Заголовок вкладки <title>
  • Подключение CSS-файлов
  • Подключение шрифтов
  • Подключение иконки сайта (favicon)

<meta charset="UTF-8">

Указывает кодировку документа.

  • UTF-8 поддерживает все языки мира (русский, китайский, арабский и т.д.)
  • Без этого тега кириллица может отображаться кракозябрами
  • Должен быть первым тегом внутри <head> — до <title> и остальных мета

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

Управляет масштабированием на мобильных устройствах.

  • width=device-width — ширина страницы равна ширине экрана устройства
  • initial-scale=1.0 — начальный масштаб 100%, без автозума
  • Без этого тега мобильные браузеры показывают страницу как «уменьшенный десктоп»

Viewport — обязательный тег для любого современного сайта. Без него страница будет выглядеть ужасно на смартфонах, даже если ты сделал адаптивную вёрстку.

<meta name="description" content="...">

Описание страницы для поисковых систем.

  • Отображается под заголовком в результатах поиска Google
  • Оптимальная длина: 120–160 символов
  • Не влияет на ранжирование напрямую, но влияет на CTR (кликабельность)

<title>

Заголовок вкладки в браузере и заголовок в поисковой выдаче.

  • Один из важнейших SEO-элементов
  • Оптимальная длина: 50–70 символов
  • Каждая страница должна иметь уникальный <title>
  • Рекомендуемый формат: Ключевое слово — Название сайта

<body>

Видимая часть страницы. Всё, что пользователь видит в браузере, находится здесь.

  • Только один <body> на страницу
  • Здесь размещается весь контент: тексты, изображения, кнопки, формы

4. Полный шаблон с favicon и CSS

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Учебный проект по HTML — курс для начинающих">
    <title>Главная — HTML-курс</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Привет, мир!</h1>

</body>
</html>

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

Ошибка Последствие Исправление
Нет <!DOCTYPE html> Quirks mode, непредсказуемый рендеринг Добавить первой строкой
Нет charset Кириллица отображается кракозябрами <meta charset="UTF-8"> первым в <head>
Нет viewport Страница плохо выглядит на мобильных Добавить мета-тег viewport
Нет <title> Вкладка без названия, плохо для SEO Уникальный заголовок на каждой странице
Контент вне <body> Невалидный HTML, возможны баги Весь видимый контент — только в <body>

6. Быстрая генерация в VS Code

В VS Code не нужно набирать шаблон вручную:

  1. Создай файл index.html
  2. Напечатай ! (восклицательный знак)
  3. Нажми Tab или Enter
  4. VS Code автоматически вставит полный HTML-boilerplate

Это Emmet — встроенный в VS Code инструмент для быстрой генерации HTML. Он умеет сокращать сотни других конструкций. Познакомишься с ним подробнее в следующих уроках.

7. Как проверить валидность кода?

Сервис W3C Validator проверяет HTML на ошибки:

  1. Перейди на validator.w3.org
  2. Вставь код или укажи URL страницы
  3. Нажми Check
  4. Исправь все ошибки (errors) — предупреждения (warnings) менее критичны
Чек-лист