Структура HTML документа (doctype, html, head, body) [Модуль 1: Основы HTML-разметки]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

На этой странице вы потренируетесь в самом фундаменте — правильном оформлении структуры HTML-документа. Вы шаг за шагом добавите декларацию doctype, корневой тег <html>, разделы <head> и <body>, метатеги, комментарии и другие обязательные элементы, без которых ни один современный документ не считается валидным. Задания идут от простого к сложному: сначала вы вставите одиночный пропуск, а к финалу встретите несколько пропусков в одном фрагменте кода. После каждого ввода запускайте результат и проверяйте, как страница отображается в небольшом iframe (372 × 300 px) — если структура собрана верно, в окне появится ожидаемый текст или картинка, а в консоли не будет ошибок разметки.

Список тем

Укажите декларацию doctype

id: 37779_struct-doctype

Чтобы браузер рендерил страницу в режиме стандартов, документу необходим doctype. Добавьте его в начале разметки так, чтобы далее корректно отобразился абзац с текстом.

CSS

body {
  font-family: Arial, sans-serif;
  color: #333;
}

                     input1
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <p>Привет, мир!</p>
</body>
</html>

HTML

input1
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <p>Привет, мир!</p>
</body>
</html>

В HTML5 используется короткая запись <!DOCTYPE html>. Декларация должна стоять первой строкой, без отступов и находиться вне любых других тегов.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Добавьте корневой тег html с указанием языка

id: 37779_struct-html-lang

Теперь нужно объявить основной корневой элемент страницы и указать браузеру, что контент написан на русском языке.

CSS

body {
  font-family: Arial, sans-serif;
  background:#fafafa;
  margin: 0;
  padding: 12px;
}

                     <!DOCTYPE html>
input1
<head>
  <meta charset="UTF-8">
</head>
<body>
  <p>Документ с определённым языком.</p>
</body>
input2

HTML

<!DOCTYPE html>
input1
<head>
  <meta charset="UTF-8">
</head>
<body>
  <p>Документ с определённым языком.</p>
</body>
input2

Используйте тег <html> с атрибутом lang="ru". Не забудьте закрывающий тег перед концом файла.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Создайте раздел head и укажите заголовок страницы

id: 37779_struct-head-title

В разделе head обычно располагаются метаданные. Добавьте сам раздел, а также заголовок окна браузера.

CSS

h1 {
  font-size: 20px;
  margin: 0;
}

                     <!DOCTYPE html>
<html lang="ru">
input1
  input3Моя первая страницаinput4
  <meta charset="UTF-8">
input2
<body>
  <h1>Пример</h1>
</body>
</html>

HTML

<!DOCTYPE html>
<html lang="ru">
input1
  input3Моя первая страницаinput4
  <meta charset="UTF-8">
input2
<body>
  <h1>Пример</h1>
</body>
</html>

Нужны теги <head> и </head>, внутри которых находится <title>Заголовок</title>.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Добавьте раздел body

id: 37779_struct-body

Без раздела body браузер не сможет отрисовать содержимое. Вставьте открывающий и закрывающий тег body, чтобы появился текст приветствия.

CSS

body {
  background:#e3f2fd;
  padding: 10px;
}

                     <!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Body test</title>
</head>
input1
  <p>Содержимое страницы.</p>
input2
</html>

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Body test</title>
</head>
input1
  <p>Содержимое страницы.</p>
input2
</html>

Используются теги <body> и </body>, которые идут сразу после закрытия head и до закрытия html.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Добавьте метатег viewport

id: 37779_struct-meta-viewport

Чтобы страница корректно масштабировалась на мобильных устройствах, добавьте метатег viewport в head.

CSS

body {font-size:14px;}

                     <!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  input1
  <title>Meta viewport</title>
</head>
<body>
  <p>Проверьте адаптивность!</p>
</body>
</html>

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  input1
  <title>Meta viewport</title>
</head>
<body>
  <p>Проверьте адаптивность!</p>
</body>
</html>

Используйте строку <meta name="viewport" content="width=device-width, initial-scale=1.0"> сразу после charset.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Вставьте комментарий в head

id: 37779_struct-comment

Комментарии помогают другим разработчикам разобраться в коде. Добавьте комментарий в head, не влияя на отображение страницы.

CSS

body {color:#555;}

                     <!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  input1
  <title>Комментарии</title>
</head>
<body>
  <p>Комментарии не видны в окне браузера.</p>
</body>
</html>

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  input1
  <title>Комментарии</title>
</head>
<body>
  <p>Комментарии не видны в окне браузера.</p>
</body>
</html>

HTML-комментарий начинается с .

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Закройте все незакрытые теги

id: 37779_struct-close-tags

В этом фрагменте специально пропущены несколько закрывающих тегов. Исправьте структуру, добавив недостающие закрытия.

CSS

p {margin:0;}

                     <!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Закрыть теги</title>
input1
<body>
  <p>Страница должна быть валидной.</p>
input2
input3

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Закрыть теги</title>
input1
<body>
  <p>Страница должна быть валидной.</p>
input2
input3

Сначала закройте head, затем body, а в самом конце html. Порядок важен!

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Разместите картинку внутри body

id: 37779_struct-img

Финальное задание: добавьте изображение и подпись так, чтобы всё лежало внутри корректно оформленного тела документа.

CSS

img {
  max-width: 100%;
  border-radius: 4px;
}

                     <!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Изображение</title>
</head>
input1
  <img src="https://naytikurs.ru/img/1.png" alt="Демо картинка">
  <p>Картинка успешно загружена!</p>
input2
</html>

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Изображение</title>
</head>
input1
  <img src="https://naytikurs.ru/img/1.png" alt="Демо картинка">
  <p>Картинка успешно загружена!</p>
input2
</html>

Используйте тег <img> с обязательным атрибутом alt. Ссылку на картинку оставьте как есть, дописывать её не нужно.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку