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:
Aqui está outro exemplo da tag <time> em ação:
Example:
Aqui está um exemplo de como usar a tag <time> para marcar uma duração de tempo específica:
Example:
Como estilizar a tag <time> em HTML usando CSS:
Example:
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.