Жирный текст (b и strong)

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

Опубликовано 04.04.2025
Просмотры 53
Автор
Рек. время прохождения 3 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
Этот тренажер посвящен изучению и закреплению навыков использования HTML-тегов для выделения текста жирным шрифтом: `<b>` и `<strong>`. На первый взгляд они могут показаться одинаковыми, так как оба делают текст жирным, но между ними есть важное различие. В ходе выполнения заданий вы научитесь не только технически правильно применять эти теги, но и понимать их смысловое назначение. Вы узнаете, в каких случаях лучше использовать тег `<b>` для простого визуального акцента, а в каких — тег `<strong>` для придания тексту семантической важности. Задания построены по принципу 'от простого к сложному': от выделения отдельных слов до оформления целых информационных блоков. Это позволит вам уверенно использовать жирное начертание в своих проектах, делая контент более читаемым и правильно структурированным.
Список тем

Простое выделение слова

id: 37789_html_bold_simple_b_tag

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

CSS
body {
  font-family: sans-serif;
  line-height: 1.6;
  padding: 15px;
  color: #333;
}
HTML
<p>
  Это <input1>просто</input2> текст для демонстрации.
</p>
Для простого стилистического выделения текста жирным, без придания ему семантического веса, используется тег `<b>`. Вам нужно обернуть слово 'просто' в этот тег: `<b>слово</b>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Выделение важного слова

id: 37789_html_bold_simple_strong_tag

Теперь задача немного меняется. В предложении ниже выделите слово 'важное' жирным. Контекст подразумевает, что это слово несет особую смысловую нагрузку.

CSS
body {
  font-family: sans-serif;
  line-height: 1.6;
  padding: 15px;
  color: #333;
}
HTML
<p>
  Это <input1>важное</input2> замечание, обратите на него внимание.
</p>
Когда нужно подчеркнуть важность, серьезность или срочность фрагмента текста, используется семантический тег `<strong>`. Он не только делает текст жирным, но и указывает на его значимость. Оберните нужное слово в тег `<strong>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Выделение ключевых слов в списке

id: 37789_html_bold_keywords_list

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

CSS
body {
  font-family: sans-serif;
  padding: 10px;
}
ul {
  list-style-type: none;
  padding-left: 0;
}
li {
  margin-bottom: 10px;
}
HTML
<ul>
  <li><input1>HTML</input2> - язык разметки гипертекста.</li>
  <li><input3>CSS</input4> - каскадные таблицы стилей.</li>
  <li><input5>Тег</input6> - основной элемент разметки.</li>
</ul>
Так как выделение здесь служит для улучшения читаемости и визуального разделения термина и определения, а не для указания важности, лучше всего подойдет тег `<b>`. Примените его ко всем терминам в списке.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Оформление предупреждения

id: 37789_html_bold_warning_message

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

CSS
.alert {
  padding: 15px;
  border: 1px solid #d9534f;
  background-color: #f2dede;
  color: #a94442;
  border-radius: 4px;
  font-family: sans-serif;
}
HTML
<div class="alert">
  <p><input1>Крайне важно</input2>: перед уходом выключите все электроприборы.</p>
</div>
Для предупреждений и сообщений, требующих особого внимания пользователя, идеально подходит тег `<strong>`. Он передает важность контента не только визуально, но и для вспомогательных технологий, таких как скринридеры.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комбинированное использование

id: 37789_html_bold_combined_usage

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

CSS
body {
  font-family: Georgia, serif;
  line-height: 1.7;
  padding: 15px;
  max-width: 340px;
}
HTML
<p>
  Книга <input1>Война и мир</input2> — это классика, которая <input3>обязательна к прочтению</input4> каждым образованным человеком.
</p>
Здесь нужно применить оба тега. Для названия книги, которое является просто именем собственным, используйте `<b>`. Для важной рекомендации, на которую вы хотите обратить особое внимание читателя, используйте `<strong>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Карточка товара

id: 37789_html_bold_product_card

Создайте простую карточку товара. В ней название товара 'Фотоаппарат Z-200' должно быть просто выделено жирным, а специальное предложение 'Только сегодня!' должно быть выделено как очень важное.

CSS
.card {
  font-family: Arial, sans-serif;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  max-width: 250px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
.card-title {
  font-size: 1.2em;
  margin: 10px 0;
}
.card-promo {
  color: #e74c3c;
  font-size: 1.1em;
}
HTML
<div class="card">
  <img src="https://naytikurs.ru/img/7.png" alt="Фотоаппарат">
  <div class="card-title">
    <input1>Фотоаппарат Z-200</input2>
  </div>
  <p class="card-promo">
    <input3>Только сегодня!</input4> Скидка 15%.
  </p>
</div>
Это классический пример разделения тегов. Название продукта (`<b>`) — это просто стилистический элемент для заголовка. А вот акционное предложение (`<strong>`) — это важная информация, которая должна мотивировать пользователя.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Фрагмент статьи

id: 37789_html_bold_article_fragment

Перед вами фрагмент статьи про космос. Выделите имя ученого 'Галилео Галилей' как ключевую фигуру (стилистически) и подчеркните его важнейшее открытие 'фазы Венеры' как семантически значимый факт.

CSS
body {
  font-family: 'Times New Roman', serif;
  line-height: 1.6;
  padding: 15px;
  background: #f4f4f4;
}
.article-p {
  background: #fff;
  padding: 10px;
  border-left: 3px solid #005a9c;
}
HTML
<p class="article-p">
  Великий ученый <input1>Галилео Галилей</input2> был одним из первых, кто использовал телескоп для наблюдения за небесными телами. Его открытие, <input3>фазы Венеры</input4>, стало решающим доказательством гелиоцентрической системы.
</p>
Имя собственное в данном контексте выделяется для удобства чтения, поэтому для 'Галилео Галилей' используйте тег `<b>`. Открытие 'фазы Венеры' является ключевым и важным фактом в статье, поэтому для него лучше подойдет `<strong>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру