Семантика метки тега

Question

Я прочитал это , и я ОБЫЧНО использую интервалы или сильные для описания "текстовых меток". Это правда для лучших практик? Кажется, это тоже семантический способ, но почему он ограничен только элементами формы?

Что если бы я хотел отобразить информацию следующим образом:

Name: FOo Bar
Age: 27
Weight: 151 kg

и т.д.

имя, возраст и вес могут быть описаны как метки, но поскольку описываемые ими элементы не являются входными тегами, это не является семантически правильным (по крайней мере, для html и w3c). Я обычно использую

<span class="label"> or <span class="description"> or <span class="person-detail"> etc

но обычно должен быть тег для меток, которые не относятся к полям ввода. Поскольку это может быть немного субъективно, я не против того, чтобы это превратилось в вики сообщества или что-то в этом роде

Answer 1

Вы должны использовать список определений (dl с <a href="http://www.w3.org/TR/html5/the-dt-element.html#the-dt-element" rel="noreferrer">dt</a> и <a href="http://www.w3.org/TR/html5/the-dd-element.html#the-dd-element" rel="noreferrer">dd</a>):

<dl>

 <dt>Name</dt>
 <dd>FOo Bar</dd>

 <dt>Age</dt>
 <dd>27</dd>

 <dt>Weight</dt>
 <dd>151 kg</dd>

</dl>

В спецификации указано, что его можно использовать для

термины и определения, темы и значения метаданных, вопросы и ответы или любые другие группы данных с именами.

---

Я думаю table (с th) можно также использовать .Но я бы использовал его только тогда, когда хочу сравнить несколько человек, а не просто перечислять данные одного человека.

Answer 2

Я бы не стал использовать тег label, если он не сочетается с функциональной HTML-формой (с редактируемыми полями); в противном случае его использование может быть семантически запутанным.

Тег span не имеет семантического значения, независимо от того, к какому идентификатору или классу он добавлен, и независимо от контекста, в котором он используется. Вы ничего не получаете семантически, используя span (хотя это не вредит).

Тег strong имеет общее значение (этот контент имеет дополнительное значение), которое не зависит от контекста, в котором он используется. Иногда полезно, когда нет ничего более подходящего.

В этом конкретном случае список определений (как предлагает @unor) выглядит как путь. Если требуется расширенная стилизация, поместите каждую пару имя-значение в отдельный список определений (что может быть неудобно семантически, но это обеспечивает большую гибкость при стилизации содержимого).

Answer 3

Полагаю, если вы хотите быть на 100% семантически правильными, вам придется использовать метки в сочетании с отключенными или доступными только для чтения текстовыми полями, которые были стилизованы, чтобы выглядеть немного иначе.