Как показывать даты, числа, деньги, имена и адреса — и какие из них путают друг с другом.
Каждый пример работает, но его ссылки никуда не ведут.
Поместите дату в тег <time> и добавьте вариант, который прочитает машина. Видимую дату пишите так, как её ждут ваши читатели. rastrillo не отформатирует её за вас.
<section rst-box >
<dl rst-detail >
<dt >Опубликовано</dt >
<dd >
<time datetime ="2026-08-02" >2 августа 2026 г.</time >
</dd >
</dl >
</section >Для длительности тоже используйте <time>. Машиночитаемая запись выглядит странно: PT2H30M — это 2 часа 30 минут.
<section rst-box >
<dl rst-detail >
<dt >Время сборки</dt >
<dd >
<time datetime ="PT2H30M" >2 ч 30 мин</time >
</dd >
</dl >
</section >Разбивайте длинные числа, чтобы их читали с одного взгляда: 54,173 по-английски, 54.173 по-немецки, ٥٤٬١٧٣ по-арабски. Никогда не показывайте длинное число сплошными цифрами. В таблице используйте цифры одинаковой ширины, чтобы колонки выстроились.
<div rst-stats >
<div rst-stat >
<span rst-stat-label >Участники</span >
<span rst-stat-num >54,173</span >
</div >
<div rst-stat >
<span rst-stat-label >Сообщения</span >
<span rst-stat-num >1,284,902</span >
</div >
</div >Храните каждую сумму как целое число наименьшей единицы валюты, например центов, с кодом валюты рядом. Показывайте её с помощью `money`, которая пишет её так, как принято в языке читателя. Валюта всегда берётся из ваших данных, а не от читателя.
<section rst-box >
<dl rst-detail >
<dt >EUR</dt >
<dd >1 284,50 €</dd >
<dt >JPY</dt >
<dd >1 285 ¥</dd >
<dt >KWD</dt >
<dd >1 284,500 KWD</dd >
</dl >
</section >Показать, насколько что-то заполнено, — это <meter>. Показать, докуда дошла задача, — <progress>. Число всегда печатайте рядом с полосой. Одна полоса ничего не говорит тому, кто её не видит.
<div rst-box-head >
<h2 >Хранилище фото</h2 >
</div >
<section rst-box >
<span rst-meter >
<meter rst-meter-bar value ="82" min ="0" max ="100" aria-hidden ="true" ></meter >
<span rst-meter-num >412 / 500</span >
</span >
</section >
<div rst-box-head >
<h2 >Импорт</h2 >
</div >
<section rst-box >
<div rst-job >
<span rst-spin aria-hidden ="true" ></span > <strong >Импорт</strong > выполняется: 128 из 400…<progress rst-job-bar value ="32" min ="0" max ="100" aria-hidden ="true" ></progress >
</div >
</section >Показывайте округлённый размер вроде 4 МБ, а точное число байт кладите в тег <data>. Программы чтения с экрана читают то, что на экране, и тег игнорируют, поэтому округлённый размер должен быть полезен сам по себе.
<section rst-box >
<dl rst-detail >
<dt >Экспорт</dt >
<dd >
<data value ="4194304" >4 MB</data >
</dd >
</dl >
</section >Их не разбивают. Заказ 4471, а не заказ 4,471. Годы, номера версий и портов — так же. Используйте rst-mono, чтобы они читались как коды, и никогда не кладите такой номер в тег <time>, даже если он похож на дату.
<section rst-box >
<dl rst-detail >
<dt >Номер</dt >
<dd class ="rst-mono" >post_01H9ZQ</dd >
<dt >Заказ</dt >
<dd class ="rst-mono" >4471</dd >
</dl >
</section >Имя может быть на любом языке, в том числе на тех, что читаются справа налево. Когда имя стоит посреди строки, оберните его в <bdi>, иначе оно перепутает слова вокруг. Чтобы показать имя с картинкой рядом, используйте person.
<div rst-card style ="--rst-cols: minmax(0, 1fr) 120px" >
<div rst-lrow >
<a class ="rst-nm" href ="/people/1" ><bdi >Grace Hopper</bdi >
<small >
<bdi >grace@example.com</bdi > · 09:12</small >
</a >
<span class ="rst-cell-mut rst-m-hide" >Администратор</span >
</div >
</div >Тег <address> — не для почтовых адресов. Он говорит, кто написал страницу. Адрес доставки — обычный текст. Список сотрудников — это список.
<section rst-box >
<address >Автор: <bdi >Grace Hopper</bdi > · <a href ="mailto:grace@example.com" >grace@example.com</a ></address >
</section >
<section rst-box >
<dl rst-detail >
<dt >Адрес доставки</dt >
<dd >42 Wharf Road, Dublin 2</dd >
</dl >
</section >Тег <abbr> показывает полную формулировку при наведении. На телефоне это не работает, а программы чтения с экрана часто его пропускают. В первый раз пишите слова полностью тоже.
<section rst-box >
<p >Каждая страница здесь соответствует Руководству по доступности веб-контента (<abbr title ="Руководство по доступности веб-контента" >WCAG</abbr >) 2.2 на уровне AA.</p >
</section >Когда страница что-то складывает, положите результат в тег <output>. Текущий итог, пересчитанная цена, обратный отсчёт.
<section rst-box >
<form rst-form >
<div rst-field >
<label rst-field-label for ="seats" >Места</label >
<input rst-input ="short" id ="seats" name ="seats" type ="number" value ="12" >
</div >
<p >Итого <output for ="seats" name ="total" >$144.00</output ></p >
</form >
</section >