Структура документа: DOCTYPE, html, head, body
Создайте корректный документ HTML5 с нуля: объявление DOCTYPE, корневой элемент html, head для метаданных и body для содержимого.
«Структура документа: DOCTYPE, html, head, body» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
У каждого HTML-документа один и тот же каркас
Корректный документ HTML5 всегда начинается с объявления DOCTYPE, содержит корневой элемент html, а внутри него — раздел head для метаданных и раздел body для видимого содержимого. Понимание этой структуры — первый шаг.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>Объявление DOCTYPE
<!DOCTYPE html> — это не тег HTML, а инструкция браузеру отображать страницу в режиме стандартов. Без него браузеры переходят в «режим причуд», из-за чего страницы отображаются по-разному. Всегда размещайте его в строке 1.
Элемент <html> и атрибут lang
Элемент <html> является корневым элементом документа. Добавьте атрибут lang, чтобы указать язык страницы. Программы чтения с экрана используют его для выбора правильного механизма произношения, а поисковые системы — для показа локализованных результатов.
<html lang="en">
<!-- or -->
<html lang="fr">
<html lang="de">Элемент <head>
В элементе <head> содержатся метаданные — информация о странице, а не само её содержимое. Ничего внутри head не видно пользователям напрямую, но это влияет на то, как браузер и поисковые системы обрабатывают страницу.
Мета-теги charset и viewport
<meta charset="UTF-8"> сообщает браузеру, что файл нужно декодировать в UTF-8, поддерживая все международные символы. <meta name="viewport"> обеспечивает работу адаптивного дизайна на мобильных устройствах.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Элемент <title>
Текст элемента <title> отображается на вкладке браузера, в закладках и результатах поисковых систем. Делайте его кратким (50–60 символов), описательным и указывайте название бренда в конце.
<title>Getting Started with HTML | CoddyKit</title>Подключение CSS и шрифтов
Подключайте внешние таблицы стилей с помощью <link> внутри head. Используйте rel="stylesheet" и правильный href. Google Fonts и другие сервисы шрифтов подключаются таким же способом.
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">Элемент <body>
Всё видимое на странице находится внутри <body>: заголовки, абзацы, изображения, кнопки, формы и скрипты. Body — это то, что пользователь видит и с чем взаимодействует.
Теги скриптов: где их размещать
Размещайте <script src="app.js" defer></script> в элементе <head>. Атрибут defer загружает скрипт параллельно и выполняет его после полного разбора HTML — это наиболее безопасный вариант по умолчанию.
<head>
<script src="app.js" defer></script>
</head>Комментарии в HTML
Используйте <!-- comment -->, чтобы добавлять примечания в HTML. Комментарии не отображаются пользователям, но видны при просмотре исходного кода. Используйте их, чтобы объяснять назначение кода, отмечать разделы или временно отключать код во время отладки.
<!-- Navigation section -->
<nav>
...
</nav>
<!-- End navigation -->Проверка: валидатор W3C
Вставьте HTML в validator.w3.org, чтобы проверить наличие ошибок. Корректный HTML уменьшает несогласованность между браузерами, помогает программам чтения с экрана правильно разбирать страницу и свидетельствует о профессиональном качестве работы.
Быстрая проверка
Где следует разместить тег <meta charset="UTF-8">?
Итоги: каркас HTML-документа
Каждому HTML-файлу нужны: → →
(кодировка, область просмотра, заголовок, ссылки на CSS) → (всё видимое содержимое). Этот каркас обеспечивает единообразие в разных браузерах, доступность и корректную индексацию поисковыми системами.Часто задаваемые вопросы
Урок «Структура документа: DOCTYPE, html, head, body» бесплатный?
Да — полный текст урока «Структура документа: DOCTYPE, html, head, body» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Структура документа: DOCTYPE, html, head, body»?
Создайте корректный документ HTML5 с нуля: объявление DOCTYPE, корневой элемент html, head для метаданных и body для содержимого. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Структура документа: DOCTYPE, html, head, body»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Структура документа: DOCTYPE, html, head, body
- Семантические теги: header, nav, main, article, footer
- Текст, изображения, ссылки и списки
- Формы: input, label, button