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:
Entendendo o elemento time em HTML 5
Semântica é a palavra de ordem para os puristas do HTML...
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.
