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

Question

[xxvxx]

Как правильно использовать тег 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
или в данном случае лучше использовать заголовок?

Comments

[Ankhena]

Если вопрос что ставить 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-...

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

Answer 1

[Sergey]

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

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

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

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

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

Comments

[xxvxx]

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

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

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

[Алексей Уколов]

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

[xxvxx]

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

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

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

[Алексей Уколов]

Понятно, что связанный. Но важно и то, что на странице находится помимо этих блоков. Например, если это подвал или сайдбар, то, скорее всего, заголовки уровня h2 там не уместны (но могут быть и уместны в редких случаях). Если это основное содержание страницы, то вполне норм такая разметка.

[Алексей Уколов]

Семантика на практике имеет значение для двух групп посетителей: поисковых роботов и слабовидящих пользователей скринридеров.
Для поисковых роботов особо заморачиваться нет смысла - 99% сайтов в интернете, созданных за прошедшие десятилетия ей не заморачивались и роботы на неё особо ориентироваться не могут.
А в случае со скринридерами нужно просто установить его, запустить и попробовать походить по вашей странице - тогда увидите, насколько теги расставлены адекватно.

[xxvxx]

Алексей Уколов, А если вот такая ситуация клиент пришел к дизайнеру и сказал хочу инфоблок прям в футаре в самом низу сайта, чтоб показывалась 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>

в данном случае уместно использовать 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>

[Алексей Уколов]

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

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

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

[xxvxx]

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

[xxvxx]

Алексей Уколов, хз хрень там какая-то

<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>

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

[Алексей Уколов]

Всё, что реально нужно знать о семантике: https://www.youtube.com/watch?v=W5DgVWtitjQ

[xxvxx]

Алексей Уколов, Спасибо!