Elemento "time" do HTML5: uma abordagem detalhada

Quando se está criando uma página web, torna-se importante estruturar o código HTML de maneira que ele seja facilmente interpretado por sistemas automatizados, como o Google. Nesse contexto, os elementos semânticos, como a tag time (<time>), são muito úteis.

A tag time é usada para indicar um valor de tempo, como uma data e/ou hora. Para aprimorá-la, é recomendável incluir o atributo datetime. Embora não seja absolutamente necessário, ele também possui um significado semântico.

O atributo datetime contribui para a acessibilidade da página web e pode ser reconhecido por buscadores como Google, Bing, DuckDuckGo, Yahoo! Search, entre outros. Esses mecanismos de busca podem identificar a data/hora especificada e incorporá-la aos resultados da pesquisa.

Abaixo, você encontrará um exemplo simples de como usar o elemento time:

Bloco #1<time datetime="2022-12-01">01 de dezembro de 2022</time>

No exemplo do Bloco #1, observa-se que o elemento time contém uma data em um formato que os usuários podem entender facilmente. Temos também o atributo datetime, que deve sempre ter como base o mesmo valor de tempo do time, mas em conformidade com o formato ISO 8601.

Existem três opções de utilização do elemento time:

• Você pode especificar uma data, a qual deve ter como base o calendário gregoriano;
• Você pode especificar um horário, o qual deve ter como base um relógio de 24 horas;
• Você pode especificar uma data e um horário, tendo como base o calendário gregoriano e um relógio de 24 horas.

Veja nos exemplos abaixo:

Bloco #2<time datetime="2021">2021</time>

Acima, no Bloco #2, foi especificado apenas o ano;

Bloco #3<time datetime="2023-04-25">25 de abril de 2023</time>

Acima, no Bloco #3, foram especificados o dia, o mês e o ano;

Bloco #4<time datetime="23:10">23h e 10min</time>

Acima, no Bloco #4, foram especificados as horas e os minutos;

Bloco #5<time datetime="19:20:32">19h, 20min e 32s</time>

Acima, no Bloco #5, foram especificados as horas, os minutos e os segundos;

Bloco #6<time datetime="2019-05-20T16:35">20 de maio de 2019, 16h35min</time>

Acima, no Bloco #6, foram especificados o dia, o mês, o ano, as horas e os minutos;

Bloco #7<time datetime="2018-09-15T03:14:20-03:00">15 de setembro de 2018, 03h14min20s (Fuso horário de Brasília, Brasil)</time>

Acima, no Bloco #7, foram especificados o dia, o mês, o ano, as horas, os minutos, os segundos e o fuso horário.

O elemento time é frequentemente utilizado para indicar a data/hora em que um artigo ou postagem foi publicado. Abaixo, temos um exemplo de um artigo fictício que utiliza o time para marcar semanticamente a data e o horário da publicação. Veja o código a seguir:

Bloco #8<article>

	<header>
		<h1>Título do artigo</h1>
		<time datetime="2017-01-25T09:16:02-03:00">25 de janeiro de 2017 às 09h16min</time>
	</header>

	<p>Corpo do artigo...</p>

</article>

No exemplo do Bloco #8, o elemento header (<header>) é utilizado para destacar que as informações dentro dele compõem o cabeçalho do artigo, inserido entre as tags article (<article>). Essa estruturação é importante, pois permite que sistemas automatizados entendam que o elemento time, por estar diretamente dentro do header, indica a data/hora de publicação do artigo.

Outro uso frequente do elemento time é para indicar a data/hora de cada postagem em uma listagem de posts. Abaixo, apresentamos um exemplo mais detalhado em HTML de como utilizar esse elemento para esse propósito específico:

Bloco #9<section>

	<h1>Listagem de posts</h1>

	<article>
		<h2>
			<a href="#">Postagem 1</a>
		</h2>
		<time datetime="2020-01-01">01 de janeiro de 2020</time>
	</article>

	<article>
		<h2>
			<a href="#">Postagem 2</a>
		</h2>
		<time datetime="2021-02-02">02 de fevereiro de 2021</time>
	</article>

	<article>
		<h2>
			<a href="#">Postagem 3</a>
		</h2>
		<time datetime="2022-03-03">03 de março de 2022</time>
	</article>

</section>

No Bloco #9 acima, observe que entre as tags section (<section>), há uma listagem de posts onde cada article contém um elemento time especificando a data exata em que cada postagem foi publicada.

DICA: Quando um artigo é postado na web, é possível que sistemas automatizados reconheçam a data/hora em que ele foi publicado ou atualizado. Mas, para isso, além de utilizar corretamente o elemento time, também é recomendado que você faça o uso de dados estruturados, como, por exemplo, o JSON-LD, os quais são adicionados no código da página por meio de marcações.

Também é semanticamente correto utilizar o elemento time para indicar a data/hora de um evento específico, como, por exemplo, o lançamento de um jogo, uma reunião ou um fenômeno astronômico. No bloco de código a seguir (Bloco #10), você verá um caso prático:

Bloco #10<article>

	<header>
		<h1>Resident Evil 4 Remake ganha data de lançamento</h1>
		<time datetime="2022-06-02T21:06:00-03:00">02 de junho de 2022 às 21h06min</time>
	</header>

	<p>Resident Evil 4 Remake tem data de lançamento marcada para <time datetime="2023-03-24">24 de março de 2023</time>, sendo lançado nas seguintes plataformas: PlayStation 4 (PS4), PlayStation 5 (PS5), Xbox Series X, Xbox Series S e PC (via Steam).</p>

</article>

Acima, no Bloco #10, encontramos um artigo intitulado "Resident Evil 4 Remake ganha data de lançamento". Nesse artigo, há dois elementos time: o primeiro indica a data e hora de publicação do artigo, e o segundo indica a data de lançamento do jogo Resident Evil 4 Remake.

pubdate

AVISO: O atributo pubdate não é recomendado para uso, pois ele não faz parte das especificações atuais da WHATWG. Além disso, a ferramenta de validação do W3C indica que o pubdate não está disponível para uso no momento.

O uso do atributo pubdate no elemento time é destinado a ajudar sistemas automatizados a determinar se a data/hora está relacionada à publicação de um artigo específico ou da página inteira.

Se o time com o atributo pubdate for descendente de um elemento article, a data/hora refere-se ao artigo. Caso contrário, se não houver essa relação de descendência, a data/hora indica a publicação da página web como um todo.

Abaixo está um exemplo prático da incorporação do atributo pubdate no elemento time:

Bloco #11<time datetime="2018-01-14T17:12:29-03:00" pubdate>14 de janeiro de 2018 às 17h12min</time>

Conforme mostrado no Bloco #11 acima, não é necessário atribuir um valor ao atributo pubdate; você também pode utilizá-lo em conjunto com o atributo datetime.