Tag HTML <time>
A tag <time>, elemento novo no HTML 5, define uma hora legível por humanos em relógio de 24 horas ou uma data precisa no calendário gregoriano.
A tag <time> é um dos elementos HTML5. Ela marca um momento no tempo ou um intervalo de tempo de forma que seja legível por pessoas e interpretável por máquinas. Pode representar um dos seguintes:
- uma hora legível por humanos em um relógio de 24 horas,
- uma data precisa no calendário gregoriano (com informações opcionais de fuso horário e hora),
- uma duração.
A tag <time> não deve ser usada para datas anteriores à introdução do calendário gregoriano.
Por que usar <time>? O aspecto legível por máquinas
O texto visível dentro de um elemento <time> permanece livre e amigável ao leitor — você pode escrever "Próxima sexta-feira", "28 de setembro" ou "em duas horas". O atributo opcional datetime carrega uma versão estrita e legível por máquinas desse mesmo momento para que softwares possam entendê-lo com precisão:
- Mecanismos de busca leem
datetimepara construir resultados mais inteligentes e conscientes do tempo (por exemplo, exibindo datas de eventos em rich snippets). - Ferramentas de calendário e navegadores podem oferecer lembretes de "adicionar ao calendário" porque conhecem o instante exato, não apenas as palavras.
- Scripts e tecnologias assistivas podem reformatar, localizar ou comparar o valor de forma confiável.
Se você omitir o atributo datetime, o próprio conteúdo de texto do elemento deve ser uma string de data/hora válida — e nesse caso o elemento não deve conter nenhum elemento aninhado, apenas texto.
Sintaxe
O elemento <time> requer tanto a tag de abertura quanto a de fechamento. O conteúdo é escrito entre as tags de abertura <time> e de fechamento </time>.
Exemplo da tag HTML <time>:
Tag HTML <time>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>The game will be held on <time datetime="2018-09-28T19:00">September 28</time>.</p>
<p>It will start at <time>19:00</time></p>
</body>
</html>No primeiro parágrafo, o atributo datetime contém o valor preciso legível pela máquina enquanto o texto visível exibe "September 28". No segundo, não há atributo datetime, então o texto 19:00 é ele mesmo o valor legível pela máquina.
Os formatos de datetime
O atributo datetime deve conter uma string de data/hora válida, seguindo as convenções do ISO 8601 que o HTML utiliza. Aqui estão os formatos mais comuns, prontos para copiar e colar:
| O que representa | Valor de exemplo | Observações |
|---|---|---|
| Data | 2024-03-15 | Ano-Mês-Dia. |
| Ano e mês | 2024-03 | Dia omitido. |
| Somente hora | 14:30 | Relógio de 24 horas, :ss opcional. |
| Data e hora (UTC) | 2024-03-15T14:30:00Z | T separa data e hora; Z significa UTC. |
| Data e hora com offset | 2024-03-15T14:30:00+02:00 | Offset de fuso horário em relação ao UTC. |
| Duração | PT2H30M | "2 horas, 30 minutos". |
| Duração (dias) | P2D | "2 dias". |
| Semana | 2024-W11 | A 11ª semana ISO de 2024. |
Uma duração sempre começa com P (período); um T precede os componentes de hora, então PT2H30M é lido como 2 horas e 30 minutos, enquanto P2D é 2 dias.
Exemplo: um valor somente de hora
Aqui o texto visível também é o valor legível pela máquina, portanto nenhum atributo datetime é necessário.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>Doors open at <time>09:00</time> sharp.</p>
</body>
</html>Exemplo: uma duração
Use o atributo datetime com um valor P/PT para marcar quanto tempo algo dura.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>The recipe needs <time datetime="PT2H30M">2 hours and 30 minutes</time> in the oven.</p>
</body>
</html>Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| datetime | YYYY-MM-DD, YYYY-MM-DDThh:mm, hh:mm, etc. | Especifica a hora/data em um formato legível por máquinas. O valor deve seguir um formato de string de data/hora válido (por exemplo, ISO 8601). Offsets de fuso horário como +02:00 ou Z também são suportados. |
A tag <time> também suporta os Atributos Globais.
Observação: O atributo pubdate era suportado anteriormente, mas foi depreciado e removido nas especificações HTML posteriores.
Estilizando <time>
O elemento <time> é inline e sem estilo por padrão, portanto parece igual ao texto ao redor. Um truque útil é o seletor de atributo time[datetime], que seleciona apenas os elementos que carregam um valor legível por máquinas — por exemplo, para exibir o valor exato ao passar o mouse via um title, ou para dar a esses instantes uma indicação visual sutil.
/* Highlight only <time> elements that have a datetime attribute */
time[datetime] {
border-bottom: 1px dotted currentColor;
cursor: help;
}Tags relacionadas
- Tag HTML
<data>— o equivalente de uso geral para valores legíveis por máquinas não temporais. - Referência de Elementos HTML5 — a lista completa de elementos introduzidos no HTML5.