Уместно ли в таких ситуациях использовать figure & figcaption?

Question

[Pavel_20]

Доброго дня!
Есть такие карточки:


Я реализовываю через ol > li > a (циферки в правом верхнем углу карточки вешаю на before техникой counter). Стоит ли делать еще доп вложенность (ради семантики) через figure (position: relative), img (position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;) и figcaption? Хорошая ли это практика?

Comments

[andand44]

Через counter можно задавать порядковые номера не только для ol

[Ankhena]

Картинке-то зачем абсолют?
Да и для псевдо и подписи есть гриды.

figure- это отличный элемент для обрачивания картинки.
Является ли при этом текст figcaptionили нет, решаю в зависимости от происходящего.
Если картинка первична и текст описывает что на ней, то да, использую figcaption.
Если первичен текст, а картинка его сопровождает, то для текста использую другие теги (заголовки подходящего уровня или p или что-то ещё)

[Pavel_20]

Ankhena, а как тогда картинку фоновой сделать? раньше на background-image + background-size: cover вешали, теперь же есть object-fit: cover

[Ankhena]

Pavel_20, против object-fit я ни слова не сказала. Абсолют-то при чем?

Вы, я так понимаю, убираете из потока псевдо и подпись. Картинка в родителе остается одна. И может прекрасно занять всю площадь родителя. Да, именно с помощью object-fit.

Но сейчас есть гриды. А значит, и для псевдо и подписи тоже нет нужды в абсолютах.

[Вадим]

Pavel_20, ну и так, на всякий случай уточним, у Вас картинка не фоновая. Она контентная. То, что на ней изображено, судя по всему, важно для пользователя как контент. Значит через img.

[Pavel_20]

Ankhena, нет, как раз картинку я абсолючу, а надпись я прибиваю книзу задавая родителю display: flex; align-items: flex-end;
Насчет псевдо, видно я не совсем еще продвинутый в гридах. И разве он не на абсолюте работал всегда (родителю relative)?

[Pavel_20]

andand44, ну просто если есть счетчик, то ol как-то семантичнее кажется. Другое дело, что li-шка тогда просто лишней оберткой выступает, так как еще ссылка нужна внутри

[Pavel_20]

Ankhena, и как понять что в данном случае первично? Я так понимаю Имя Фамилия?

[andand44]

С figcaption тоже хорошо будет. Можно еще микроразметку добавить, если хочется семантики и побольше.

[Dima Polos]

Можно в фигур, можно и без, тут не особо много выиграете, а вот img точно.

[Ankhena]

Pavel_20, да, я думаю именно так