Урок 02

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

Скелет документа

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Заголовок страницы</title>
    <link rel="stylesheet" href="style.css">
    <script src="app.js" defer></script>
</head>
<body>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
</body>
</html>

DOCTYPE

<!DOCTYPE html> — всегда первая строка.

Что делает:

  • Говорит браузеру — это HTML5.
  • Включает standards mode.
  • Без него — quirks mode (эмуляция старых браузеров).

Правило: одна строка, до <html>.

Элемент <html>

Корневой элемент. Всё остальное — внутри.

Атрибут lang:

<html lang="ru">
<html lang="en">
<html lang="ru-RU">

Зачем:

  • Скринридеры — правильное произношение.
  • Поисковики — язык страницы.
  • Переводчик браузера — предложит перевод.

Правило: всегда указывать lang.

Элемент <head>

Метаданные, невидимые на странице. Что сюда кладут:

  • <meta charset> — кодировка.
  • <meta name="viewport"> — мобильная адаптация.
  • <title> — заголовок вкладки.
  • <meta name="description"> — описание для поисковиков.
  • <link> — стили, favicon, preload.
  • <script> — JS (с defer / async).
  • <style> — внутренние стили (редко).
  • <base> — базовый URL (осторожно).

<meta charset>

<meta charset="UTF-8">

Первым в <head> — до текста.

Зачем:

  • Без него кириллица → кракозябры.
  • UTF-8 — универсальный (все языки, эмодзи).

Правило: UTF-8 всегда.

<meta name="viewport">

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

Что означает:

  • width=device-width — ширина = ширина устройства.
  • initial-scale=1.0 — начальный масштаб 1.

Зачем:

  • Без него мобильные показывают уменьшенную desktop-версию.
  • Обязателен для адаптивности.

<title>

<title>Купить iPhone 15 — Магазин TechShop</title>

Где видно:

  • Вкладка браузера.
  • Результаты поиска.
  • Превью при отправке ссылки.
  • Закладки.

Правила:

  • 50-60 символов.
  • Уникальный для каждой страницы.
  • Формат: Страница — Бренд.
  • Не спамить ключевыми словами.

<meta name="description">

<meta name="description" content="iPhone 15 с чипом A17 Pro, камерой 48 Мп и USB-C. Доставка по всей России.">

Где видно:

  • Сниппет в поиске.
  • Превью при отправке ссылки.

Правила:

  • 150-160 символов.
  • Уникальное для страницы.
  • Содержит ключевые слова естественно.
  • Не влияет на ранжирование, но влияет на CTR.

<link>

Стили:

<link rel="stylesheet" href="style.css">

Favicon:

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Preload:

<link rel="preload" href="font.woff2" as="font" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">

Canonical:

<link rel="canonical" href="https://example.com/page">

Что даёт: избежать дублей страниц.

<script>

Способы подключения:

1. Обычный (блокирует):

<script src="app.js"></script>

Проблема: парсинг HTML останавливается.

2. async:

<script src="app.js" async></script>

Что даёт: скачивается параллельно, выполняется сразу после загрузки.

Когда: независимые скрипты (аналитика).

3. defer:

<script src="app.js" defer></script>

Что даёт: скачивается параллельно, выполняется после парсинга HTML.

Когда: 90% случаев. Порядок гарантирован.

Правило: defer в <head>, обычный — в конце <body>.

<style>

<style>
    body { font-family: sans-serif; }
</style>

Когда: критический CSS для первой отрисовки.

Правило: в основном — внешний CSS. <style> — только для critical CSS.

Элемент <body>

Видимый контент. Что сюда кладут:

  • <header> — шапка.
  • <nav> — навигация.
  • <main> — основное содержимое.
  • <aside> — сайдбар.
  • <footer> — подвал.
  • <section> — секции.

Правило: один <main> на странице.

Базовый шаблон

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Заголовок страницы</title>
    <meta name="description" content="Описание страницы до 160 символов">

    <link rel="canonical" href="https://example.com/page">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="style.css">

    <script src="app.js" defer></script>
</head>
<body>
    <header>
        <nav>...</nav>
    </header>

    <main>
        <h1>Заголовок страницы</h1>
        <p>Содержимое</p>
    </main>

    <footer>
        <p>© 2026</p>
    </footer>
</body>
</html>

Порядок элементов в head

Рекомендуемый:

  1. <meta charset> — первым.
  2. <meta viewport>.
  3. <title>.
  4. <meta description>.
  5. Остальные <meta> (OG, Twitter).
  6. <link> (canonical, stylesheet, preload).
  7. <script> (defer/async).

Правило: charset — первым, стили — до скриптов.

Open Graph

Метатеги для соцсетей:

<meta property="og:title" content="Заголовок">
<meta property="og:description" content="Описание">
<meta property="og:image" content="https://example.com/preview.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

Что даёт: красивое превью при отправке ссылки.

Twitter Cards:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Заголовок">
<meta name="twitter:image" content="...">

Практика

1. Создайте правильный index.html:

  • DOCTYPE.
  • lang="ru".
  • charset, viewport.
  • title, description.
  • canonical.
  • favicon.
  • CSS + JS с defer.

2. Проверьте:

  • Заголовок вкладки правильный.
  • DevTools → Network → CSS и JS подгружаются.
  • Кириллица отображается.

3. Валидация:

https://validator.w3.org/

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

1. <meta charset> не первым:

Кракозябры

Решение: сразу после <head>.

2. Нет viewport:

Мобильная версия «уменьшенная» desktop

Решение: всегда meta viewport.

3. Скрипты без defer в head:

Блокируют парсинг

Решение: defer.

4. Стили после скриптов:

FOUC — вспышка нестилизованного контента

Решение: CSS в head до скриптов.

5. Отсутствие title:

Вкладка показывает URL

Решение: всегда <title>.

6. Description спамом:

10 ключевых слов через запятую

Решение: осмысленное описание.

7. Дублирование title/description:

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

Решение: уникальные.

8. <base> без причины:

Ломает относительные URL

Решение: только если точно нужно.

Итог

  • DOCTYPE — первым.
  • <html lang> — язык.
  • <head> — метаданные.
  • charset первым, потом viewport, title, description.
  • CSS до JS.
  • defer — для скриптов.
  • Один <main> в body.
  • Open Graph — превью в соцсетях.
  • Валидация — обязательно.

Дальше — текстовые теги и заголовки.