Так то представлен вариант, если появилась необходимость в этом оборачивании. Да и в места span, полагаю вторым тегом какойнибудь strong может так же быть?

Какая проблема тут использовать два span?

<p class="price">
  <span class="price__first-line">Цена за товар:</span>
  <span class="price__second-line">
    <span class="price__value">94 682</span>₽ за штуку
  </span>
</p>

price__value для стилизации значения. Либо вставить в текст для простого поиска значений для использования в JS

wadowad 10 июл 2024 в 09:56

Такое семантичней или наоборот?

<dl class="price">
  <dt class="price__first-line">Цена за товар:</dt>
  <dd class="price__second-line">
    <strong class="price__value">94 682</strong>&thinsp;₽ за штуку
  </dd>
</dl>

ilekarev 10 июл 2024 в 14:11

Я не думаю, что это семантично :) Здесь нет списка, и нет элементов "термин - описание".

wadowad 10 июл 2024 в 14:21

У DL смысл несколько шире, чем просто "термин - описание", скорее это "ключ - значение". А список есть (тут правда только из одного пункта). Всё встаёт на свои места, когда появляются варианты:

<dl class="price">
  <dt class="price__first-line">Цена за товар:</dt>
  <dd class="price__second-line">
    <strong class="price__value">94 682</strong>&thinsp;₽ за штуку
  </dd>
  <dt class="price__first-line">Цена со скидкой:</dt>
  <dd class="price__second-line">
    <strong class="price__value">253 199</strong>&thinsp;₽ за три штуки
  </dd>
  <dt class="price__first-line">Оптовая цена:</dt>
  <dd class="price__second-line">
    <strong class="price__value">650 000</strong>&thinsp;₽ за 10 штук
  </dd>
</dl>

kranid 9 июл 2024 в 15:27

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

bubn0ff 10 июл 2024 в 08:29

По всем этим нюансам во всех выпусках хорошо бы составить некий "чек-лист доступности".

Зарегистрируйтесь на Хабре, чтобы оставить комментарий