Cómo mostrar fechas, números, dinero, nombres y direcciones, y cuáles se confunden entre sí.
Cada ejemplo funciona de verdad, pero sus enlaces no llevan a ninguna parte.
Pon la fecha en una etiqueta <time>, con una versión que pueda leer un ordenador. La fecha visible escríbela como tus lectores esperan verla. rastrillo no te la va a formatear.
<section rst-box >
<dl rst-detail >
<dt >Publicado</dt >
<dd >
<time datetime ="2026-08-02" >2 de agosto de 2026</time >
</dd >
</dl >
</section >Usa <time> también para una duración. La versión legible por máquina tiene un aspecto extraño: PT2H30M significa 2 horas y 30 minutos.
<section rst-box >
<dl rst-detail >
<dt >Tiempo de compilación</dt >
<dd >
<time datetime ="PT2H30M" >2 h 30 min</time >
</dd >
</dl >
</section >Separa los números largos para que se lean de un vistazo: 54,173 en inglés, 54.173 en alemán, ٥٤٬١٧٣ en árabe. Nunca muestres un número largo como dígitos sin más. En una tabla, usa dígitos del mismo ancho para que las columnas queden alineadas.
<div rst-stats >
<div rst-stat >
<span rst-stat-label >Miembros</span >
<span rst-stat-num >54,173</span >
</div >
<div rst-stat >
<span rst-stat-label >Mensajes</span >
<span rst-stat-num >1,284,902</span >
</div >
</div >Guarda cada importe como un número entero de la unidad más pequeña de la moneda, como los céntimos, con su código de moneda al lado. Muéstralo con `money`, que lo escribe como lo hace el idioma del lector. La moneda siempre viene de tus datos, nunca del lector.
<section rst-box >
<dl rst-detail >
<dt >EUR</dt >
<dd >1284,50 €</dd >
<dt >JPY</dt >
<dd >1285 JPY</dd >
<dt >KWD</dt >
<dd >1284,500 KWD</dd >
</dl >
</section >Usa <meter> para mostrar cuán lleno está algo. Usa <progress> para mostrar hasta dónde ha llegado una tarea. Escribe siempre el número junto a la barra. Una barra sola no le dice nada a quien no la ve.
<div rst-box-head >
<h2 >Almacenamiento de fotos</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 >Importación</h2 >
</div >
<section rst-box >
<div rst-job >
<span rst-spin aria-hidden ="true" ></span > <strong >Importación</strong > en curso: 128 de 400…<progress rst-job-bar value ="32" min ="0" max ="100" aria-hidden ="true" ></progress >
</div >
</section >Muestra un tamaño redondeado como 4 MB y pon el número exacto de bytes en una etiqueta <data>. Los lectores de pantalla leen lo que está en pantalla e ignoran la etiqueta, así que el tamaño redondeado tiene que servir por sí solo.
<section rst-box >
<dl rst-detail >
<dt >Exportación</dt >
<dd >
<data value ="4194304" >4 MB</data >
</dd >
</dl >
</section >Estos no se separan. Pedido 4471, no pedido 4,471. Los años, los números de versión y los de puerto son igual. Usa rst-mono para que parezcan códigos, y nunca metas uno en una etiqueta <time>, aunque parezca una fecha.
<section rst-box >
<dl rst-detail >
<dt >Referencia</dt >
<dd class ="rst-mono" >post_01H9ZQ</dd >
<dt >Pedido</dt >
<dd class ="rst-mono" >4471</dd >
</dl >
</section >Un nombre puede estar en cualquier idioma, incluidos los que se leen de derecha a izquierda. Cuando un nombre queda en medio de una línea, envuélvelo en <bdi>, o desordenará las palabras a su alrededor. Usa person para mostrar un nombre con una imagen al lado.
<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" >Administrador</span >
</div >
</div >La etiqueta <address> no es para direcciones postales. Es para decir quién escribió la página. Una dirección de entrega es texto normal. Una lista de personal es una lista.
<section rst-box >
<address >Escrito por <bdi >Grace Hopper</bdi > · <a href ="mailto:grace@example.com" >grace@example.com</a ></address >
</section >
<section rst-box >
<dl rst-detail >
<dt >Entregar en</dt >
<dd >42 Wharf Road, Dublin 2</dd >
</dl >
</section >La etiqueta <abbr> muestra el texto completo al pasar el ratón por encima. Eso no funciona en un móvil, y los lectores de pantalla suelen saltárselo. Escribe también las palabras completas la primera vez.
<section rst-box >
<p >Todas las páginas de aquí cumplen las Pautas de Accesibilidad para el Contenido Web (<abbr title ="Pautas de Accesibilidad para el Contenido Web" >WCAG</abbr >) 2.2 en el nivel AA.</p >
</section >Cuando tu página suma algo, pon el resultado en una etiqueta <output>. Un total acumulado, un precio convertido, una cuenta atrás.
<section rst-box >
<form rst-form >
<div rst-field >
<label rst-field-label for ="seats" >Plazas</label >
<input rst-input ="short" id ="seats" name ="seats" type ="number" value ="12" >
</div >
<p >Importe total <output for ="seats" name ="total" >$144.00</output ></p >
</form >
</section >