Close Menu
Código Simples .NETCódigo Simples .NET
    Facebook X (Twitter) Instagram
    Trending
    • Structured Prompt-Driven Development: quando o prompt deixa de ser conversa e vira artefato de engenharia
    • Observabilidade para agentes: por que logs e traces tradicionais já não bastam
    • Context engineering: quando o problema deixa de ser prompt e vira arquitetura
    • Clean Code (2ª edição): o que mudou e o que continua valendo
    • Sunk Cost em Arquitetura de Software: como evitar que meses de investimento virem uma armadilha
    • Guia Profissional de Prompting – Domando um ChatGPT Preguiçoso: Como Obter Respostas Completas, Profundas e Confiáveis
    • A Anatomia de um Prompt: Como Falar com a IA Como um Profissional de Tecnologia
    • Conheça os tipos de registros DNS: o guia completo sobre A, AAAA, NS, CNAME, MX, PTR, SOA, TXT, SRV, SPF e muito mais
    Facebook X (Twitter) Instagram
    Código Simples .NETCódigo Simples .NET
    Código Simples .NETCódigo Simples .NET
    Home»Front-End»O Elemento HTML “time”

    O Elemento HTML “time”

    Jhonathan SoaresBy Jhonathan Soares30 de junho de 20142 Mins Read Front-End
    Share
    Facebook Twitter LinkedIn WhatsApp Copy Link

    Bom, com tantos elementos HTML que surgiram nos últimos tempos com o HTML 5 espero trazer diferentes tags a cada semana que são de maneira no mínimo curiosa.

    Espero sempre trazer de maneira efetiva e clara o primeiro atributo : <time> </time>

    Bom, o elemento <time> em HTML representa uma data , tempo, ou duração que seja legível por máquina. Ele pode ser útil para criar programação de eventos, arquivamento e outras funções baseadas em tempo. 

    O Reddit utiliza o elemento de tempo em seu site, veja um exemplo: 

    time reddit

     

    Bom, antes da aplicação você deve saber que elemento tempo tem tido uma estrada difícil até agora. Foi adicionado às especificações do HTML5 em 2009. Dois anos mais tarde, em 2011, a especificação foi abandonado e substituído por um elemento muito mais amplo, <data>. Mais tarde nesse ano o elemento tempo foi adicionado de volta com algumas características renovadas. E até agora parece que se manteve e está começando a ganhar força no mercado, como o exemplo acima.

     

    Você pode usar o atributo basicamente de 10 maneiras :

    1. Ano e mês ( 2014-06 )
    2. Data comum ( 1969-07-16 )
    3. Data sem ano (12-31)
    4. Tempo somente ( 14:58:44 )
    5. Data e tempo ( 2013-11-20T14:58)
    6. Tempo de Zona ( +06:00)
    7. Data local e tempo (2013-15-31T23:59:59-02:00)
    8. Ano e Semana (2010-W21)
    9. Ano Somente (2005)
    10. Duração (P2DT2H30M10.501S) ou ( 1w 2d 2h 30m 10.501s )

    Veja um exemplo para você brincar :

    See the Pen Datetime Creator Tool by Chris Coyier (@chriscoyier) on CodePen.

    Bom,por hoje é só.
    Espero que tenham gostado 🙂

    Semana que vem volto com o atributo de endereços! Não percam !

    Share. Facebook Twitter LinkedIn Telegram WhatsApp Copy Link
    Jhonathan Soares
    • Website
    • Facebook
    • X (Twitter)
    • LinkedIn

    Criador do blog Código Simples e com mais 15 anos de experiência em TI, com títulos de MVP Microsoft na área de Visual Studio Development, Neo4j Top 50 Certificate, Scrum Master e MongoDB Evangelist.

    Posts Relacionados

    Happy Hour com Dados #17 – Azure vs AWS vs GCP

    Front-End 26 de maio de 20211 Min Read

    Blazor .NET – CRUD com MongoDB

    C# Front-End NoSql 2 de janeiro de 20195 Mins Read

    Introdução ao Blazor, o SPA da Microsoft

    C# Front-End 29 de dezembro de 20185 Mins Read
    Newsletter

    Digite seu endereço de e-mail para receber notificações de novas publicações por e-mail.

    Junte-se a 24mil outros assinantes
    Posts recentes
    • Structured Prompt-Driven Development: quando o prompt deixa de ser conversa e vira artefato de engenharia
    • Observabilidade para agentes: por que logs e traces tradicionais já não bastam
    • Context engineering: quando o problema deixa de ser prompt e vira arquitetura
    • Clean Code (2ª edição): o que mudou e o que continua valendo
    • Sunk Cost em Arquitetura de Software: como evitar que meses de investimento virem uma armadilha
    Categorias
    • Arquitetura (32)
      • Microsserviços (3)
      • Testes (2)
    • Asp.net (120)
      • C# (89)
      • Mvc (13)
    • Banco de dados (93)
      • NoSql (60)
      • Sql (38)
    • Boas práticas (35)
      • Gestão & Produtividade (5)
      • Metodologias Ágeis (6)
    • Cursos (53)
    • Dicas (108)
    • Front-End (92)
    • IA (9)
    • Linux (6)
    • NodeJS (4)
    • Post do Leitor (9)
    • Python (5)
    • Seo (12)
    • Tecnologia (30)
      • ITIL (1)
      • Padrões de Projeto (4)
    • Testes (2)

    VEJA TAMBÉM

    Cursos
    12 de fevereiro de 20166 Mins Read

    1000 livros gratuitos sobre programação!

    Olha que dica bacana! A pagina só com livros sobre programação é mantida no GitHub…

    30 APIs Gratuitas para desenvolvedores

    Código Simples no Facebook
    Código Simples no Facebook
    • Popular
    • Recente

    1000 livros gratuitos sobre programação!

    12 de fevereiro de 2016

    Google lança versão “invisível” do reCAPTCHA!

    10 de março de 2017

    Mini curso de HTML5 oferecido pela Microsoft

    30 de janeiro de 2014

    O que significa ( !important ) na declaração do CSS ?

    5 de fevereiro de 2014

    Programa para supercompactar arquivos. KGB Archiver.

    6 de fevereiro de 2014

    Structured Prompt-Driven Development: quando o prompt deixa de ser conversa e vira artefato de engenharia

    28 de abril de 2026

    Observabilidade para agentes: por que logs e traces tradicionais já não bastam

    23 de abril de 2026

    Context engineering: quando o problema deixa de ser prompt e vira arquitetura

    16 de abril de 2026

    Clean Code (2ª edição): o que mudou e o que continua valendo

    12 de fevereiro de 2026

    Sunk Cost em Arquitetura de Software: como evitar que meses de investimento virem uma armadilha

    4 de fevereiro de 2026
    Nosso Feed
    • RSS - Posts
    Fique por dentro

    Digite seu endereço de email para assinar este blog e receber notificações de novas publicações por email.

    Facebook X (Twitter) Instagram LinkedIn

    Type above and press Enter to search. Press Esc to cancel.

    Vá para versão mobile