Como mostrar datas, números, dinheiro, nomes e moradas, e quais se confundem entre si.
Cada exemplo funciona de verdade, mas as suas ligações não levam a lado nenhum.
Ponha a data numa etiqueta <time>, com uma versão que um computador consiga ler. A data visível escreva-a como os seus leitores esperam vê-la. O rastrillo não a formata por si.
<section rst-box >
<dl rst-detail >
<dt >Publicado</dt >
<dd >
<time datetime ="2026-08-02" >2 de agosto de 2026</time >
</dd >
</dl >
</section >Use <time> também para uma duração. A versão legível por máquina tem um aspeto estranho: PT2H30M significa 2 horas e 30 minutos.
<section rst-box >
<dl rst-detail >
<dt >Tempo de compilação</dt >
<dd >
<time datetime ="PT2H30M" >2 h 30 min</time >
</dd >
</dl >
</section >Separe os números longos para que se leiam de relance: 54,173 em inglês, 54.173 em alemão, ٥٤٬١٧٣ em árabe. Nunca mostre um número longo como dígitos soltos. Numa tabela, use dígitos todos da mesma largura, para que as colunas fiquem alinhadas.
<div rst-stats >
<div rst-stat >
<span rst-stat-label >Membros</span >
<span rst-stat-num >54,173</span >
</div >
<div rst-stat >
<span rst-stat-label >Mensagens</span >
<span rst-stat-num >1,284,902</span >
</div >
</div >Guarde cada valor como um número inteiro da menor unidade da moeda, como os cêntimos, com o código da moeda ao lado dele. Mostre-o com `money`, que o escreve da forma como a língua do leitor escreve. A moeda vem sempre dos seus dados, nunca do leitor.
<section rst-box >
<dl rst-detail >
<dt >EUR</dt >
<dd >1284,50 €</dd >
<dt >JPY</dt >
<dd >1285 JP¥</dd >
<dt >KWD</dt >
<dd >1284,500 KWD</dd >
</dl >
</section >Use <meter> para mostrar quão cheio algo está. Use <progress> para mostrar até onde chegou uma tarefa. Escreva sempre o número ao lado da barra. Uma barra sozinha não diz nada a quem não a vê.
<div rst-box-head >
<h2 >Armazenamento de fotografias</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 >Importação</h2 >
</div >
<section rst-box >
<div rst-job >
<span rst-spin aria-hidden ="true" ></span > <strong >Importação</strong > em curso: 128 de 400…<progress rst-job-bar value ="32" min ="0" max ="100" aria-hidden ="true" ></progress >
</div >
</section >Mostre um tamanho arredondado como 4 MB e ponha o número exato de bytes numa etiqueta <data>. Os leitores de ecrã leem o que está no ecrã e ignoram a etiqueta, por isso o tamanho arredondado tem de servir por si só.
<section rst-box >
<dl rst-detail >
<dt >Exportação</dt >
<dd >
<data value ="4194304" >4 MB</data >
</dd >
</dl >
</section >Estes não se separam. Encomenda 4471, não encomenda 4,471. Os anos, os números de versão e os de porta são iguais. Use rst-mono para que pareçam códigos, e nunca ponha um numa etiqueta <time>, mesmo quando parece uma data.
<section rst-box >
<dl rst-detail >
<dt >Referência</dt >
<dd class ="rst-mono" >post_01H9ZQ</dd >
<dt >Encomenda</dt >
<dd class ="rst-mono" >4471</dd >
</dl >
</section >Um nome pode estar em qualquer língua, incluindo as que se leem da direita para a esquerda. Quando um nome fica no meio de uma linha, envolva-o em <bdi>, ou baralhará as palavras à volta. Use person para mostrar um nome com uma imagem ao 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 >A etiqueta <address> não é para moradas postais. É para dizer quem escreveu a página. Uma morada de entrega é texto normal. Uma lista de pessoal é uma 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 em</dt >
<dd >42 Wharf Road, Dublin 2</dd >
</dl >
</section >A etiqueta <abbr> mostra o texto completo quando passa o rato por cima. Isso não funciona num telemóvel, e os leitores de ecrã saltam-no muitas vezes. Escreva também as palavras por extenso à primeira vez.
<section rst-box >
<p >Todas as páginas aqui cumprem as Diretrizes de Acessibilidade para Conteúdo Web (<abbr title ="Diretrizes de Acessibilidade para Conteúdo Web" >WCAG</abbr >) 2.2 no nível AA.</p >
</section >Quando a sua página soma algo, ponha o resultado numa etiqueta <output>. Um total acumulado, um preço convertido, uma contagem decrescente.
<section rst-box >
<form rst-form >
<div rst-field >
<label rst-field-label for ="seats" >Lugares</label >
<input rst-input ="short" id ="seats" name ="seats" type ="number" value ="12" >
</div >
<p >Valor total <output for ="seats" name ="total" >$144.00</output ></p >
</form >
</section >