#3. Структура HTML-документа: <!DOCTYPE html>, html, head, body, комментарии

У любой HTML-страницы есть обязательный «скелет», на котором всё остальное держится. Создайте файл с таким содержимым — это минимальная рабочая страница:

Минимальный документ

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Моя первая страница</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это моя первая HTML-страница.</p>
</body>
</html>

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

Разбор по частям

• <!DOCTYPE html> — объявление типа документа. Это не тег, а специальная первая строка, которая говорит браузеру: работаем по современному стандарту (HTML5). Без неё браузер может включить устаревший «режим совместимости» и отображать страницу неправильно.
• <html> — корневой тег: всё содержимое страницы находится внутри него. Атрибут lang="ru" сообщает язык страницы (для браузеров и поисковых систем).
• <head> — служебная информация о странице, которая не отображается на ней самой: заголовок вкладки (title), кодировка (meta charset), подключение стилей и другие метатэги — о них подробно в следующем уроке.
• <body> — видимое содержимое: текст, картинки, ссылки — всё, что видит пользователь.

Комментарии

Комментарий начинается с <!-- и заканчивается -->. Браузер его не отображает — комментарии нужны для заметок себе или другим разработчикам:

<!-- Здесь будет шапка сайта -->
<p>Обычный абзац</p>

Учтите: комментарий не виден на странице, но виден в исходном коде (в браузере — Ctrl+U), поэтому не пишите в них ничего секретного.

Практика

Создайте в папке вашего виртуального хоста (см. урок #0) файл index.html, вставьте в него минимальный документ, замените текст на свой и откройте страницу в браузере. Попробуйте также написать комментарий и убедитесь, что он не отображается.