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

Trybe e XP se unem na formação de novos desenvolvedores de software
Notícias
8 compartilhamentos108 visualizações
Notícias
8 compartilhamentos108 visualizações

Trybe e XP se unem na formação de novos desenvolvedores de software

Gabriel Fróes - 27 de julho de 2021

A Trybe e a XP Inc. se uniram e estão trazendo uma baita oportunidade pra você que quer entrar na área de desenvolvimento de softwares, quer muito ter uma excelente formação, mas não tem condições financeiras para tal. É a Turma XP que vai disponibilizar 300 vagas para o curso de desenvolvimento web da Trybe, […]

Lado a lado com a Inteligência Artificial: qual é o impacto que isso pode causar na programação?
Artigos
49 visualizações
Artigos
49 visualizações

Lado a lado com a Inteligência Artificial: qual é o impacto que isso pode causar na programação?

Carlos L. A. da Silva - 26 de julho de 2021

As máquinas vão dominar a programação e seu trabalho está ameaçado?

Por que usar Tailwind CSS
Artigos
277 visualizações
Artigos
277 visualizações

Por que usar Tailwind CSS

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

Shawn Swyx Wang desmistifica alguns preconceitos contra o framework e mostra que é bem fácil de aprender e muito prático.

Mais publicações

Os doze melhores scripts para galeria de imagens em 2021
Artigos
344 visualizações
344 visualizações

Os doze melhores scripts para galeria de imagens em 2021

Carlos L. A. da Silva - 28 de junho de 2021
Windows 11 vem aí?!
Artigos
474 visualizações
474 visualizações

Windows 11 vem aí?!

Carlos L. A. da Silva - 15 de junho de 2021
As “gambiarras” que os desenvolvedores de jogos utilizam
Artigos
637 visualizações
637 visualizações

As “gambiarras” que os desenvolvedores de jogos utilizam

Carlos L. A. da Silva - 6 de junho de 2021
Qual framework de PHP é o melhor para 2021?
Artigos
844 visualizações
844 visualizações

Qual framework de PHP é o melhor para 2021?

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