Подчеркивание и перечеркивание (u, s, del, ins) [Модуль 2: Форматирование текста]: Тренажер HTML

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

В этом тренажёре вы потренируетесь работать с тегами подчеркивания и перечёркивания: u, s, del и ins. Они выглядят похоже, но несут разный смысл. u используется для неявной аннотации текста (например, для выделения имен собственных или орфографических ошибок), s — для текста, который больше не актуален или не соответствует действительности, а del/ins применяются для явной фиксации правок: удалённые и добавленные фрагменты соответственно. Теги del и ins могут содержать метаданные: атрибут datetime (дата изменения в формате ISO 8601 ⓘ). Вас ждут задания от простого к сложному: от подчёркивания одного слова и зачёркивания устаревшего фрагмента до оформления правок с датами, комбинирования тегов и вложенности. Каждое упражнение даёт готовый CSS и фрагмент HTML с пропусками, которые нужно заполнить. Работайте внимательно с семантикой: у тега s одна цель, у del/ins — другая. Помните про узкую область предпросмотра (до 372px), так что элементы будут адаптивными.

Список тем

Подчеркни важное слово

id: 37791_t-u-basic

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

CSS

.wrap {
  max-width: 360px;
  margin: 10px auto;
  font-family: system-ui, Arial, sans-serif;
  line-height: 1.45;
}
u {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}
p { margin: 0; }

                     <div class="wrap">
  <p>Это <input1>Важно</input2> сообщение.</p>
</div>

HTML

<div class="wrap">
  <p>Это <input1>Важно</input2> сообщение.</p>
</div>

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

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

Результат

Сообщения

Выполнить

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

Зачеркни устаревшую часть текста

id: 37791_t-s-basic

В тексте есть слово, которое больше не актуально и должно отображаться зачёркнутым. Отредактируйте HTML так, чтобы только указанное слово было перечёркнуто, а остальное осталось без изменений.

CSS

.wrap {
  max-width: 360px;
  margin: 10px auto;
  font-family: system-ui, Arial, sans-serif;
}
s {
  color: #6b7280;
  text-decoration-color: #6b7280;
}
p { line-height: 1.45; margin: 0; }

                     <div class="wrap">
  <p>Это устаревшая <input1>инструкция</input2>.</p>
</div>

HTML

<div class="wrap">
  <p>Это устаревшая <input1>инструкция</input2>.</p>
</div>

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

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

Результат

Сообщения

Выполнить

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

Фиксация изменения цены: было/стало

id: 37791_t-del-ins-price

Нужно отметить старую цену как удалённую и новую как добавленную. После выполнения старое значение должно быть зачёркнуто соответствующим тегом правок, а новое — отображаться как добавление. Структура и пробелы должны сохраниться.

CSS

.price {
  max-width: 360px;
  margin: 10px auto;
  font-family: system-ui, Arial, sans-serif;
  display: flex;
  gap: 6px;
  align-items: baseline;
  flex-wrap: wrap;
}
.price .old del { color: #b91c1c; }
.price .new ins { color: #065f46; background: rgba(16,185,129,0.08); padding: 0 2px; border-radius: 2px; }
span { line-height: 1.4; }

                     <div class="price">
  <span>Цена:</span>
  <span class="old"><input1>1999 ₽</input2></span>
  <span class="arrow">→</span>
  <span class="new"><input3>1499 ₽</input4></span>
</div>

HTML

<div class="price">
  <span>Цена:</span>
  <span class="old"><input1>1999 ₽</input2></span>
  <span class="arrow">→</span>
  <span class="new"><input3>1499 ₽</input4></span>
</div>

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

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

Результат

Сообщения

Выполнить

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

Подчеркни часть заголовка

id: 37791_t-u-heading-part

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

CSS

.box {
  max-width: 360px;
  margin: 10px auto;
  font-family: system-ui, Arial, sans-serif;
}
h3 { margin: 0; font-size: 18px; line-height: 1.25; }
u { text-decoration: underline; text-underline-offset: 2px; }

                     <div class="box">
  <h3 class="title">Супер <input1>новинка</input2> недели</h3>
</div>

HTML

<div class="box">
  <h3 class="title">Супер <input1>новинка</input2> недели</h3>
</div>

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

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

Результат

Сообщения

Выполнить

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

Правка даты с атрибутом времени

id: 37791_t-del-ins-datetime

В тексте показана устаревшая и новая дата. Необходимо отметить старую дату как удалённую, а новую как добавленную, и указать время изменений через атрибут, содержащий дату в стандартизированном формате.

CSS

.wrap {
  max-width: 360px;
  margin: 10px auto;
  font-family: system-ui, Arial, sans-serif;
}
.delins del { color: #b91c1c; }
.delins ins { color: #065f46; background: rgba(16,185,129,0.08); padding: 0 2px; border-radius: 2px; }
p { margin: 0; line-height: 1.45; }

                     <div class="wrap delins">
  <p>Дата релиза: <input1 datetime="input2">01.02.2024</input3> → <input4 datetime="input5">05.03.2024</input6></p>
</div>

HTML

<div class="wrap delins">
  <p>Дата релиза: <input1 datetime="input2">01.02.2024</input3> → <input4 datetime="input5">05.03.2024</input6></p>
</div>

Оберните старую дату в тег для удалённых правок, новую — в тег для добавленных. Добавьте к обоим тегам атрибут даты и времени в формате ISO 8601 (например, ГГГГ-ММ-ДД или со временем ГГГГ-ММ-ДДTЧЧ:ММ).

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

Результат

Сообщения

Выполнить

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

Комбинация: зачеркни статус и подчеркни метку

id: 37791_t-combo-u-s-status

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

CSS

.wrap {
  max-width: 360px; margin: 10px auto; font-family: system-ui, Arial, sans-serif;
}
s { color: #6b7280; }
u { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 2px; }
p { margin: 0; line-height: 1.45; }

                     <div class="wrap">
  <p>Статус: <input1>архив</input2>. Метка: <input3>ВНИМАНИЕ</input4></p>
</div>

HTML

<div class="wrap">
  <p>Статус: <input1>архив</input2>. Метка: <input3>ВНИМАНИЕ</input4></p>
</div>

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

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

Результат

Сообщения

Выполнить

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

Список изменений: было/стало

id: 37791_t-list-changes

В списке укажите, что старые значения заменены новыми. Необходимо пометить прежние варианты как удалённые, а новые — как добавленные. Сохраните читаемость строк и стрелки перехода.

CSS

.log {
  max-width: 360px; margin: 10px auto; font-family: system-ui, Arial, sans-serif;
}
ul { padding-left: 18px; margin: 0; }
li { margin: 6px 0; line-height: 1.45; }
del { color: #b91c1c; }
ins { color: #065f46; background: rgba(16,185,129,0.08); padding: 0 2px; border-radius: 2px; }

                     <div class="log">
  <ul class="changelog">
    <li>Цвет: <input1>синий</input2> → <input3>зелёный</input4></li>
    <li>Размер: <input5>M</input6> → <input7>L</input8></li>
  </ul>
</div>

HTML

<div class="log">
  <ul class="changelog">
    <li>Цвет: <input1>синий</input2> → <input3>зелёный</input4></li>
    <li>Размер: <input5>M</input6> → <input7>L</input8></li>
  </ul>
</div>

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

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

Результат

Сообщения

Выполнить

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

Подпись к изображению с подчёркиванием

id: 37791_t-figure-caption

Нужно подчеркнуть ключевое слово в подписи к изображению. Изображение уже вставлено и менять его не нужно. Ваша задача — корректно выделить слово в подписи, не нарушая структуру figure/figcaption.

CSS

.card { max-width: 360px; margin: 10px auto; font-family: system-ui, Arial, sans-serif; }
figure { margin: 0; }
img { max-width: 100%; height: auto; display: block; border-radius: 6px; }
figcaption { font-size: 14px; color: #374151; margin-top: 6px; line-height: 1.35; }
u { text-decoration: underline; text-underline-offset: 2px; }

                     <figure class="card">
  <img src="https://naytikurs.ru/img/4.png" alt="Пример товара" />
  <figcaption><input1>Новинка</input2>: компактная модель 2025</figcaption>
</figure>

HTML

<figure class="card">
  <img src="https://naytikurs.ru/img/4.png" alt="Пример товара" />
  <figcaption><input1>Новинка</input2>: компактная модель 2025</figcaption>
</figure>

Работайте только с подписью: оберните ключевое слово в тег подчёркивания. Не изменяйте тег img и его атрибуты. Убедитесь, что открывающий и закрывающий теги стоят на своих местах.

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

Результат

Сообщения

Выполнить

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

Замена слова в фразе с пометкой правок

id: 37791_t-phrase-replace

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

CSS

.wrap { max-width: 360px; margin: 10px auto; font-family: system-ui, Arial, sans-serif; }
del { color: #b91c1c; }
ins { color: #065f46; background: rgba(16,185,129,0.08); padding: 0 2px; border-radius: 2px; }
p { margin: 0; line-height: 1.45; }

                     <div class="wrap">
  <p>Правила: вход <input1>свободный</input2> → <input3>платный</input4></p>
</div>

HTML

<div class="wrap">
  <p>Правила: вход <input1>свободный</input2> → <input3>платный</input4></p>
</div>

Используйте del для удалённого слова и ins для нового. Оберните каждое нужное слово соответствующим парным тегом. Следите за парностью и границами выделения.

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

Результат

Сообщения

Выполнить

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

Подчеркни и зачеркни разные части одной строки

id: 37791_t-mixed-one-line

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

CSS

.wrap { max-width: 360px; margin: 10px auto; font-family: system-ui, Arial, sans-serif; }
s { color: #6b7280; }
u { text-decoration: underline; text-underline-offset: 2px; }
p { margin: 0; line-height: 1.45; }

                     <div class="wrap">
  <p>Статус: <input1>черновик</input2>. Важное: <input3>сроки</input4>.</p>
</div>

HTML

<div class="wrap">
  <p>Статус: <input1>черновик</input2>. Важное: <input3>сроки</input4>.</p>
</div>

Оберните старый статус в тег перечёркивания (он для неактуального текста). Важное слово оберните в тег подчёркивания. Убедитесь, что парные теги стоят правильно.

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

Результат

Сообщения

Выполнить

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

Атрибут даты у правок: имя атрибута

id: 37791_t-attr-name-datetime

Нужно добавить атрибут даты и времени к тегам правок. Значения уже проставлены в формате даты. Ваша задача — указать корректное имя атрибута у обоих тегов, не меняя содержимое.

CSS

.wrap { max-width: 360px; margin: 10px auto; font-family: system-ui, Arial, sans-serif; }
del { color: #b91c1c; }
ins { color: #065f46; background: rgba(16,185,129,0.08); padding: 0 2px; border-radius: 2px; }
p { margin: 0; line-height: 1.45; }

                     <div class="wrap">
  <p>Сроки: <del <input1>="2024-10-01">октябрь</del> → <ins <input2>="2024-12-15">декабрь</ins></p>
</div>

HTML

<div class="wrap">
  <p>Сроки: <del <input1>="2024-10-01">октябрь</del> → <ins <input2>="2024-12-15">декабрь</ins></p>
</div>

У тегов del и ins есть атрибут даты и времени правки. Добавьте имя атрибута к каждому тегу. Имя атрибута нечувствительно к регистру, но традиционно пишут строчными буквами.

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

Результат

Сообщения

Выполнить

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

Вложенность: подчеркни добавленный статус

id: 37791_t-nested-del-ins-u

Нужно показать, что старый статус удалён, а новый добавлен и дополнительно подчеркнут. Реализуйте это корректной вложенностью тегов, чтобы добавленный статус был и отмечен как добавление, и подчеркнут.

CSS

.wrap { max-width: 360px; margin: 10px auto; font-family: system-ui, Arial, sans-serif; }
del { color: #b91c1c; }
ins { color: #065f46; background: rgba(16,185,129,0.08); padding: 0 2px; border-radius: 2px; }
u { text-decoration: underline; text-underline-offset: 2px; }
p { margin: 0; line-height: 1.45; }

                     <div class="wrap">
  <p>Статус: <input1>Неактуально</input2>; новый: <input3><input4>Актуально</input5></input6></p>
</div>

HTML

<div class="wrap">
  <p>Статус: <input1>Неактуально</input2>; новый: <input3><input4>Актуально</input5></input6></p>
</div>

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

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

Результат

Сообщения

Выполнить

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