0 Compartilhamentos 332 Views

Entendendo o elemento time em HTML 5

5 de fevereiro de 2021

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:

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:

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:

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:

Determinado dia, sem ano especificado

Utiliza-se o formato mm-dd. Como em:

Determinado ano, sem mais nada especificado

Utiliza-se o formato yyyy. Como em:

Determinada semana do ano

Aqui fugimos um pouco do padrão adotado e passamos a especificar como yyyy-W#. Como em:

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:

Conciliando data e horários

É possível combinar formatos usando o padrão yyyy-mm-ddTHH:MM[:SS[.mmm]]. Como em:

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:

Conciliando tudo que aprendemos, uma data e um horário completos seriam:

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:

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.

Carregando...

Você pode se interessar

O que é o FLoC e como ele afeta sua privacidade na internet?
Artigos
50 visualizações
Artigos
50 visualizações

O que é o FLoC e como ele afeta sua privacidade na internet?

Carlos L. A. da Silva - 5 de maio de 2021

Federated Learning of Cohorts é uma API proposta pelo Google para substituir os cookies, mas ela também oferece problemas

Como planejar e construir um projeto de programação
Artigos
272 visualizações
Artigos
272 visualizações

Como planejar e construir um projeto de programação

Carlos L. A. da Silva - 19 de abril de 2021

O desenvolvedor full stack Peter Lynch revela seu método de preparação para qualquer projeto, de forma simples e direta para iniciantes e veteranos.

15 ferramentas de desenvolvimento para melhorar sua produtividade em 2021 sem gastar nada
Artigos
383 visualizações
Artigos
383 visualizações

15 ferramentas de desenvolvimento para melhorar sua produtividade em 2021 sem gastar nada

Carlos L. A. da Silva - 2 de abril de 2021

O cenário de desenvolvimento está em constante mudança e muitas vezes uma ferramenta nova pode agilizar muito seu trabalho.

Mais publicações

A tecnologia por trás do deep fake de Deep Nostalgia
Artigos
368 visualizações
368 visualizações

A tecnologia por trás do deep fake de Deep Nostalgia

Carlos L. A. da Silva - 22 de março de 2021
Como se tornar um Engenheiro DevOps em 2021
Artigos
342 visualizações
342 visualizações

Como se tornar um Engenheiro DevOps em 2021

Carlos L. A. da Silva - 1 de março de 2021
Seus dados vazaram. E agora?
Artigos
312 visualizações
312 visualizações

Seus dados vazaram. E agora?

Carlos L. A. da Silva - 19 de fevereiro de 2021