A description list seems like the HTML structure which you would automatically reach for when implementing this use case, because its intention is list out a term followed by the definition which is associated with it.
However, the description list's HTML structure is sometimes not ideal,
because we are not allowed to add any elements around the dt and dd tags
in the HTML.
This limits the amount of visual style that is possible with CSS
(e.g. it isn't possible to easily show the label / value pairs next to each other in the UI),
so it isn't ideal for all circumstances.
dl because I believed that it was invalid to add HTML
elements to group a dt and dd element. However,
this is no longer the case for modern browsers which implement the
HTML 5.2 Recommendation
because they now allow a div as a wrapper around
dt and dd elements. For this reason, this is
now probably my preferred method of grouping labelled information.
This attempts to rectify the shortcomings of the definition list by inserting the label and value pairs as a single list entry.
However, this only groups them together in the UI within a list, but doesn't actually semantically link the label with its value. Also, it would be easy to argue that the list context in this example is superfluous, since the labelled information here isn't really a list.
This uses the group attribute to group related information together.
I like this method because it semantically identifies the label and its value.
Here, we are using the aria-labelledby attribute to generate the label
for the group and hiding the actual label with the aria-hidden attribute.
We can hide the label because its value is already read out by the screenreader.
If the group is duplicated on the page (and the label is therefore also duplicated),
we need to make sure that we generate a unique id for the label element OR use
aria-label instead.