Definition lists

I have a list of 5 products a definition list in the following structure:

Product Name
Price
Description

Each product name is a different colour. All prices are grey and all descriptions are black. There is a 5px orange border across the top of each product name.

Is it best to have the price as a <dt> or a <dd>?

Is it best to have each product name as a different class, with border and text colour in this class?

Hope I’ve explained that ok,

Thanks

There will be lots of opinions on this I’d wager, but personally, if I used a dl at all on this, I’d use <dd> for price and description. Not sure if I’d use one for each or have them together in a single one, either.

Is it best to have each product name as a different class, with border and text colour in this class?

It would be easiest to use a different class to indicate the different color, though for the border, all you need to say is

dt {border-top: 5px solid orange;}

etc. No point in repeating that over and over.

I’d go with two separate definitions, just for neatness and because you can then style them differently if the mood takes you.

<dt>Product name</dt>
<dd>Price</dd>
<dd>Description</dd>

Slap on whatever classes and IDs you need.

Thanks! Pretty much confirms what I thought but it’s nice to have some reassurance :slight_smile: