Правильное вложение элементов [Модуль 1: Основы HTML-разметки]: Тренажер HTML

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

В этом блоке заданий вы потренируетесь в правильном вложении HTML-элементов. Вначале вспомним простые правила (списки в навигации, абзацы в статье), а затем перейдём к более сложным случаям: семантические теги header/main/footer, figure с изображением и подписью, а также корректное построение таблицы и формы. Все примеры уже имеют готовые стили — вам остаётся лишь заполнить пропуски так, чтобы структура была валидной, а макет выглядел аккуратно в окне предпросмотра (ширина 372 px). Выполняйте задания последовательно: сложность растёт от базовой до продвинутой, поэтому каждое следующее упражнение опирается на предыдущие знания. Не торопитесь — внимательно проверяйте, что открывающий и закрывающий теги совпадают и располагаются в нужном контейнере.

Список тем

Навигационное меню

id: 37785_nesting-01

Создайте ненумерованный список внутри тега nav. После выполнения пункты меню должны выстроиться горизонтально на зелёном фоне.

CSS

.main-nav {
  background:#2ecc71;
  padding:8px;
}
.main-nav ul {
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  gap:10px;
}
.main-nav li{color:#fff;}

                     <nav class="main-nav">
  <input1>
    <li>Главная</li>
    <li>О нас</li>
    <li>Контакты</li>
  </input2>
</nav>

HTML

<nav class="main-nav">
  <input1>
    <li>Главная</li>
    <li>О нас</li>
    <li>Контакты</li>
  </input2>
</nav>

Внутри навигации допустим только один корневой список. Добавьте открывающий и закрывающий тег списка одного уровня. Используйте семантически верный ul.

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

Результат

Сообщения

Выполнить

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

Абзацы в статье

id: 37785_nesting-02

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

CSS

.post{font-family:Arial, sans-serif;line-height:1.4}
.post h2{margin-top:0}

                     <article class="post">
  <h2>Заголовок статьи</h2>
  <input1>Первый абзац статьи.</p>
  <p>Второй абзац статьи.</p>
</article>

HTML

<article class="post">
  <h2>Заголовок статьи</h2>
  <input1>Первый абзац статьи.</p>
  <p>Второй абзац статьи.</p>
</article>

Для текста статьи используйте тег р. Он должен открываться до текста и закрываться после него.

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

Результат

Сообщения

Выполнить

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

Ссылка в пункте списка

id: 37785_nesting-03

Вставьте тег, чтобы текст «Сайт» стал ссылкой внутри элемента списка.

CSS

.social li{display:inline-block;margin-right:8px}
.social a{color:#3498db;text-decoration:none}

                     <ul class="social">
  <li>
    <input1 href="https://example.com">Сайт</a>
  </li>
</ul>

HTML

<ul class="social">
  <li>
    <input1 href="https://example.com">Сайт</a>
  </li>
</ul>

Ссылки создаются тегом a. Он должен располагаться внутри li, а не наоборот.

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

Результат

Сообщения

Выполнить

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

Figure и подпись к изображению

id: 37785_nesting-04

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

CSS

.photo{max-width:100%;text-align:center}
.photo img{width:100%;display:block}
.photo figcaption{font-size:14px;color:#555}

                     <input1 class="photo">
  <img src="https://naytikurs.ru/img/4.png" alt="Море" width="100%">
  <input2>Красивый пейзаж</figcaption>
</figure>

HTML

<input1 class="photo">
  <img src="https://naytikurs.ru/img/4.png" alt="Море" width="100%">
  <input2>Красивый пейзаж</figcaption>
</figure>

Сначала откройте figure, затем figcaption. Оба тега должны быть закрыты в правильном порядке.

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

Результат

Сообщения

Выполнить

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

Тело таблицы

id: 37785_nesting-05

Завершите структуру таблицы, добавив контейнер для строк данных.

CSS

.price{border-collapse:collapse;width:100%}
.price th,.price td{border:1px solid #ccc;padding:4px;text-align:left}

                     <table class="price">
  <thead>
    <tr><th>Услуга</th><th>Цена</th></tr>
  </thead>
  <input1>
    <tr><td>Верстка</td><td>5000 ₽</td></tr>
    <tr><td>Дизайн</td><td>7000 ₽</td></tr>
  </input2>
</table>

HTML

<table class="price">
  <thead>
    <tr><th>Услуга</th><th>Цена</th></tr>
  </thead>
  <input1>
    <tr><td>Верстка</td><td>5000 ₽</td></tr>
    <tr><td>Дизайн</td><td>7000 ₽</td></tr>
  </input2>
</table>

Все строки данных должны находиться внутри tbody. Не забудьте открыть и закрыть тег.

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

Результат

Сообщения

Выполнить

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

Метка для поля ввода

id: 37785_nesting-06

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

CSS

.subscribe{display:flex;flex-direction:column;gap:6px}
.subscribe input{padding:6px}

                     <form class="subscribe">
  <input1 for="email">Город:</label>
  <input type="email" id="email" placeholder="Москва">
  <button>Отправить</button>
</form>

HTML

<form class="subscribe">
  <input1 for="email">Город:</label>
  <input type="email" id="email" placeholder="Москва">
  <button>Отправить</button>
</form>

Используйте тег label c атрибутом for, совпадающим с id поля ввода.

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

Результат

Сообщения

Выполнить

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

Вложенный список

id: 37785_nesting-07

Создайте вложенный список внутри второго пункта плана обучения.

CSS

.plan{counter-reset:step}
.plan>li{margin-bottom:6px}
.plan ul{list-style:circle;margin-left:18px}

                     <ol class="plan">
  <li>Изучить HTML</li>
  <li>Изучить CSS
    <input1>
      <li>Flexbox</li>
      <li>Grid</li>
    </input2>
  </li>
  <li>Практиковаться</li>
</ol>

HTML

<ol class="plan">
  <li>Изучить HTML</li>
  <li>Изучить CSS
    <input1>
      <li>Flexbox</li>
      <li>Grid</li>
    </input2>
  </li>
  <li>Практиковаться</li>
</ol>

Вложенные списки обычно делают ul внутри li. Не забудьте открыть и закрыть тег.

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

Результат

Сообщения

Выполнить

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

Семантический header

id: 37785_nesting-08

Добавьте контейнер header, чтобы логотип располагался в шапке сайта.

CSS

.site-header{background:#34495e;color:#fff;padding:10px;text-align:center}

                     <input1 class="site-header">
  <h1>Мой блог</h1>
</header>

HTML

<input1 class="site-header">
  <h1>Мой блог</h1>
</header>

Семантические секции header, main, footer помогают описать структуру страницы. В этом задании нужен только header.

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

Результат

Сообщения

Выполнить

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

Видео с подписью

id: 37785_nesting-09

Добавьте тег для подписи к видео в figure, чтобы описание появилось под плеером.

CSS

.video-block video{width:100%}
.video-block figcaption{font-size:13px;text-align:center;color:#666}

                     <figure class="video-block">
  <video src="https://naytikurs.ru/img/1.mp4" controls width="100%"></video>
  <input1>Демо видео</figcaption>
</figure>

HTML

<figure class="video-block">
  <video src="https://naytikurs.ru/img/1.mp4" controls width="100%"></video>
  <input1>Демо видео</figcaption>
</figure>

Подписывайте медиа-контент тегом figcaption, расположеным сразу после видео.

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

Результат

Сообщения

Выполнить

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

Закрываем внутренний контейнер

id: 37785_nesting-10

Закройте внутренний контейнер content, чтобы карточка отображалась корректно без нарушений вёрстки.

CSS

.card{border:1px solid #ddd;padding:10px;border-radius:4px}
.card h3{margin-top:0}

                     <section class="card">
  <div class="content">
    <h3>Заголовок</h3>
    <p>Текст внутри карточки.</p>
  </input1>
</section>

HTML

<section class="card">
  <div class="content">
    <h3>Заголовок</h3>
    <p>Текст внутри карточки.</p>
  </input1>
</section>

Не забывайте закрывать все div-блоки. Вложенные элементы должны закрываться раньше, чем их родительские.

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

Результат

Сообщения

Выполнить

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