Como utilizar o elemento semântico time

O elemento semântico time é uma forma de representarmos o tempo (data e horário) no HTML, confira como utilizar e boas práticas desta tag neste post!

Como utilizar o elemento semântico time?

Com a tag time podemos representar um tempo no formato de 24 horas ou uma data

Então sua utilização caracteriza-se na parte semântica quando queremos exibir datas precisas para o usuário

Quer se especializar em HTML e CSS? Veja o nosso catálogo de cursos.

Com este conceito de data precisa que o nosso código ganha valor semântico ao utilizar <time>

Um caso de uso interessante seria a data de um evento

Há só algumas ressalvas a utilização do time:

• O elemento não é adequado quando a data não pode ser calculada;
• Também não devemos utilizar a datas anteriores ao calendários Gregoriano;

obs: Estas informações foram retiradas do MDN, o link para esta documentação está no final do artigo.

Utilizando time na prática

Agora vamos ver como se utiliza a tag <time>

Primeiramente podemos utilizar com horário, veja:

<p>A festa começa as <time>23:00</time>, e o estacionamento abrirá as <time>21:00</time></p>

Neste caso é muito simples, apenas adicionamos o horário entre as tags do elemento

Já se optarmos por inserir datas, podemos fazer deste jeito:

<p>A cidade foi fundada em <time>1992-05-02</time></p>

Perceba que o tempo deve ser no formato: aaaa-mm-dd

Há também a possibilidade de especificarmos data sem dia e também sem ano, veja:

<!-- Data sem ano -->
<p>O dia do trabalhador é comemorado em <time>05-01</time></p>

<!-- Data sem dia -->
<p>Setembro deste ano: <time>2019-09</time></p>

Vemos então que <time> é bem flexível quanto as datas que podem ser exibidas, mas deve respeitar o formato aaaa-mm-dd

obs: Talvez por causa do formato fique difícil encaixar esta tag no Brasil, pois não é o nosso padrão

Conclusão

Neste post vimos que o elemento time é utilizado para representar um horário ou uma data

É aconselhado que esta data seja possível de ser calculada e que não seja anterior ao calendário Gregoriano

E por hoje é isso, até o próximo post!

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo 

Referências: MDN