Entendendo o elemento time em HTML 5
Semântica é a palavra de ordem para os puristas do HTML e faz parte do cerne do propósito da linguagem de marcação: oferecer ao mesmo tempo um código que faça sentido para os usuários, mas também possa ser interpretado facilmente por sistemas automatizados.
Entretanto, até a chegada do HTML 5 não havia um elemento semântico para designar datas e horários. Não seria perfeito se mecanismos de busca e outros programas fossem capazes de identificar de imediato a data de publicação de um artigo ou notícia ou uma API capaz de extrair horários de uma tabela em um site? Entretanto, apesar da criação do <time>, sua adoção ainda está longe de ser o ideal.
Sendo um elemento inline, a tag <time> não interfere no aspecto visual da informação, mas fornece um indicador preciso para o navegador e outros sistemas sobre o tipo de dado que ela contém. Um exemplo simples:
1 2 |
<!– 5 de fevereiro de 2021–> <time>2021-02-05</time> |
Perceba que o elemento time utiliza por padrão o formato (yyyy-mm-dd) estabelecido no UNIX. Entretanto, em suas especificações, os componentes são opcionais e nós veremos os outros formatos válidos mais à frente.
Datetime
É importante frisar que o elemento semântico pode encapsular uma informação focada no usuário humano e reservar uma informação para sistemas automatizados através do atributo datetime. Desta forma, nosso exemplo acima poderia ser mais amigável para nós brasileiros sem perder sua utilidade prática da seguinte forma:
1 2 |
<!– 5 de fevereiro de 2021–> <time datetime=”2021-02-05″>5 de fevereiro de 2021</time> |
Na ausência do atributo datetime, sistemas devem interpretar o valor dentro do elemento por padrão, portanto, o formato precisaria ser válido. Utilizando o recurso do datetime, oferecemos a informação de uma forma que seja adequada e coerente tanto para usuários quanto para máquinas.
A partir do datetime, não importa mais o que vem registrado dentro do elemento. do ponto de vista de sistemas, todas as marcações abaixo são válidas para o mesmo resultado:
1 2 3 4 5 6 7 8 |
<!– 5 de fevereiro de 2021–> <time datetime=”2021-02-05″>dia 5 do corrente</time> <!– 5 de fevereiro de 2021–> <time datetime=”2021-02-05″>amanhã</time> <!– 5 de fevereiro de 2021–> <time datetime=”2021-02-05″>qualquer coisa escrita</time> |
Entretanto, é fundamental que o conteúdo do datetime seja sempre válido, uma vez que ele tem a preferência para uso em sistemas.
Formatos válidos
Formatos válidos devem respeitar o Calendário Gregoriano e a estrutura yyyy-mm-dd. Ainda assim, há flexibilidade para se mencionar datas imprecisas, omitindo-se um dos componentes. Por exemplo:
Determinado mês, sem dia especificado
Utiliza-se o formato yyyy-mm. Como em:
1 2 |
<!– fevereiro de 2021–> <time>2021-02</time> |
Determinado dia, sem ano especificado
Utiliza-se o formato mm-dd. Como em:
1 2 |
<!– dia 5 fevereiro –> <time>02-05</time> |
Determinado ano, sem mais nada especificado
Utiliza-se o formato yyyy. Como em:
1 2 |
<!– 2021 –> <time>2021</time> |
Determinada semana do ano
Aqui fugimos um pouco do padrão adotado e passamos a especificar como yyyy-W#. Como em:
1 2 |
<!– quinta semana de 2021 –> <time>2021-W5</time> |
Formato para horários
Pode-se utilizar o elemento time para se especificar um horário específico, obedecendo-se ao padrão HH:MM[:SS[.mmm]], em que segundos e milissegundos são opcionais. Exemplos:
1 2 |
<!– quatro da tarde –> <time>16:00</time> |
1 2 |
<!– registro preciso de um horário, até milissegundos –> <time>14:00:30.333</time> |
Conciliando data e horários
É possível combinar formatos usando o padrão yyyy-mm-ddTHH:MM[:SS[.mmm]]. Como em:
1 2 |
<!– registro preciso de uma data e um horário, até milissegundos –> <time>2021-02-05T16:00:30.333</time> |
Formato para fuso horário
Pode-se utilizar o elemento time para se especificar um fuso horário, de acordo com a escala de Greenwich (GMT). Exemplo:
1 2 |
<!– fuso horário de Brasília –> <time>-03:00</time> |
Conciliando tudo que aprendemos, uma data e um horário completos seriam:
1 2 |
<!– registro preciso de uma data e um horário, até milissegundos –> <time>2021-02-05T16:00:30.333-03:00</time> |
Pubdate
Para resolver a velha questão de saber a data de publicação de uma página ou artigo, foi criado o atributo booleano pubdate para o elemento time. Ele serve para indicar que o elemento article pai tem a data de publicação especificada. Na ausência de um elemento article, ele é interpretado como válido para toda a página.
Veja um exemplo:
1 2 3 4 5 6 7 |
<article> <h1>Entendendo o elemento time em HTML 5</h1> <p>Semântica é a palavra de ordem para os puristas do HTML...</p> <footer> <p>Artigo publicado em <time datetime="2021-02-05" pubdate>5 de fevereiro de 2021</time> </footer> </article> |
Suporte em navegadores
O elemento time foi definido pela W3C em 2009 e já conta com um suporte bastante abrangente entre os navegadores:
- Chrome 33+
- Firefox 22+
- Internet Explorer 9+
- Opera 22+
- Safari 7+
Conclusão
Para facilitar sistemas automáticos é necessário se manter uma web mais semântica. Com mais de uma década nas costas, não há desculpas para não se adotar o elemento <time> em seus projetos.
Você pode se interessar

Seus dados vazaram. E agora?
Carlos L. A. da Silva - 19 de fevereiro de 2021Seus dados pessoais foram vazados e essa é uma verdade praticamente inevitável. A meta agora é minimizar os possíveis danos e cobrar autoridades.

Como cortar texto sem usar uma linha de script
Carlos L. A. da Silva - 11 de janeiro de 2021Conheça o poder da propriedade text-overflow no CSS e nunca mais edite strings no braço.

Como começar a programar
Carlos L. A. da Silva - 7 de janeiro de 2021Então, você quer entrar nessa vida? A decisão é sua, mas nós podemos te ajudar com os primeiros passos.
Mais publicações



