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

Каждый HTML-документ имеет чёткую структуру: DOCTYPE объявляет версию HTML, тег <html> — корень документа, <head> — метаинфомация (заголовок, кодировка, стили), <body> — видимый контент страницы.

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

<!DOCTYPE html> — объявление типа документа. Говорит браузеру: «Это HTML5». Должно быть первой строкой.

<html> — корневой элемент. Всё внутри — содержимое документа. Атрибут lang задаёт язык (lang="ru").

<head> — «изнанка» страницы. Здесь то, что пользователь НЕ видит:

• <meta charset="UTF-8"> — кодировка символов (кириллица, эмодзи)
• <meta name="viewport" ...> — настройки для мобильных
• <title> — заголовок вкладки в браузере
• <link rel="stylesheet"> — подключение CSS
• <script> — подключение JavaScript

<body> — «лицо» страницы. Всё, что видит пользователь: текст, картинки, кнопки.

Вложенность (nesting): теги могут быть внутри других тегов. Правило: закрывающий тег должен стоять после открывающего того же уровня. Это как скобки в математике: (2 + 3) * 4 — каждая открывающая скобка имеет свою закрывающую.

HTML-документ — как дом. <html> — фундамент. <head> — проводка и трубы (не видны, но необходимы). <body> — комнаты, мебель, декор (то, что видит гость). DOCTYPE — табличка «этот дом построен по стандарту».

**Самый простой:**

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Заголовок вкладки</title>
</head>
<body>
  <p>Этот текст видит пользователь.</p>
</body>
</html>

Минимальная правильная структура: DOCTYPE → html → head (с charset и title) → body.

**Простой:**

<!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">
</head>
<body>
  <h1>Привет!</h1>
  <p>Это структурированная страница.</p>
</body>
</html>

Добавили viewport (для мобильных) и ссылку на 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="Портфолио веб-разработчика">
  <title>Иван Иванов — Веб-разработчик</title>
  <link rel="stylesheet" href="css/style.css">
  <script defer src="js/main.js"></script>
</head>
<body>
  <header>
    <h1>Иван Иванов</h1>
    <nav>
      <a href="#about">Обо мне</a>
      <a href="#projects">Проекты</a>
    </nav>
  </header>
  <main>
    <section id="about">
      <h2>Обо мне</h2>
      <p>Веб-разработчик из Москвы.</p>
    </section>
  </main>
</body>
</html>

Реальный пример с семантическими тегами (header, nav, main, section) и правильным расположением CSS и JS.

**Неправильно:** Помещать видимый контент в <head>

**Почему:** Всё, что в <head>, не отображается на странице. Пользователь не увидит текст или картинку, размещённые там.

**Правильно:** Видимый контент (текст, изображения, кнопки) размещайте только в <body>.

**Неправильно:** Забыть meta charset

**Почему:** Без charset="UTF-8" кириллица, эмодзи и специальные символы могут отображаться как «крокозябры».

**Правильно:** Всегда добавляйте <meta charset="UTF-8"> в <head> — это первый meta-тег.

**Неправильно:** Неправильная вложенность тегов

**Почему:** Если закрывающий тег стоит не на своём месте, браузер «угадывает» структуру, и результат непредсказуем.

**Правильно:** Следите, чтобы каждый закрывающий тег закрывал последний открытый. Используйте отступы для наглядности.

• DOCTYPE всегда первой строкой
• <head> — метаинфомация (не видна пользователю)
• <body> — видимый контент страницы
• meta charset="UTF-8" обязателен для кириллицы
• Вложенность: каждый тег должен быть корректно закрыт

Назад: Вы знаете, что такое HTML (H1), — теперь вы понимаете его внутреннюю структуру.

Вперёд: В следующем уроке (H3) вы изучите комментарии в HTML — как делать пометки в коде, не влияя на страницу.