Какие теги HTML5 больше подходят для денег? - PullRequest
32 голосов
/ 09 марта 2012

Если вам нужно было правильно выбрать один из этих HTML5-тегов для представления цены, суммы денег или остатка на счете (например, 3/9/2012 - Income: 1.200,00 € или item #314159 - price: $ 31,99), тогда

  • какой тег вы бы выбрали для суммы и почему?
  • должна ли валюта быть также обернута в свой собственный тег или нет?

Я бы действительно хотел избежатьобщий встроенный элемент, такой как <span class="income">1.200,00 €</span> или <span class="price">$ 31,99</span>, но пока я не нашел ссылок на него.

Ответы [ 6 ]

32 голосов
/ 23 марта 2012

Спецификация HTML для var сообщает:

Элемент var представляет переменную.Это может быть фактическая переменная в математическом выражении или контексте программирования, идентификатор, представляющий константу, параметр функции, или просто термин, используемый в качестве заполнителя в прозе.

Для меня это означает, что<var> не подходит для цен в ваших примерах.Это зависит от того, чего вы пытаетесь достичь, но, похоже, ваши варианты:

  1. Использовать микроданные ( ref ), например, Словарь offer Schema.org для цены товара
  2. Используйте <b>, если хотите привлечь внимание к цене, не указывая, что она важнее ( ref )
  3. Использовать <strong>, если цена важна, например, общая цена подробного чека
  4. . Используйте <span> с классом, если вам нужен элемент для стилизации цены по-разному, но <b> и <strong>не подходит
  5. Если ничего из вышеперечисленного не подходит и вы не хотите вводить цену, ничего не делать

Из приведенных вами примеровучитывая, что нет необходимости повышать цены.Если примеры из таблицы для отображения финансовой информации, убедитесь, что они находятся в столбце, озаглавленном соответственно для <th scope="col">Income</th> или <th scope="col">Price</th>.

Надеюсь, это поможет!

13 голосов
/ 24 марта 2012

Глядя на спецификации HTML5 , становится ясно, что цена не считается семантической сущностью. И я согласен. Подумайте об этом так:

Если бы были семантические элементы, это было бы результатом

<p>
   I have 4 apples, 2 oranges and <money>5 <currency>dollars</currency></money>.
</p>

Что отличает 5 долларов от 2 апельсинов? Должны ли мы добавить тег <fruit> тоже?

какой тег вы бы выбрали для суммы и почему?

A span с class, если вы хотите добавить CSS.
Потому что никто не особо заботится о семантике. Приятно иметь, но на самом деле все, что имеет значение, это стиль.

Валюта также должна быть завернута в собственный тег или нет?

Определенно нет.

Я бы очень хотел избежать общего встроенного элемента

Почему?

Вы можете решить использовать <i>, если хотите выразить «особый характер денег».

Элемент i представляет диапазон текста альтернативным голосом или настроением или иным образом смещается от обычной прозы, что указывает на различное качество текста , ...
http://dev.w3.org/html5/spec/the-i-element.html

9 голосов
/ 14 декабря 2014

А как же <data>?

<p>The price is <data class="money" value="100.00">$100</data>.</p>

Согласно спецификации HTML5 :

Элемент data представляет его содержимое вместе с машиночитаемой формой этого содержимого в атрибуте value.

В сочетании с микроформатами или микроданными этот элемент служит для предоставления как машиночитаемого значения для обработки данных, так и читабельного значения для отображения в веб-браузере. В этом случае формат, который будет использоваться в атрибуте значения, определяется используемыми микроформатами или словарем микроданных.

В этом случае вы также можете использовать микроданные для добавления дополнительной информации о типе валюты и т. Д.

2 голосов
/ 22 августа 2016

Я бы использовал список определений здесь.

Элемент HTML (или элемент списка HTML-описания) включает в себя список пар терминов и описаний.Обычно этот элемент используется для реализации глоссария или отображения метаданных (список пар ключ-значение).

<dl>
   <dt>Income:</dt>
   <dd>1.200,00 €</dd>
   <dt>Price:</dt>
   <dd>$31,99</dd>
</dl>
2 голосов
/ 09 марта 2012

Я не вижу ничего более семантического, чем var:

<var>1.200,00 <abbr title="EUR">€</abbr></var>
0 голосов
/ 09 марта 2012

Используйте тег var. Описывается как: «Переменная или пользовательский текст»

<var> </var>
...