How to specify the interface for general picture and text typesetting pages?

recently I am doing a mall type DEMO, like JD.com Taobao and so on. For example, in the commodity details page, in addition to some relatively fixed fields in the head, such as product name, price, profile, and so on, there are also commodity details. The general format of commodity details is probably uniform, but some details will be different.

for example, the picture and text details of clothing commodity An include
version, standard type, men"s
season, spring size XXL, XL, L, M
.
picture and text paragraph

< hr >

snack commodity B picture and text details are
name Ejiao cake ingredients original taste: Ejiao (28.3%), black sesame, walnut kernel
Origin, Liaocheng City, Shandong Province (Dong"a County) net content 500g shelf life 12 months
.
paragraph

in this case, for example, in the field of details, it should be divided into N fields to indicate the type, size, original taste, origin, and so on. Make a judgment on the page and assume that there is a place of origin. I will show the origin XXX if it is empty, the origin item will not be shown

or should it be saved to the database for a detail field when developing in the background, and then the front page of the string with the tag

and then append the string with the html tag to the specified DIV layer through JS? Thank you all in advance

Mongodb mysql .net php html

Apr.18,2022

in previously done projects.

version Standard
for men Spring
size XXL, XL, L, M

The

front highlights section we call the attribute, and the latter part the specification.

in addition to the commodity base table, there is also the following (the base table holds the base price)
where attributes occupy a separate table under the specification. The
specification also occupies a separate table under the attribute.

finally, we need a comparison table of commodity specification attributes.
is used to associate goods, specifications, attributes, and floating prices (other attributes such as cover images).

then take out the structure and process it on the page.

attrList: [
  {
    name: "",
    list: [{ text: "", id: "" }]
  }
];