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

С возвращением.

В предыдущем уроке ты создал свою первую HTML-страницу.

Теперь замедлимся и внимательнее посмотрим на структуру.

Потому что HTML — это не просто “несколько тегов на странице”.

Хороший HTML-документ имеет чёткую структуру.

Если структура плохая, браузер всё равно попробует тебе помочь.

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

Возможно?

Может быть.

Хорошая идея?

Нет.

Что Ты Изучишь

В этом уроке ты узнаешь:

что делает <!DOCTYPE html>;
что такое элемент <html>;
почему lang важен;
что должно быть внутри <head>;
что должно быть внутри <body>;
что делает meta charset;
почему viewport meta tag важен;
как писать чистый базовый HTML-документ.

Базовая HTML-Структура

Стандартный 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>Добро пожаловать</h1>
  <p>Это моя веб-страница.</p>
</body>
</html>

Эта структура — фундамент почти каждой HTML-страницы.

Она выглядит маленькой.

Но делает важную работу.

Как каркас дома.

Не гламурно.

Очень необходимо.

DOCTYPE

Первая строка:

<!DOCTYPE html>

Она говорит браузеру:

Этот документ использует современный HTML.

Точнее, она говорит браузеру использовать standards mode.

То есть браузер должен отображать страницу по современным веб-стандартам.

Если забыть DOCTYPE, браузер может перейти в странное поведение совместимости.

А никто не хочет, чтобы браузер вёл себя так, будто нашёл старое пыльное руководство из 2003 года.

Поэтому оставляй его.

Всегда.

Элемент html

После DOCTYPE мы открываем главный HTML-элемент:

<html lang="ru">

И закрываем его в конце:

</html>

Всё на странице находится внутри этого элемента.

Это корень документа.

Большой контейнер.

Цифровой чемодан.

Атрибут lang

Эта часть важна:

lang="ru"

Она говорит браузерам и вспомогательным технологиям, на каком языке написана страница.

Для английского:

<html lang="en">

Для итальянского:

<html lang="it">

Для польского:

<html lang="pl">

Для украинского:

<html lang="uk">

Для русского:

<html lang="ru">

Это помогает:

screen readers;
поисковым системам;
инструментам перевода;
доступности;
правильному произношению текста.

Маленький атрибут.

Большая польза.

В HTML много таких маленьких вещей.

Детали, которые тихо спасают тебя от будущей боли.

Элемент head

Элемент <head> содержит информацию о странице.

Пример:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Моя Страница</title>
</head>

Это содержимое обычно не видно прямо на странице.

Пользователь не видит <head> как обычный контент.

Но браузер его читает.

<head> — это backstage твоей веб-страницы.

Не видно зрителям.

Но очень важно.

Тег meta charset

Эта строка важна:

<meta charset="UTF-8">

Она говорит браузеру, какую кодировку символов использовать.

Используй UTF-8.

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

Без неё текст иногда может выглядеть сломанным.

Например, русские буквы, кириллица или символы могут превратиться в цифровые макароны.

Поэтому да:

<meta charset="UTF-8">

Всегда добавляй это.

Твой будущий многоязычный сайт скажет спасибо.

Тихо.

Но искренне.

Viewport Meta Tag

Эта строка тоже важна:

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

Она помогает странице правильно отображаться на телефонах и планшетах.

Без неё мобильные браузеры могут показывать страницу как маленькую desktop-версию, сжатую в экран телефона.

Очень неудобно.

Как читать газету через замочную скважину.

Viewport tag говорит браузеру:

Используй ширину устройства как ширину страницы.

Это основа responsive design.

Даже если CSS позже будет отвечать за внешний вид, HTML должен правильно подготовить страницу.

Сначала хорошая структура.

Потом красивый layout.

Элемент title

Элемент <title> задаёт название во вкладке браузера:

<title>Моя Страница</title>

Это не то же самое, что h1.

title появляется во вкладке браузера, закладках и результатах поиска.

h1 появляется внутри страницы.

Пример:

<title>Обо Мне</title>

А внутри body:

<h1>Обо Мне</h1>

Они могут быть похожими.

Но это не одно и то же.

Одно — для браузера и поисковых систем.

Другое — для контента страницы.

Элемент body

Элемент <body> содержит всё, что видно на странице:

<body>
  <h1>Добро пожаловать</h1>
  <p>Это моя веб-страница.</p>
</body>

Заголовки, абзацы, изображения, ссылки, списки, формы — всё идёт в body.

Если пользователь это видит, скорее всего, оно принадлежит body.

Body — это место, где живёт настоящая страница.

Head — комната планирования.

Body — сцена.

Отступы

HTML не требует идеальных отступов, чтобы работать.

Это работает:

<body><h1>Привет</h1><p>Текст</p></body>

Но выглядит плохо.

И читается сложнее.

Лучше так:

<body>
  <h1>Привет</h1>
  <p>Текст</p>
</body>

Отступы помогают людям видеть структуру.

Браузеры могут простить хаотичный HTML.

Люди — не всегда.

Особенно будущий ты в 23:47, который пытается понять собственный код.

HTML-Комментарии

В HTML можно писать комментарии:

<!-- Это комментарий -->

Комментарии не показываются на странице.

Они полезны для заметок:

<!-- Главный заголовок страницы -->
<h1>Добро пожаловать</h1>

Не злоупотребляй комментариями.

Хороший HTML должен быть понятным сам по себе.

Комментарии должны объяснять полезные вещи, а не украшать страницу как конфетти.

Создай Лучшую Страницу

Открой свой index.html из урока 1.

Замени его на это:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Моя HTML-Страница для Практики</title>
</head>
<body>
  <h1>Моя HTML-Страница для Практики</h1>
  <p>Эта страница имеет чистую HTML-структуру.</p>
  <p>Я изучаю, как браузеры понимают веб-страницы.</p>
</body>
</html>

Сохрани файл.

Открой или обнови его в браузере.

Страница всё ещё выглядит простой.

Это нормально.

Сегодня мы не украшаем.

Мы строим скелет.

Скелету пока не нужна шляпа.

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

Забыть DOCTYPE

Не начинай сразу с:

<html>

Используй:

<!DOCTYPE html>
<html lang="ru">

Браузер любит ясность.

Положить Видимый Контент в head

Это неправильно:

<head>
  <h1>Привет</h1>
</head>

Видимый контент принадлежит body:

<body>
  <h1>Привет</h1>
</body>

head — для информации о странице.

body — для видимого контента.

Забыть viewport

Без этого:

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

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

Добавь это сейчас.

Не жди, пока сайт будет выглядеть как почтовая марка на телефоне.

Практика

Создай новый файл:

touch structure.html

Внутри создай полный HTML-документ с:

DOCTYPE;
<html lang="ru">;
<head>;
meta charset;
viewport;
title;
<body>;
одним h1;
двумя абзацами;
одним 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>Эта страница помогает мне понять HTML-структуру.</p>
  <p>Хорошая структура делает страницы легче для чтения и поддержки.</p>
</body>
</html>

Открой его в браузере.

Потом измени title и обнови страницу.

Посмотри, как меняется вкладка браузера.

Маленькая вещь.

Настоящий результат.

Мини-Задание

Создай файл:

profile.html

Построй валидный HTML-документ для простой страницы профиля.

Он должен содержать:

правильную структуру документа;
атрибут языка;
title страницы;
главный заголовок;
три абзаца о себе или вымышленном человеке;
один комментарий перед основным контентом.

Без CSS.

Без JavaScript.

Только чистый HTML.

Потому что прежде чем надевать странице пиджак, нужно правильно поставить кости.

Итог

Сегодня ты узнал, что:

<!DOCTYPE html> говорит браузеру использовать современный HTML;
<html> — корневой элемент;
lang указывает язык страницы;
<head> содержит информацию о странице;
<body> содержит видимый контент;
meta charset="UTF-8" помогает правильно показывать текст;
viewport meta tag помогает страницам работать на телефонах;
<title> задаёт название вкладки браузера;
отступы делают HTML легче для чтения;
комментарии могут добавлять полезные заметки.

HTML-структура может выглядеть простой.

Но именно эта простая структура — начало каждой хорошей веб-страницы.

Следующий Урок

В следующем уроке мы поработаем с текстом, заголовками и абзацами.

Научимся организовывать контент так, чтобы страница не выглядела так, будто кто-то сбросил слова с балкона.