Жирный текст в html: Как выделить текст жирным в html

Внешний вид текста в html-документе

Начертание текста | HTML | CodeBasics

• Жирное начертание
• Курсивное выделение

Любой текст содержит ключевые части, которые хочется донести до читателя. Это могут быть определения, подсказки, ключевая мысль. Если текста очень много, то такие части могут потеряться или вовсе не быть обнаруженными. Как помочь браузеру и пользователю быстро найти такие части на странице? В HTML-разметке для этих целей можно использовать жирное и курсивное начертание.

Жирное начертание

<p>Code Basics — <b>курсы</b> по программированию.</p>

Code Basics — курсы по программированию.

<p>HTML — <strong>язык разметки гипертекста</strong></p>

HTML — язык разметки гипертекста

Оба примера иллюстрируют добавление жирного начертания к участку текста. Но почему для визуально одинаковых результатов использовалось два разных тега? Дело в семантике, то есть смысловом значении. В данном случае смысловом значении тега:

• <b> — простое выделение текста. Его можно использовать в любом месте для визуального выделения текста. Никакой смысловой нагрузки этот тег не несёт
• <strong> — логическое выделение важного участка текста. Этот тег несёт смысловую нагрузку и размечает именно важную часть. Его не следует применять на всех участках подряд

Когда-то разработчики хотели, чтобы эти теги выглядели по разному и отличались с точки зрения поведения для браузера, но история пошла по чуть иному пути. Сейчас считается, что использование <b> избыточно и для визуального выделения нужно использовать CSS, а для важных участков <strong>

Курсивное выделение

<p><i>Code Basics</i> — <em>бесплатные курсы</em> по программированию</p>

Code Basics — бесплатные курсы по программированию

В этом примере были размечены две части текста:

• Тегом <i> было размечено название портала Code Basics. Тег предназначен для визуального выделение текста курсивом и не несёт смысловой нагрузки
• Тегом <em> была выделена фраза «бесплатные курсы». Это логический акцент на бесплатности курсов, который был придан предложению. Курсов много, а бесплатных нет, поэтому стоит добавить акцент на эту часть предложения

Задание

Добавьте в редактор фразу

Hexlet — hands-on programming courses

в которой слово «courses» сделайте жирным начертанием (физическая разметка), и выделите сочетание «programming» курсивом (логическая разметка). Не забудьте обернуть фразу в параграф

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Полезное

• Теги для визуального выделения короче, чем для смыслового. Это поможет запомнить, когда использовать <i> и <b>, а когда <em> и <strong>

• В практике вместо <i> и <b> используют стилизацию с помощью CSS

Определения

←Предыдущий

Следующий→

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

html — Как сделать этот текст жирным?

спросил 1 год, 3 месяца назад

Изменено 7 месяцев назад

Просмотрено 1к раз

Я пытаюсь понять, как сделать этот текст жирным в Shopify?

  Бесплатная доставка и возврат 
 

Я также хочу адаптировать ту же типографику, но не знаю, как это сделать. В настоящее время я нахожусь в файле product-template.liquid

• html
• css

3

1. Вы можете выделить текст двумя способами:

Способ — 1

  Бесплатная доставка и возврат  

Way — 2

  Бесплатная доставка и возврат  

Для этого можно использовать CSS, используя свойство

 <центр>
    Бесплатная доставка и возврат
 

Чтобы сделать это с помощью только необработанного HTML:

 
    Бесплатная доставка и возврат
 

1

Вы можете сделать

   <центр>
 

  Бесплатная доставка и возврат 
 

  Бесплатная доставка и возврат 
 

 вес шрифта: полужирный;
 

 body > h2. title {
  дисплей: блок;
  размер шрифта: 2em;
  вес шрифта: полужирный;
  поле: 0,67em 0;
  семейство шрифтов: Arial, Sans-Serif;
  оранжевый цвет;
  выравнивание текста: по центру;
  преобразование текста: верхний регистр;
} 

  
Журнал возврата к основам
 

 < h2>Журнал возврата к основам 
 

 .title {
  размер шрифта: 2em;
  вес шрифта: 900;
  поле: 0,67em 0;
  разрыв страницы после: избегать;
  семейство шрифтов: Arial, Sans-Serif;
  оранжевый цвет;
  выравнивание текста: по центру;
  преобразование текста: верхний регистр;
} 

  
Журнал возврата к основам