Introdução
Neste laboratório, você explorará a tag HTML5 semântica <time> e aprenderá como usá-la efetivamente para representar datas e horas em documentos web. O laboratório se concentra em entender as características principais da tag <time>, como fornecer dados temporais legíveis por máquina, mantendo o texto legível por humanos, e demonstrar sua implementação em vários contextos HTML.
Através de uma abordagem passo a passo, você criará um arquivo HTML, adicionará tags <time> com atributos datetime e entenderá como este elemento semântico aprimora a acessibilidade web e fornece informações estruturadas sobre datas e horas. Ao final do laboratório, você terá experiência prática no uso da tag <time> para melhorar o significado semântico dos dados temporais em páginas web.
Entenda os Fundamentos da Tag Time
Nesta etapa, você aprenderá sobre a tag HTML5 <time>, um elemento semântico projetado para representar datas e horas em um formato legível por máquina. A tag <time> ajuda a melhorar a acessibilidade web e fornece informações estruturadas sobre dados temporais.
As principais características da tag <time> incluem:
- Representa um período específico no tempo
- Pode conter texto legível por humanos
- Suporta um atributo
datetimelegível por máquina - Aprimora o significado semântico das informações de data e hora em páginas web
Aqui está um exemplo básico para ilustrar a tag <time>:
<p>A conferência está agendada para <time>2023-09-15</time>.</p>
Neste exemplo, a tag <time> permite que leitores humanos vejam a data e que as máquinas analisem o formato exato da data.
Outro exemplo mostrando diferentes maneiras de usar a tag <time>:
<article>
<h2>Publicação do Laboratório</h2>
<p>Publicado em <time datetime="2023-06-20">20 de junho de 2023</time></p>
</article>
O atributo datetime fornece um formato de data padronizado e legível por máquina, enquanto o texto visível permanece amigável ao usuário.
Crie um Arquivo HTML com a Tag Time
Nesta etapa, você criará um arquivo HTML que demonstra o uso da tag <time>. Você usará o WebIDE para criar e editar um documento HTML no diretório ~/project.
Primeiro, navegue até o diretório do projeto e crie um novo arquivo HTML chamado event-schedule.html:
cd ~/project
Abra o WebIDE e crie um novo arquivo chamado event-schedule.html. Em seguida, adicione o seguinte conteúdo HTML:
touch event-schedule.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Event Schedule</title>
</head>
<body>
<h1>Upcoming Tech Conference</h1>
<article>
<h2>Conference Details</h2>
<p>The annual tech conference will be held on <time>2023-09-15</time>.</p>
</article>
</body>
</html>
Exemplo de saída quando visualizado em um navegador web:
Notas: Saiba mais sobre Como visualizar arquivos HTML no WebIDE.
Este exemplo demonstra como usar a tag <time> dentro de um parágrafo para representar uma data específica. A tag fornece significado semântico à data, tornando mais fácil para navegadores e tecnologias assistivas entenderem as informações temporais.
Adicionar o Atributo Datetime à Tag Time
Nesta etapa, você aprenderá como aprimorar a tag <time> adicionando o atributo datetime. O atributo datetime fornece um formato legível por máquina para datas e horas, tornando o conteúdo mais acessível e semanticamente significativo.
Abra o arquivo event-schedule.html no WebIDE e modifique a tag <time> existente para incluir o atributo datetime:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Event Schedule</title>
</head>
<body>
<h1>Upcoming Tech Conference</h1>
<article>
<h2>Conference Details</h2>
<p>
The annual tech conference will be held on
<time datetime="2023-09-15">September 15, 2023</time>.
</p>
<h3>Session Timing</h3>
<p>Morning keynote starts at <time datetime="09:00">9:00 AM</time>.</p>
</article>
</body>
</html>
O atributo datetime oferece vários benefícios:
- Fornece um formato de data/hora padronizado e legível por máquina
- Permite texto de exibição diferente do valor real da data/hora
- Suporta vários formatos, como datas completas, horas e combinações de data/hora
Exemplos de formatos para o atributo datetime:
- Data completa:
2023-09-15 - Hora:
09:00 - Data/hora:
2023-09-15T09:00 - Com fuso horário:
2023-09-15T09:00Z
Exemplo de saída quando visualizado em um navegador web:
Upcoming Tech Conference
Conference Details
The annual tech conference will be held on September 15, 2023.
Session Timing
Morning keynote starts at 9:00 AM.
Explore a Tag Time com o Atributo Pubdate
Nesta etapa, você aprenderá sobre o atributo pubdate, um atributo booleano especial para a tag <time> que indica a data de publicação de um artigo ou postagem de blog. Embora agora seja considerado obsoleto no HTML5, entender seu uso histórico fornece insights sobre o HTML semântico.
Abra o arquivo event-schedule.html no WebIDE e modifique o conteúdo para incluir um exemplo de postagem de blog com o atributo pubdate:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tech Blog Post</title>
</head>
<body>
<article>
<h1>Latest Tech Insights</h1>
<header>
<h2>HTML5 Semantic Elements</h2>
<p>
Published on
<time datetime="2023-06-20" pubdate>June 20, 2023</time>
</p>
</header>
<p>In this article, we explore the semantic meaning of HTML5 tags...</p>
<footer>
<p>
Updated on
<time datetime="2023-06-22">June 22, 2023</time>
</p>
</footer>
</article>
</body>
</html>
Pontos-chave sobre o atributo pubdate:
- É um atributo booleano (nenhum valor é necessário)
- Indica a data de publicação de um artigo
- Obsoleto no HTML5, mas ainda suportado por muitos navegadores
- Tipicamente usado dentro de tags
<article>
Exemplo de saída quando visualizado em um navegador web:
Latest Tech Insights
HTML5 Semantic Elements
Published on June 20, 2023
In this article, we explore the semantic meaning of HTML5 tags...
Updated on June 22, 2023
Observação: Embora pubdate agora seja considerado obsoleto, ele demonstra a evolução do HTML semântico e a importância de fornecer informações de data legíveis por máquina.
Verificar a Implementação da Tag Time
Nesta etapa final, você revisará e validará a implementação da tag <time> em seu documento HTML. Você criará um exemplo abrangente que demonstra as várias maneiras de usar a tag <time> com diferentes atributos e contextos.
Abra o arquivo event-schedule.html no WebIDE e atualize-o com um exemplo completo:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tech Event Showcase</title>
</head>
<body>
<article>
<h1>Web Development Conference</h1>
<section>
<h2>Event Details</h2>
<p>
Conference Date:
<time datetime="2023-09-15">September 15, 2023</time>
</p>
<p>
Start Time:
<time datetime="09:00">9:00 AM</time>
</p>
</section>
<section>
<h2>Blog Post</h2>
<article>
<h3>HTML5 Semantic Elements</h3>
<p>
Published on
<time datetime="2023-06-20" pubdate>June 20, 2023</time>
</p>
<p>
Last Updated:
<time datetime="2023-06-22">June 22, 2023</time>
</p>
</article>
</section>
</article>
</body>
</html>
Lista de verificação chave da implementação:
- Múltiplas tags
<time>com diferentes contextos - Uso do atributo
datetimepara datas legíveis por máquina - Inclusão de texto de data legível por humanos
- Demonstração do atributo
pubdate - Estrutura HTML semântica com tags
<article>e<section>
Exemplo de saída quando visualizado em um navegador web:
Web Development Conference
Event Details
Conference Date: September 15, 2023
Start Time: 9:00 AM
Blog Post
HTML5 Semantic Elements
Published on June 20, 2023
Last Updated: June 22, 2023
Resumo
Neste laboratório, os participantes aprenderam sobre a tag HTML5 <time>, um elemento semântico projetado para representar datas e horas em um formato legível por máquina. O laboratório guiou os alunos através da compreensão das principais características da tag, incluindo sua capacidade de conter texto legível por humanos e suportar um atributo datetime legível por máquina, o que aprimora a acessibilidade web e fornece informações temporais estruturadas.
Através de exercícios práticos, os participantes criaram um arquivo HTML demonstrando a implementação da tag <time>, explorando seu uso com diferentes atributos como datetime e pubdate. Eles praticaram a criação de marcação semântica que permite que leitores humanos e máquinas interpretem informações de data e hora de forma eficaz, reforçando a importância do uso de elementos HTML semânticos no desenvolvimento web.
