Курсив (i и em) [Модуль 2: Форматирование текста]: Тренажер HTML

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

Тема урока — курсив и смысловой акцент с помощью элементов i и em. Оба по умолчанию отображаются наклонным начертанием, но их назначение различается: i — это визуальное выделение без изменения смысла (иноязычные слова, термины, названия судов и т.п.), а em — смысловой акцент, который влияет на интонацию и важность фразы. Вложенные уровни акцента усиливают смысл (em внутри em). Это полезно для доступности: экранные читатели могут передавать em голосом. В заданиях вы будете оборачивать отдельные слова и фразы нужными парными тегами, работать внутри абзацев, цитат, подписей к изображениям и небольших карточек. Постепенно появится вложенность и смешанное использование i и em в одном предложении. Следите за корректной парностью и порядком закрытия элементов, не меняйте адреса изображений и не добавляйте лишние атрибуты. Если встречаются термины, ориентируйтесь на семантику (ⓘ): используйте i для стилистического, а em — для логического акцента. В результате вы закрепите базовые приёмы работы с курсивным выделением и научитесь различать визуальный и смысловой акцент.

Список тем

Выделите одно слово курсивом

id: 37790_html-i-em-01-one-word-i

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

CSS

* { box-sizing: border-box; }
body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.45; padding: 12px; color: #222; }
.wrap { max-width: 360px; margin: 0 auto; }
p { margin: 0; }
i, em { font-style: italic; }
i { color: #7c3aed; }

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

HTML

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

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

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

Результат

Сообщения

Выполнить

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

Смысловой акцент внутри предложения

id: 37790_html-i-em-02-phrase-em

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

CSS

body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; padding: 12px; }
p { max-width: 360px; margin: 0 auto; line-height: 1.45; }
em { background: #fff3cd; padding: 0 2px; border-radius: 2px; }
i { color: #6b7280; }

                     <p>Это <input1>очень важно</input2> для всех.</p>

HTML

<p>Это <input1>очень важно</input2> для всех.</p>

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

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

Результат

Сообщения

Выполнить

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

Двойной акцент: вложенный курсив

id: 37790_html-i-em-03-nested-em

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

CSS

body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; padding: 12px; }
p { max-width: 360px; margin: 0 auto; line-height: 1.45; }
em { font-style: italic; background: #f1f5f9; padding: 0 2px; border-radius: 2px; }
em em { color: #b91c1c; font-weight: 600; background: #fee2e2; }

                     <p><input1>Важно: <input2>очень</input3> важно</input4> соблюдать сроки.</p>

HTML

<p><input1>Важно: <input2>очень</input3> важно</input4> соблюдать сроки.</p>

Используйте вложение одинаковых элементов логического акцента: внешний для всей фразы и внутренний для слова. Помните про вложенность: сначала закрывается внутренний элемент, затем внешний. В CSS усиление часто делают селектором вида em em.

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

Результат

Сообщения

Выполнить

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

Иноязычное слово и рекламный акцент

id: 37790_html-i-em-04-mix-foreign-and-em

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

CSS

body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; padding: 12px; }
p { max-width: 360px; margin: 0 auto; line-height: 1.45; }
i { color: #374151; font-style: italic; }
.promo em { background: #e7f5ff; color: #0b7285; padding: 0 3px; border-radius: 3px; }
.promo { display: inline-block; }

                     <p>Иностранное слово: <input1>bonjour</input2>. <span class="promo"><input3>Не пропустите</input4> распродажу!</span></p>

HTML

<p>Иностранное слово: <input1>bonjour</input2>. <span class="promo"><input3>Не пропустите</input4> распродажу!</span></p>

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

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

Результат

Сообщения

Выполнить

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

Акцент в цитате

id: 37790_html-i-em-05-quote-emphasis

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

CSS

body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; padding: 12px; }
blockquote { max-width: 360px; margin: 0 auto; padding: 8px 10px; background: #f8fafc; border-left: 4px solid #94a3b8; }
blockquote em { background: #fee2e2; color: #b91c1c; padding: 0 2px; border-radius: 2px; }

                     <blockquote>«Сделать просто — <input1>сложно</input2>»</blockquote>

HTML

<blockquote>«Сделать просто — <input1>сложно</input2>»</blockquote>

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

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

Результат

Сообщения

Выполнить

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

Курсивная подпись под изображением

id: 37790_html-i-em-06-figure-caption

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

CSS

body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; padding: 12px; }
.photo { max-width: 360px; margin: 0 auto; }
.photo img { width: 100%; height: auto; display: block; border-radius: 6px; }
figcaption { text-align: center; margin-top: 6px; color: #374151; }
figcaption i { color: #6b7280; }

                     <figure class="photo">
  <img src="https://naytikurs.ru/img/7.png" alt="Горы на рассвете">
  <figcaption><input1>Вид на горы</input2></figcaption>
</figure>

HTML

<figure class="photo">
  <img src="https://naytikurs.ru/img/7.png" alt="Горы на рассвете">
  <figcaption><input1>Вид на горы</input2></figcaption>
</figure>

Подписи к изображениям размещают в figcaption. Для чисто визуального оформления используйте курсивный парный элемент. Не изменяйте src и alt у тега img — оборачивайте только текст подписи.

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

Результат

Сообщения

Выполнить

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

Подчеркнуть важность в примечании

id: 37790_html-i-em-07-note-important

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

CSS

.note { max-width: 360px; margin: 0 auto; padding: 8px 10px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 6px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.note strong { color: #9a3412; }
.note em { background: #fde68a; padding: 0 2px; border-radius: 2px; font-style: italic; }

                     <div class="note">
  <strong><input1>Важно</input2>:</strong> Сроки подачи заявок изменились.
</div>

HTML

<div class="note">
  <strong><input1>Важно</input2>:</strong> Сроки подачи заявок изменились.
</div>

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

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

Результат

Сообщения

Выполнить

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

Латинское название в тексте

id: 37790_html-i-em-08-latin-name

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

CSS

body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; padding: 12px; }
p { max-width: 360px; margin: 0 auto; line-height: 1.45; }
i { font-style: italic; color: #2a6f97; }

                     <p>В тексте встречается латинское название <input1>Homo sapiens</input2>.</p>

HTML

<p>В тексте встречается латинское название <input1>Homo sapiens</input2>.</p>

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

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

Результат

Сообщения

Выполнить

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

Бейдж и акцент в карточке товара

id: 37790_html-i-em-09-card-mix

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

CSS

.card { max-width: 360px; margin: 0 auto; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px; }
.badge { display: inline-block; background: #eef2ff; color: #3730a3; padding: 2px 6px; border-radius: 12px; font-size: 12px; margin-bottom: 6px; }
.badge i { font-style: italic; }
.card h3 { margin: 4px 0 6px; font-size: 16px; }
.card p { margin: 0; line-height: 1.45; }
.card em { background: #ecfccb; color: #3f6212; padding: 0 3px; border-radius: 3px; }

                     <div class="card">
  <span class="badge"><input1>новинка</input2></span>
  <h3>Бутылка воды 0.5л</h3>
  <p>Доставка <input3>без наценки</input4> по городу.</p>
</div>

HTML

<div class="card">
  <span class="badge"><input1>новинка</input2></span>
  <h3>Бутылка воды 0.5л</h3>
  <p>Доставка <input3>без наценки</input4> по городу.</p>
</div>

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

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

Результат

Сообщения

Выполнить

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

Несколько выделений в одном предложении

id: 37790_html-i-em-10-multiple

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

CSS

body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; padding: 12px; }
p { max-width: 360px; margin: 0 auto; line-height: 1.45; }
i { color: #475569; }
em { background: #f0fdf4; color: #166534; padding: 0 2px; border-radius: 2px; }

                     <p><input1>Слово A</input2>, а это <input3>фраза B</input4>, и снова <input5>слово C</input6>.</p>

HTML

<p><input1>Слово A</input2>, а это <input3>фраза B</input4>, и снова <input5>слово C</input6>.</p>

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

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

Результат

Сообщения

Выполнить

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