Tag Time HTML5: Datas e Horas Semânticas

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.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicConceptsGroup -.-> css/properties("Properties") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") css/BasicStylingGroup -.-> css/text_styling("Text Styling") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills css/selectors -.-> lab-451085{{"Use a Tag Time para HTML Semântico"}} css/properties -.-> lab-451085{{"Use a Tag Time para HTML Semântico"}} html/lang_decl -.-> lab-451085{{"Use a Tag Time para HTML Semântico"}} css/text_styling -.-> lab-451085{{"Use a Tag Time para HTML Semântico"}} html/text_head -.-> lab-451085{{"Use a Tag Time para HTML Semântico"}} javascript/dom_select -.-> lab-451085{{"Use a Tag Time para HTML Semântico"}} javascript/dom_manip -.-> lab-451085{{"Use a Tag Time para HTML Semântico"}} javascript/dom_traverse -.-> lab-451085{{"Use a Tag Time para HTML Semântico"}} end

Entendendo 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 datetime legí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.

Criar 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.

Explorar 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 datetime para 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.