💻 Практические примеры

⚡ Минимальный рабочий пример

В этом уроке важнее всего увидеть полный каркас HTML-документа: `doctype`, `html`, `head`, `body`, кодировку и заголовок вкладки. Такой файл можно открыть прямо с диска и сразу проверить в браузере.

В каждом примере сверху — «Результат» (то, что покажет браузер), снизу — код, который его создаёт.

Пример 1. Минимальный валидный документ

Это базовый каркас страницы. Он уже корректно открывается в браузере и подходит для дальнейшего наращивания контента. Из всего документа на экране виден только <body>, а <title> уходит в подпись вкладки.

🗂 Моя первая страница

Привет, HTML

Это минимальный валидный документ.

<!-- index.html -->
<!DOCTYPE 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>Привет, HTML</h1>
  <p>Это минимальный валидный документ.</p>
</body>
</html>

Пример 2. <title> управляет вкладкой

Поменяйте текст внутри <title> — и поменяется только подпись вкладки и закладки. На самой странице этот текст не появляется.

🗂 Каталог книг — Магазин

Список книг

<head>
  <meta charset="UTF-8">
  <title>Каталог книг — Магазин</title>
</head>
<body>
  <h1>Список книг</h1>
</body>

Пример 3. charset: кодировка решает судьбу кириллицы

Без <meta charset="UTF-8"> браузер может угадать неверную кодировку — и кириллица превратится в «кракозябры». С правильным charset текст читается.

❌ без charset
Привет, мир
✅ UTF-8
Привет, мир
<head>
  <meta charset="UTF-8">  <!-- кириллица читается -->
  <title>Кодировка</title>
</head>
<body>
  <p>Привет, мир</p>
</body>

Пример 4. viewport: страница «по ширине телефона»

<meta name="viewport"> говорит мобильному браузеру не масштабировать страницу как «уменьшенную копию десктопа», а подгонять под реальную ширину экрана.

Текст крошечный, страница ужата под десктоп
❌ без viewport
Текст читаемый по ширине экрана
✅ с viewport
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Адаптивная страница</title>
</head>

Пример 5. Полный <head> «как в проекте»

Собираем всё вместе: кодировка, viewport, описание для поиска, заголовок и подключение внешнего CSS. Ничего из этого не видно на странице — но именно это делает её настоящей.

🗂 Блог о вёрстке

Блог о вёрстке

Стили подключены из style.css — заголовок стал бирюзовым.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Заметки о HTML и CSS">
  <title>Блог о вёрстке</title>
  <link rel="stylesheet" href="style.css">
</head>
Проверка в браузере: сохраните файл как index.html, откройте двойным кликом или через Live Server, и сверьте — текст вкладки совпадает с <title>, а кириллица не «осыпалась».