How to show dates, numbers, money, names and addresses, and which ones people mix up.
Each example is live, but its links go nowhere.
Put a date in a <time> tag, with a version of the date a computer can read. Write the date itself however your readers expect to see it. Rastrillo will not format it for you.
<section rst-box >
<dl rst-detail >
<dt >Published</dt >
<dd >
<time datetime ="2026-08-02" >2 August 2026</time >
</dd >
</dl >
</section >Use <time> for a length of time too. The computer-readable version looks strange: PT2H30M means 2 hours 30 minutes.
<section rst-box >
<dl rst-detail >
<dt >Build time</dt >
<dd >
<time datetime ="PT2H30M" >2h 30m</time >
</dd >
</dl >
</section >Break up long numbers so they can be read at a glance: 54,173 in English, 54.173 in German, ٥٤٬١٧٣ in Arabic. Never show a long number as plain digits. In a table, use digits that are all the same width, so the columns line up.
<div rst-stats >
<div rst-stat >
<span rst-stat-label >Members</span >
<span rst-stat-num >54,173</span >
</div >
<div rst-stat >
<span rst-stat-label >Messages</span >
<span rst-stat-num >1,284,902</span >
</div >
</div >Store each amount as a whole number of the currency's smallest unit, such as cents, with its currency code beside it. Show it with `money`, which writes it the way the reader's language does. The currency always comes from your data, never from the reader.
<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 >KWD 1,284.500</dd >
</dl >
</section >Use <meter> to show how full something is. Use <progress> to show how far a job has got. Always print the number beside the bar. A bar on its own tells a blind reader nothing.
<div rst-box-head >
<h2 >Photo storage</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 >Import</h2 >
</div >
<section rst-box >
<div rst-job >
<span rst-spin aria-hidden ="true" ></span > <strong >Import</strong > is running: 128 of 400…<progress rst-job-bar value ="32" min ="0" max ="100" aria-hidden ="true" ></progress >
</div >
</section >Show a rounded size like 4 MB, and put the exact number of bytes in a <data> tag. Screen readers read what is on screen and ignore the tag, so the rounded size has to be useful on its own.
<section rst-box >
<dl rst-detail >
<dt >Export</dt >
<dd >
<data value ="4194304" >4 MB</data >
</dd >
</dl >
</section >Do not break these up. Order 4471, not order 4,471. Years, version numbers and port numbers are the same. Use rst-mono so they look like codes, and never put one in a <time> tag, even when it looks like a date.
<section rst-box >
<dl rst-detail >
<dt >Reference</dt >
<dd class ="rst-mono" >post_01H9ZQ</dd >
<dt >Order</dt >
<dd class ="rst-mono" >4471</dd >
</dl >
</section >A name can be in any language, including ones that read right to left. When a name sits in the middle of a line, wrap it in <bdi>, or it will scramble the words around it. Use person to show a name with a picture beside it.
<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" >Admin</span >
</div >
</div >The <address> tag is not for postal addresses. It is for saying who wrote the page. A delivery address is ordinary text. A list of staff is a list.
<section rst-box >
<address >Written by <bdi >Grace Hopper</bdi > · <a href ="mailto:grace@example.com" >grace@example.com</a ></address >
</section >
<section rst-box >
<dl rst-detail >
<dt >Deliver to</dt >
<dd >42 Wharf Road, Dublin 2</dd >
</dl >
</section >The <abbr> tag shows the full wording when you hover. That does not work on a phone, and screen readers often skip it. Write the words out in full the first time as well.
<section rst-box >
<p >Every page here meets the Web Content Accessibility Guidelines (<abbr title ="Web Content Accessibility Guidelines" >WCAG</abbr >) 2.2 at level AA.</p >
</section >When your page adds something up, put the answer in an <output> tag. A running total, a converted price, a countdown.
<section rst-box >
<form rst-form >
<div rst-field >
<label rst-field-label for ="seats" >Seats</label >
<input rst-input ="short" id ="seats" name ="seats" type ="number" value ="12" >
</div >
<p >Total <output for ="seats" name ="total" >$144.00</output ></p >
</form >
</section >