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