> ## Content Index > Fetch the complete content index at: https://productoversee.com/llms.txt > Use this file to discover other available public pages before exploring further. # Um guia para o elemento ‘time’ do HTML5 - URL: https://productoversee.com/blog/um-guia-para-o-elemento-time-do-html5/ - Published: 2014-09-29T03:00:00.000Z - Updated: 2023-01-24T04:00:07.000Z - Description: Conheça mais detalhes sobre a tag Time. Ela parece inocente, mas guarda vários segredos. - Author: Raphael Fabeni - Tags: Desenvolvimento, #blog O HTML5 trouxe diversas coisas bacanas pra nós desenvolvedores. Uma das mais simples e que eu acho que são uma das mais legais é a questão da semântica com os novos elementos. O surgimento dessas *tags* deixaram nossos códigos mais semânticos e legíveis, tanto por nós como pelas máquinas. Um desses elementos é o `time`. Já havia lido sobre ele, mas nunca tinha ido muito a fundo. Esses dias encontrei um texto do Aurelio De Rosa no SitePoint que explica bastante coisa sobre este elemento e resolvi traduzir pra gente. — Tempo – uma das poucas coisas que sabemos que é infinita. Os seres humanos, bem como animais e plantas, têm lidado com o tempo desde o início de sua existência. Na web essa necessidade não é diferente. Mesmo nesse meio, precisamos nos comunicar com outras pessoas de que alguma coisa aconteceu em um determinado ponto, em uma data específica, ou em relação a um outro tempo definido. Antes do HTML5 não tivemos nenhum elemento para marcar semanticamente uma data ou hora. Nos últimos anos, outras soluções, como os Microformats e Microdata, tentaram preencher esta lacuna para situações específicas (data de nascimento, a publicação de um livro, e assim por diante). Nesse artigo eu irei cobrir o elemento `time` do HTML5, o que ajuda a responder à necessidade de que acabamos de discutir. ## **O que é o elemento `time`?** O elemento `time` foi introduzido na especificação do HTML5 em 2009\. Então, em 2011 foi trocado em favor do `data`. Então, em seguida, o elemento foi reintroduzido e melhorado para permitir novos formatos de data/hora. A partir deste ponto você pode ver que as especificações podem ser bastante controversas. O elemento `time` representa uma data e/ou um tempo no calendário gregoriano. É um elemento inline (como `` e ``) e deve ter uma tag de fechamento (como `
` e ``). Quando usado na sua forma mais simples, o conteúdo do elemento deve ser uma string de data e/ou tempo válidas. Um exemplo abaixo: No código acima, eu estou definindo uma data, especificamente 1º de fevereiro de 2009\. O formato utilizado no código (aaaa-mm-dd) deve ser familiar para você se você já mexeu algum tempo com Linux, mas, como veremos mais adiante neste artigo, este não é o único formato válido. No primeiro esboço das especificações, datas precisas eram um dos poucos formatos que você podia escrever. Por exemplo, você não podia especificar uma data como “Novembro 2014” ou “476” (o início da Idade Média). Isso foi um grande problema para vários casos, como a datação de uma pintura ou de um acontecimento histórico pois não havia uma data precisa. Felizmente, esse tipo de data agora é permitida na especificação. Então, hoje nós podemos descrever um determinado mês de um ano sem um dia: ## **O atributo `datetime`** A especificação para o elemento também padronizou um atributo chamado de `datetime`. Ao escrevermos datas como nos formatos discutidos na seção anterior, pode funciona em alguns países/culturas, como pode não atender outros. Por exemplo, os italianos (e nós brasileiros) escrevem datas usando o formato *dd/mm/aaaa*. Portanto, mostrar uma data em outro formato pode gerar confusão. Este problema pode ser facilmente resolvido usando o atributo `datetime` do elemento `time`. É um atributo opcional que contém as informações em um formato legível por uma máquina, como os observados nos exemplos anteriores, o que nos permite que possamos escrever o conteúdo do elemento da qualquer maneira que nós quisermos. Na verdade, se o atributo `datetime` não for especificado, o conteúdo deve estar em um dos formatos de data/hora válidos, caso contrário, podemos usá-lo como quisermos. Isso é ótimo porque nos permite escrever um código assim: Ou assim: Ambos exemplos possuem um conteúdo de data que não é legível por uma máquina de acordo com a especificação, mas são aceitáveis​​, por causa da presença do atributo `datetime`, que *faz uso* de um formato válido. À primeira vista, isso pode parecer estranho. Mas o conteúdo do elemento foi concebido para servir os seres humanos, não máquinas. Além disso, esse fato permite a internacionalização das datas. Por exemplo: No código acima temos a mesma mensagem anterior, só que em Italiano. ## **O atributo `pubdate`** Os primeiros rascunhos da especificação definiam um atributo `pubdate` para o elemento `time`. Este atributo era um *booleano* que indicava que uma determinada data era a data de publicação do elemento pai `article` ou, em caso de ausência de elemento `article` pai, de todo o documento. Você poderia escrever por exemplo: Nesse caso, 05 de setembro de 2014 seria a data de publicação desse `article`. Eu fui um grande fã deste atributo desde que aprendi bastante sobre isso, mas, infelizmente, ele foi removido da especificação. Essa decisão criou um grande problema, porque um grande número de pessoas (inclusive eu) usam a data de publicação para julgar o frescor e a relevância de um artigo ou notícia. Embora seja verdade que você ainda possa acessar a página de um artigo e ver a data de publicação, precisamos de uma forma padrão para uma máquina de ler a data. No atual momento não existe um atributo que substitua `pubdate`, mas você pode empregar o BlogPosting schema, e especificamente o valor `datePublished` como mostrado abaixo: Agora que você tem um *overview* completo do elemento `time`, vamos ver os diversos formatos permitidos. Os formatos validos para o conteúdo do elemento `time` na ausência do atributo `datetime` e para esse atributo em si são descritos nos itens seguintes. ## **Um mês válido** Deve ser uma *string* especificando um mês específico de um ano no formato **aaaa-mm**. Por exemplo: ## **Uma data válida (dia do mês)** Deve ser uma *string* especificando uma data precisa no formato **aaaa-mm-dd**. Por exemplo: ## **Uma data válida sem ano** Deve ser uma *string* especificando um mês e um dia sem um ano no formato **mm-dd**. Por exemplo: ## **Um tempo válido** Deve ser uma *string* especificando um tempo sem uma data e usando o formato 24 horas, da seguinte maneira **HH:MM\[:SS\[.mm\]\]** onde: - **H** são horas - **M** são minutos - **S** são segundos - **m** são milisegundos - Os *brackets* indicam partes que são opcionais. Um exemplo desse formato mostrado abaixo: ## **Uma data e hora *flutuante* válida** Esse formato é apresentado na especificação do W3C, mas não na versão WHATWG. Deve ser uma data e um tempo precisos no formato **aaaa-mm-ddTHH:MM\[:SS\[.mm\]\]** ou **aaaa-mm-dd HH:MM\[:SS\[.mmm\]\]**. Por exemplo: ## **Um fuso horário válido** Deve ser uma *string* representando um fuso horário. Por exemplo: ## **Uma data e tempo global válidos** Deve ser uma *string* representando uma data completa, incluindo tempo e fuso horário. Por exemplo: ## **Uma semana válida** Deve ser uma *string* representando uma semana do ano. Por exemplo: ## **Um ano válido** Deve ser uma *string* representando um ano. Por exemplo: ## **Uma *string* válida de duração** Deve ser uma *string* representando uma duração. Uma duração pode começar com o prefixo *“P”* (para *período*) e usa *“D”* para marcar os *dias*. Por exemplo: Em caso da necessidade de especificar melhor o período, após o *“D”*, você pode adicionar um *“T”*, que significa *tempo*, e usar *“H”* para *horas*, *“M”* para *minutos* e *“S”* para *segundos*. Assim: Esse formato também permite a você especificar um ou mais componentes de duração de tempo. ## **Limitações** A especificação atual tem algumas limitações no que você pode definir com o elemento `time`. Uma dessas limitações é que você não pode indicar intervalos de datas. Então, se você estiver escrevendo um post sobre uma conferência que dura mais de um dia, por exemplo a partir de 26 de junho de 2014 a 28 de junho de 2014, você terá que usar dois elementos `time`. Um bom exemplo pode ser encontrado na página sobre palestras do meu website, onde eu uso o elemento `time`, como mostrado abaixo: Outra limitação é que você não pode usar o elemento `time` para representar datas antes da Era Comum. ## **Suporte** Baseado no artigo no MDN, o suporte do elemento `time` é: - Chrome 33+ - Firefox 22+ - Internet Explorer 9+ - Opera 22+ - Safari 7+ No entanto, não há muito o que se preocupar sobre navegadores antigos. Na verdade, em caso do navegador não oferecer suporte para o elemento, ele será renderizado como um elemento *inline* desconhecido. ## **Conclusão** Se você ainda não começou a usar o elemento `time` nas suas páginas, eu espero que esse guia lhe inspire a começar. Para mais informações, aqui vão alguns links relevantes: - [`) e deve ter uma tag de fechamento (como `
` e ``). Quando usado na sua forma mais simples, o conteúdo do elemento deve ser uma string de data e/ou tempo válidas. Um exemplo abaixo: No código acima, eu estou definindo uma data, especificamente 1º de fevereiro de 2009\. O formato utilizado no código (aaaa-mm-dd) deve ser familiar para você se você já mexeu algum tempo com Linux, mas, como veremos mais adiante neste artigo, este não é o único formato válido. No primeiro esboço das especificações, datas precisas eram um dos poucos formatos que você podia escrever. Por exemplo, você não podia especificar uma data como “Novembro 2014” ou “476” (o início da Idade Média). Isso foi um grande problema para vários casos, como a datação de uma pintura ou de um acontecimento histórico pois não havia uma data precisa. Felizmente, esse tipo de data agora é permitida na especificação. Então, hoje nós podemos descrever um determinado mês de um ano sem um dia: ## **O atributo `datetime`** A especificação para o elemento também padronizou um atributo chamado de `datetime`. Ao escrevermos datas como nos formatos discutidos na seção anterior, pode funciona em alguns países/culturas, como pode não atender outros. Por exemplo, os italianos (e nós brasileiros) escrevem datas usando o formato *dd/mm/aaaa*. Portanto, mostrar uma data em outro formato pode gerar confusão. Este problema pode ser facilmente resolvido usando o atributo `datetime` do elemento `time`. É um atributo opcional que contém as informações em um formato legível por uma máquina, como os observados nos exemplos anteriores, o que nos permite que possamos escrever o conteúdo do elemento da qualquer maneira que nós quisermos. Na verdade, se o atributo `datetime` não for especificado, o conteúdo deve estar em um dos formatos de data/hora válidos, caso contrário, podemos usá-lo como quisermos. Isso é ótimo porque nos permite escrever um código assim: Ou assim: Ambos exemplos possuem um conteúdo de data que não é legível por uma máquina de acordo com a especificação, mas são aceitáveis​​, por causa da presença do atributo `datetime`, que *faz uso* de um formato válido. À primeira vista, isso pode parecer estranho. Mas o conteúdo do elemento foi concebido para servir os seres humanos, não máquinas. Além disso, esse fato permite a internacionalização das datas. Por exemplo: No código acima temos a mesma mensagem anterior, só que em Italiano. ## **O atributo `pubdate`** Os primeiros rascunhos da especificação definiam um atributo `pubdate` para o elemento `time`. Este atributo era um *booleano* que indicava que uma determinada data era a data de publicação do elemento pai `article` ou, em caso de ausência de elemento `article` pai, de todo o documento. Você poderia escrever por exemplo: Nesse caso, 05 de setembro de 2014 seria a data de publicação desse `article`. Eu fui um grande fã deste atributo desde que aprendi bastante sobre isso, mas, infelizmente, ele foi removido da especificação. Essa decisão criou um grande problema, porque um grande número de pessoas (inclusive eu) usam a data de publicação para julgar o frescor e a relevância de um artigo ou notícia. Embora seja verdade que você ainda possa acessar a página de um artigo e ver a data de publicação, precisamos de uma forma padrão para uma máquina de ler a data. No atual momento não existe um atributo que substitua `pubdate`, mas você pode empregar o BlogPosting schema, e especificamente o valor `datePublished` como mostrado abaixo: Agora que você tem um *overview* completo do elemento `time`, vamos ver os diversos formatos permitidos. Os formatos validos para o conteúdo do elemento `time` na ausência do atributo `datetime` e para esse atributo em si são descritos nos itens seguintes. ## **Um mês válido** Deve ser uma *string* especificando um mês específico de um ano no formato **aaaa-mm**. Por exemplo: ## **Uma data válida (dia do mês)** Deve ser uma *string* especificando uma data precisa no formato **aaaa-mm-dd**. Por exemplo: ## **Uma data válida sem ano** Deve ser uma *string* especificando um mês e um dia sem um ano no formato **mm-dd**. Por exemplo: ## **Um tempo válido** Deve ser uma *string* especificando um tempo sem uma data e usando o formato 24 horas, da seguinte maneira **HH:MM\[:SS\[.mm\]\]** onde: - **H** são horas - **M** são minutos - **S** são segundos - **m** são milisegundos - Os *brackets* indicam partes que são opcionais. Um exemplo desse formato mostrado abaixo: ## **Uma data e hora *flutuante* válida** Esse formato é apresentado na especificação do W3C, mas não na versão WHATWG. Deve ser uma data e um tempo precisos no formato **aaaa-mm-ddTHH:MM\[:SS\[.mm\]\]** ou **aaaa-mm-dd HH:MM\[:SS\[.mmm\]\]**. Por exemplo: ## **Um fuso horário válido** Deve ser uma *string* representando um fuso horário. Por exemplo: ## **Uma data e tempo global válidos** Deve ser uma *string* representando uma data completa, incluindo tempo e fuso horário. Por exemplo: ## **Uma semana válida** Deve ser uma *string* representando uma semana do ano. Por exemplo: ## **Um ano válido** Deve ser uma *string* representando um ano. Por exemplo: ## **Uma *string* válida de duração** Deve ser uma *string* representando uma duração. Uma duração pode começar com o prefixo *“P”* (para *período*) e usa *“D”* para marcar os *dias*. Por exemplo: Em caso da necessidade de especificar melhor o período, após o *“D”*, você pode adicionar um *“T”*, que significa *tempo*, e usar *“H”* para *horas*, *“M”* para *minutos* e *“S”* para *segundos*. Assim: Esse formato também permite a você especificar um ou mais componentes de duração de tempo. ## **Limitações** A especificação atual tem algumas limitações no que você pode definir com o elemento `time`. Uma dessas limitações é que você não pode indicar intervalos de datas. Então, se você estiver escrevendo um post sobre uma conferência que dura mais de um dia, por exemplo a partir de 26 de junho de 2014 a 28 de junho de 2014, você terá que usar dois elementos `time`. Um bom exemplo pode ser encontrado na página sobre palestras do meu website, onde eu uso o elemento `time`, como mostrado abaixo: Outra limitação é que você não pode usar o elemento `time` para representar datas antes da Era Comum. ## **Suporte** Baseado no artigo no MDN, o suporte do elemento `time` é: - Chrome 33+ - Firefox 22+ - Internet Explorer 9+ - Opera 22+ - Safari 7+ No entanto, não há muito o que se preocupar sobre navegadores antigos. Na verdade, em caso do navegador não oferecer suporte para o elemento, ele será renderizado como um elemento *inline* desconhecido. ## **Conclusão** Se você ainda não começou a usar o elemento `time` nas suas páginas, eu espero que esse guia lhe inspire a começar. Para mais informações, aqui vão alguns links relevantes: - [