Question

If I want to generate a receipt for users, what tag should I use for purchase date, item, cost etc.

I know I’ll use labels for the categories.

<ul>
    <li> <label> Item </label> <span> Poster(is span correct for this area?) </span> </li>
    <li> <label> Date </label> <span> XX/XX/20XX </span> </li>
    <li> <label> Cost </label> <span> $10 </span> </li>
</ul>

Is Span a good one? Or something else

And if not really, then I guess I can resort the backup

<ul>
    <li> <label> Item </label>  Poster(is span correct for this area?)  </li>
    <li> <label> Date </label>  XX/XX/20XX </li>
    <li> <label> Cost </label>  $10 </li>
</ul>

Where I format all the text as I want towards the generated date, but add another layer of styling with the label tag.

Thank you

Answer 1

<label> is not valid in that context, The label element represents a caption for a form control.

I’d just use <strong>:

<ul>
    <li><strong>Item:</strong> Poster</li>
    <li><strong>Date:</strong> XX/XX/20XX</li>
    <li><strong>Cost:</strong> $10</li>
</ul>

Or a table:

<table>
    <tr>
        <th scope="row">Item</th><td>Poster</td>
        <th scope="row">Date</th><td>XX/XX/20XX</td>
        <th scope="row">Cost</th><td>$10</td>
    </tr>
</table>