Marcar <tempo> em HTML

O objetivo deste artigo é explorar o tempo de etiqueta com exemplos para garantir que os objetivos de aprendizagem sejam alcançados.

A tag <time> em HTML é usada para representar uma data e/ou hora específica. Ele fornece significado semântico ao conteúdo, tornando mais fácil para as máquinas (como mecanismos de pesquisa e leitores de tela) entender as informações da página. A tag <time> pode ser usada para exibir uma data e/ou hora em um formato legível por humanos e também pode incluir atributos adicionais para fornecer mais informações sobre a hora que está sendo representada.

Aqui está um exemplo básico de hora e data:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<p>Event starts at: <time datetime="2022-06-01T19:00">September 11th, 2023 9:00 PM</time></p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está outro exemplo da tag <time> em ação:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<p>The movie <i>Jurassic Park</i> was released on <time datetime="1993-06-11">June 11th, 1993</time>.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo de como usar a tag <time> para marcar uma duração de tempo específica:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<p>The song <i>Stairway to Heaven</i> by Led Zeppelin has a duration of <time datetime="PT8M2S">8 minutes and 2 seconds</time>.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Como estilizar a tag <time> em HTML usando CSS:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<style>
#mtime {
font-weight: bold;
color: maroon;
}
time::before {
content: "Date: ";
}
</style>
</head>
<body>
<p>I will be available for a meeting on <time id="mtime" datetime="2023-02-01T10:00">June 1st at 8:00 AM</time>.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


Marcar usos de tempo

A tag Time <time> descreve uma determinada hora (ou datetime).

Um atributo datetime é usado para converter a hora em uma estrutura legível por máquina para que os navegadores possam oferecer lembretes de data no calendário do usuário e os mecanismos de pesquisa possam realizar pesquisas mais eficazes.

A tag <time> em HTML pode ser usada para vários propósitos, incluindo:

  • A tag <time> pode ser usada para exibir uma data e/ou hora específica em um formato legível por humanos. Isso pode ser útil para indicar quando um evento está acontecendo ou quando o conteúdo foi publicado.
  • O atributo datetime da tag <time> pode ser usado para fornecer um formato legível por máquina para a data e/ou hora que está sendo exibida. Isso pode ser útil para mecanismos de pesquisa ou outro software que possa estar procurando por informações específicas na página.
  • A tag <time> também pode ser usada para representar uma duração ou período de tempo. Isso pode ser útil para indicar a duração de um evento ou a duração de um conteúdo.
  • A tag <time> pode incluir atributos adicionais, como datetime com um deslocamento de fuso horário, para fornecer mais informações sobre a hora que está sendo representada.
  • A tag <time> também pode ser usada para fornecer contexto para uma data ou hora específica. Por exemplo, você pode usar a tag <time> para indicar a data de um evento histórico ou a hora em que uma determinada notícia foi divulgada.

Atributos

Global

O Tag Time <time> também é compatível com Atributos Globais em HTML.

Evento

A Tag <time> também aceita Atributos de Evento em HTML.


Lista de Atributos

Atributo Valor Visão geral
data hora data hora Forneça um formulário legível por máquina para o elemento <time>


Compatibilidade do navegador

Abaixo está uma lista da versão mais antiga do navegador que acomodou totalmente o elemento.

Elemento
<tempo> 62,0 18,0 22,0 7,0 49,0

Vantagens do tempo de marcação HTML

A tag <time> em HTML tem várias vantagens:

  • Ao usar a tag <time> para representar datas e horários específicos, você fornece significado semântico ao conteúdo da sua página. Isso torna mais fácil para os mecanismos de pesquisa e leitores de tela entender as informações apresentadas.
  • Ao fornecer dados legíveis por máquina com o atributo datetime, você também melhora a acessibilidade do seu site. Leitores de tela e outras tecnologias assistivas podem usar essas informações para fornecer uma experiência melhor para usuários com deficiências.
  • A tag <time> pode fornecer uma experiência mais amigável ao exibir datas e horas em um formato legível por humanos. Isso pode tornar mais fácil para os visitantes entenderem quando os eventos estão acontecendo ou quando o conteúdo foi publicado.
  • Ao fornecer dados legíveis por máquina com o atributo datetime, você também melhora a otimização do mecanismo de pesquisa (SEO) do seu site. Os mecanismos de pesquisa podem usar essas informações para fornecer resultados de pesquisa mais relevantes aos usuários.
Deixe sua reação abaixo como uma forma de sua experiência neste site.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone