0 Compartilhamentos 13 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

Seus dados vazaram. E agora?
Artigos
5 visualizações
Artigos
5 visualizações

Seus dados vazaram. E agora?

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

Seus 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
Dicas
19 visualizações
Dicas
19 visualizações

Como cortar texto sem usar uma linha de script

Carlos L. A. da Silva - 11 de janeiro de 2021

Conheça o poder da propriedade text-overflow no CSS e nunca mais edite strings no braço.

Como começar a programar
Artigos
26 visualizações
Artigos
26 visualizações

Como começar a programar

Carlos L. A. da Silva - 7 de janeiro de 2021

Então, você quer entrar nessa vida? A decisão é sua, mas nós podemos te ajudar com os primeiros passos.

Mais publicações

Como cancelar qualquer conta online para sempre
Dicas
28 visualizações
28 visualizações

Como cancelar qualquer conta online para sempre

Carlos L. A. da Silva - 30 de dezembro de 2020
Retrospectiva (positiva) de 2020
Artigos
31 visualizações
31 visualizações

Retrospectiva (positiva) de 2020

Carlos L. A. da Silva - 29 de dezembro de 2020
O que seria internet quântica?
Artigos
29 visualizações
29 visualizações

O que seria internet quântica?

Carlos L. A. da Silva - 23 de dezembro de 2020
Como fazer uma árvore de Natal… com CSS!
Dicas
37 visualizações
37 visualizações

Como fazer uma árvore de Natal… com CSS!

Carlos L. A. da Silva - 21 de dezembro de 2020