Как использовать тег b?

Как правильно использовать тег B в таких ситуациях?
//Так?

<div> 	<img src="" alt="" /> 	<b>Жирный текст</b> 	<p>Тут максимум 5 слов</p> 	<p>Тут максимум 3 слова</p> </div>

//Или так?

<div> 	<img src="" alt=""> 	<p><b>Жирный текст</b></p> 	<p>Тут максимум 5 слов</p> 	<p>Тут максимум 3 слова</p> </div>

//А может так?

<div> 	<img src="" alt=""> 	<h3>Жирный текст</h3> 	<p>Тут максимум 5 слов</p> 	<p>Тут максимум 3 слова</p> </div>

Тут важно понимать что эти блоки дублируются много раз
И почему именно так?

Мне кажется что второй вариант правильный так как тег В только выделяет текст и должен быть помещен в P или SPAN
или в данном случае лучше использовать заголовок?

Дополнительно:

Если вопрос что ставить b или h3, то нужно читать текст, который написан в макете и в этом месте и вообще в блоке.
Если это заголовок секции/статьи, то это несомненно h.

При выборе<p><b></b></p> или <b></b> встает вопрос, а зачем там вообще второй b. Дальше логический круг: b это часть строки (p, li, h, dt или других тегов), но конструкция <p><b></b></p> избыточна, от b можно просто избавиться, оставив p.

Ну и открываем спеку (хотя логичнее было с этого начать) и читаем там, что b используется тогда, когда нет более подходящих семантических тегов.
https://html.spec.whatwg.org/multipage/text-level-...

Какой вывод: без макета нет однозначного ответа на ваш вопрос.

Тег <b> используется для придания тексту полужирного начертания без изменения его семантики. Однако с течением времени рекомендуется использовать более семантически правильные теги для форматирования текста, такие как <strong> для выделения важного текста или <span> с применением CSS для стилизации.

Из двух примеров, которые вы предоставили, правильнее будет второй вариант, так как тег <b> предназначен для применения к содержимому внутри других тегов, в том числе к тексту внутри тега <p>. Однако не забывайте, что использование тега <b> не рекомендуется для стилизации текста в документах HTML5, поскольку он не несет никакой семантической нагрузки.

Вот пример правильного использования тега <b>:

<p>Этот текст <b>полужирный</b>.</p>

Если вы хотите стилизовать текст, важно помнить о семантике. Например, если текст действительно является важным, вы можете использовать тег <strong>. Если вам нужно изменить внешний вид текста для целей стилизации, лучше использовать CSS

• Спасибо, я дополнил вопрос, может так будет правильнее?

  <div> <img src="" alt=""> <h3>Жирный текст</h3> <p>Тут максимум 5 слов</p> <p>Тут максимум 3 слова</p> </div>

  &lt;div&gt; &lt;img src="" alt=""&gt; &lt;h3&gt;Жирный текст&lt;/h3&gt; &lt;p&gt;Тут максимум 5 слов&lt;/p&gt; &lt;p&gt;Тут максимум 3 слова&lt;/p&gt; &lt;/div&gt;

  но тут стоит учитывать что это много маленьких блоков

• xxvxx, ваш вопрос лежит в области семантики, а её бессмысленно обсуждать в отрыве от конкретной ситуации, потому что в одном случае одна и та же разметка будет семантически корректна, а в другом нет. Особенно это касается заголовков.
• Алексей Уколов, Ну тут блок оборачивает связанный контент
  предположим что выше у нас заголовок <h2> Рыбы
  картинка карася
  текст жирным карась
  текст живет 5 лет в прудах
  текст костлявый

  картинка сельди
  текст жирным сельдь
  текст морская рыба живет 6 лет
  текст вкусная в маринаде

  и тд каждый блок это блок о рыбе, но они не большие

• Понятно, что связанный. Но важно и то, что на странице находится помимо этих блоков. Например, если это подвал или сайдбар, то, скорее всего, заголовки уровня h2 там не уместны (но могут быть и уместны в редких случаях). Если это основное содержание страницы, то вполне норм такая разметка.
• Семантика на практике имеет значение для двух групп посетителей: поисковых роботов и слабовидящих пользователей скринридеров.
  Для поисковых роботов особо заморачиваться нет смысла - 99% сайтов в интернете, созданных за прошедшие десятилетия ей не заморачивались и роботы на неё особо ориентироваться не могут.
  А в случае со скринридерами нужно просто установить его, запустить и попробовать походить по вашей странице - тогда увидите, насколько теги расставлены адекватно.
• Алексей Уколов, А если вот такая ситуация клиент пришел к дизайнеру и сказал хочу инфоблок прям в футаре в самом низу сайта, чтоб показывалась 5ть случайных рыб на сайте и заголовок ++Рыбы на нашем сайте++

  <footer> <div> тут контент футера </div> <div> <h2>++Рыбы на нашем сайте++</h2> <div> <img src="" alt=""> <h3>Жирный текст</h3> <p>Тут максимум 5 слов</p> <p>Тут максимум 3 слова</p> </div> <div> <img src="" alt=""> <h3>Жирный текст</h3> <p>Тут максимум 5 слов</p> <p>Тут максимум 3 слова</p> </div> <div> <img src="" alt=""> <h3>Жирный текст</h3> <p>Тут максимум 5 слов</p> <p>Тут максимум 3 слова</p> </div> </div>

  &lt;footer&gt; &lt;div&gt; тут контент футера &lt;/div&gt; &lt;div&gt; &lt;h2&gt;++Рыбы на нашем сайте++&lt;/h2&gt; &lt;div&gt; &lt;img src="" alt=""&gt; &lt;h3&gt;Жирный текст&lt;/h3&gt; &lt;p&gt;Тут максимум 5 слов&lt;/p&gt; &lt;p&gt;Тут максимум 3 слова&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;img src="" alt=""&gt; &lt;h3&gt;Жирный текст&lt;/h3&gt; &lt;p&gt;Тут максимум 5 слов&lt;/p&gt; &lt;p&gt;Тут максимум 3 слова&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;img src="" alt=""&gt; &lt;h3&gt;Жирный текст&lt;/h3&gt; &lt;p&gt;Тут максимум 5 слов&lt;/p&gt; &lt;p&gt;Тут максимум 3 слова&lt;/p&gt; &lt;/div&gt; &lt;/div&gt;

  в данном случае уместно использовать h2 ?

  и еще вопрос уместно ли использовать заголовки в данной ситуации? Если нет то как нужно?

  <footer> <div> <h2>Ссылки на магазины</h2> <ul> <li> <a href="">Москва</a> </li> <li> <a href="">Новгород</a> </li> <li> <a href="">Питер</a> </li> <li> <a href="">Казань</a> </li> </ul> </div> <h2>Ссылки на наши товары</h2> <ul> <li> <a href="">Самый лучшие</a> </li> <li> <a href="">Наши новинки</a> </li> <li> <a href="">Акция</a> </li> <li> <a href="">уценка</a> </li> </ul> </footer>

  &lt;footer&gt; &lt;div&gt; &lt;h2&gt;Ссылки на магазины&lt;/h2&gt; &lt;ul&gt; &lt;li&gt; &lt;a href=""&gt;Москва&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href=""&gt;Новгород&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href=""&gt;Питер&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href=""&gt;Казань&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;h2&gt;Ссылки на наши товары&lt;/h2&gt; &lt;ul&gt; &lt;li&gt; &lt;a href=""&gt;Самый лучшие&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href=""&gt;Наши новинки&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href=""&gt;Акция&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href=""&gt;уценка&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/footer&gt;

• Я уже говорил, что обсуждать сферические куски html в вакууме смысла нет.
  К сказанному добавлю лишь то, что у заголовков есть чёткая иерархия, на неё тоже нужно обращать внимание. Поэтому будет корректно использовать именно h2 в подвале зависит от контента страницы.

  Единственно правильного ответа на вопрос "как нужно" в семантике нет*, потому что это во многом субъективная штука. Вот например прямо тут на Тостере блок "САМОЕ ИНТЕРЕСНОЕ ЗА 24 ЧАСА" свёрстан довольно странно на мой взгляд, но при этом я не могу твёрдо и чётко сказать, что он свёрстан неправильно ¯_(ツ)_/¯

  *Но не когда дело касается интерактивных элементов. Кнопки должны быть кнопками, а ссылки ссылками!

• Алексей Уколов, Спасибо! Для себя я решил поступить щас так, у бутстрапа есть платные официальные шаблоны и с точки зрения синематеки как мне кажется они построены корректно, мне сейчас не хватает примеров для четкого понимания как правильно, и я пойду щас изучать куски кода этих шаблонов так я смогу четко сформулировать свое представление как правильно, просто без живых примеров мне очень тяжело воспринимать теорию...
• Алексей Уколов, хз хрень там какая-то

  <div class="card-body card-body"> <span class="card-date">08 may, 2020</span> <span class="card-title h5">This week's top Stories about Development</span> <span class="btn btn-clean">read more</span> </div>

  &lt;div class="card-body card-body"&gt; &lt;span class="card-date"&gt;08 may, 2020&lt;/span&gt; &lt;span class="card-title h5"&gt;This week's top Stories about Development&lt;/span&gt; &lt;span class="btn btn-clean"&gt;read more&lt;/span&gt; &lt;/div&gt;

  на каждый span налеплен дисплей блок хотя отличия <p> от <span> в том что <span> инлайновый а <p> блочный и логично было бы здесь использовать <p> а после заголовка <h2> идет <h4>

• Всё, что реально нужно знать о семантике: https://www.youtube.com/watch?v=W5DgVWtitjQ
• Алексей Уколов, Спасибо!