How to layout a product card in a catalog?

Question

HTML

Hi all !! I hope I’ll ask the question correctly and clearly))
for starters, I’m a very entry-level layout designer ...
and so I come across layouts of an online store’s product catalog and I’m wondering how to properly layout a product card? elements, which are through the article and inside the elements, highlighted and div in which the figure tag and all the elements are already in it .... I wonder which of these methods is the most correct chtoli
thanks in advance !!

Answer 1

There is no specific standard.
But there is a semantic layout, i.e. the use of the most suitable tags for the content, and there is a non-semantic layout.
Semantic layout improves the accessibility of the site for screen readers - visually impaired people and other screen reader users will find it much easier to use a site that respects semantics. Semantics also helps with SEO.
I would say that it is more correct to use semantic layout. You can see the meaning of the tags in mdn

Answer 2

It's more a matter of personal choice and how the site was originally developed. tags like article and figure refer to the semantic layout of the html5 standard, you can read more here https://htmlacademy.ru/blog/boost/frontend/semantics . If the site is already pursuing a semantics strategy, this should continue to be followed.