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 <span> e <a>) e deve ter uma tag de fechamento (como <div> e <span>). 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:
—
Texto traduzido e adaptado do [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 <span> e <a>) e deve ter uma tag de fechamento (como <div> e <span>). 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:
—
Texto traduzido e adaptado do]5 escrito pelo Aurelio De Rosa em 16 de setembro de 2014.
Tradução autorizada pelo SitePoint.
Qualquer erro ou sugestão de melhoria na tradução, é bem vinda!
