Я согласен с другими ответами, что список <dl> является наиболее семантическим вариантом здесь.В прошлом я никогда не был уверен, было ли это правильным использованием <dl>, потому что все официальные описания элемента <dl>, которые я видел, описывали его как «список определений», который будет использоваться для фактического определения терминов, как в глоссарии (см. мои комментарии к ответу @ Кристиана).Однако, взглянув на последний проект редактора спецификации HTML 5, я заметил, что он был переименован в «список описания», а не в «список определений», и приведенный пример на самом деле очень похож например в этом вопросе.
<dfn>, с другой стороны, кажется, предназначен только для фактического определения терминов.Вот некоторые соответствующие цитаты из приведенной выше ссылки:
Сам элемент dt, когда используется в элементе dl, не указывает, что его содержимое является определяемым термином, но это можно указать с помощьюэлемент dfn.
...
Элемент dfn представляет собой определяющий экземпляр термина.Абзац, группа списка описаний или раздел, являющийся ближайшим предком элемента dfn, также должны содержать определения для термина, заданного элементом dfn.
Итак, в заключение я бы остановилсярекомендация по использованию элемента <dl>, даже если его стиль по умолчанию отличается от примера OP.
Вот класс CSS многократного использования для <dl> в стиле примера:
.dl-inline dt, .dl-inline dd {display:inline; margin:0;}
.dl-inline dt:after {content:': '}
.dl-inline dd + dt:before {content:''; display:block;}
<dl class="dl-inline">
<dt>Name</dt>
<dd>John</dd>
<dt>Age</dt>
<dd>40</dd>
<!-- ... -->
</dl>
Или версия SASS:
.dl-inline {
dt,dd {display:inline; margin:0;}
dt:after {content:': '}
dd + dt:before {content:''; display:block;}
}