Verwenden Sie das Time-Tag für semantisches HTML

Einführung

In diesem Lab werden Sie das semantische HTML5-Element <time> erkunden und lernen, wie Sie es effektiv nutzen können, um Daten und Zeiten in Webbereitstellungen darzustellen. Das Lab konzentriert sich darauf, die wichtigsten Eigenschaften des <time>-Elements zu verstehen, wie beispielsweise die Bereitstellung maschinenlesbarer Zeitdaten bei gleichzeitiger Beibehaltung von menschenlesbarem Text, und zeigt seine Implementierung in verschiedenen HTML-Kontexten.

Mithilfe eines schrittweisen Ansatzes werden Sie eine HTML-Datei erstellen, <time>-Elemente mit datetime-Attributen hinzufügen und verstehen, wie dieses semantische Element die Zugänglichkeit von Webseiten verbessert und strukturierte Informationen über Daten und Zeiten bereitstellt. Am Ende des Labs haben Sie praktische Erfahrungen in der Verwendung des <time>-Elements, um die semantische Bedeutung von Zeitdaten auf Webseiten zu verbessern.

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{{"Verwenden Sie das Time-Tag für semantisches HTML"}} css/properties -.-> lab-451085{{"Verwenden Sie das Time-Tag für semantisches HTML"}} html/lang_decl -.-> lab-451085{{"Verwenden Sie das Time-Tag für semantisches HTML"}} css/text_styling -.-> lab-451085{{"Verwenden Sie das Time-Tag für semantisches HTML"}} html/text_head -.-> lab-451085{{"Verwenden Sie das Time-Tag für semantisches HTML"}} javascript/dom_select -.-> lab-451085{{"Verwenden Sie das Time-Tag für semantisches HTML"}} javascript/dom_manip -.-> lab-451085{{"Verwenden Sie das Time-Tag für semantisches HTML"}} javascript/dom_traverse -.-> lab-451085{{"Verwenden Sie das Time-Tag für semantisches HTML"}} end

Grundlagen des Time-Tags verstehen

In diesem Schritt lernen Sie das HTML5-Element <time> kennen, ein semantisches Element, das dazu dient, Daten und Zeiten in einem maschinenlesbaren Format darzustellen. Das <time>-Element hilft, die Zugänglichkeit von Webseiten zu verbessern und bietet strukturierte Informationen über Zeitdaten.

Wichtige Eigenschaften des <time>-Elements sind:

Repräsentiert einen bestimmten Zeitraum
Kann menschenlesbaren Text enthalten
Unterstützt ein maschinenlesbares datetime-Attribut
Verbessert die semantische Bedeutung von Datums- und Zeitinformationen auf Webseiten

Hier ist ein einfaches Beispiel, um das <time>-Element zu veranschaulichen:

<p>The conference is scheduled for <time>2023-09-15</time>.</p>

In diesem Beispiel ermöglicht das <time>-Element, dass sowohl menschliche Leser das Datum sehen als auch Maschinen das genaue Datumsformat analysieren können.

Ein weiteres Beispiel, das verschiedene Verwendungsmöglichkeiten des <time>-Elements zeigt:

<article>
  <h2>Lab Publication</h2>
  <p>Published on <time datetime="2023-06-20">June 20, 2023</time></p>
</article>

Das datetime-Attribut bietet ein standardisiertes, maschinenlesbares Datumsformat, während der sichtbare Text benutzerfreundlich bleibt.

HTML-Datei mit Time-Tag erstellen

In diesem Schritt erstellen Sie eine HTML-Datei, die die Verwendung des <time>-Tags zeigt. Sie verwenden die WebIDE, um ein HTML-Dokument im Verzeichnis ~/project zu erstellen und zu bearbeiten.

Zunächst navigieren Sie in das Projektverzeichnis und erstellen eine neue HTML-Datei namens event-schedule.html:

cd ~/project

Öffnen Sie die WebIDE und erstellen Sie eine neue Datei mit dem Namen event-schedule.html. Fügen Sie dann den folgenden HTML-Inhalt hinzu:

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>

Beispielausgabe, wenn die Datei in einem Webbrowser angezeigt wird:

Anmerkung: Erfahren Sie mehr über Wie Sie HTML-Dateien in der WebIDE vorschauen können.

Dieses Beispiel zeigt, wie Sie das <time>-Tag innerhalb eines Absatzes verwenden, um ein bestimmtes Datum darzustellen. Das Tag verleiht dem Datum eine semantische Bedeutung, wodurch es für Browser und Hilfstechnologien einfacher wird, die Zeitinformationen zu verstehen.

Datetime-Attribut zum Time-Tag hinzufügen

In diesem Schritt lernen Sie, wie Sie das <time>-Tag verbessern können, indem Sie das datetime-Attribut hinzufügen. Das datetime-Attribut bietet ein maschinenlesbares Format für Daten und Zeiten, wodurch der Inhalt zugänglicher und semantisch sinnvoller wird.

Öffnen Sie die Datei event-schedule.html in der WebIDE und ändern Sie das vorhandene <time>-Tag, um das datetime-Attribut hinzuzufügen:

<!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>

Das datetime-Attribut bietet mehrere Vorteile:

Bietet ein standardisiertes, maschinenlesbares Datums-/Zeitformat
Ermöglicht, dass der angezeigte Text vom tatsächlichen Datums-/Zeitwert abweicht
Unterstützt verschiedene Formate wie vollständige Daten, Zeiten und Datums-Zeit-Kombinationen

Beispielformate für das datetime-Attribut:

Vollständiges Datum: 2023-09-15
Zeit: 09:00
Datum und Zeit: 2023-09-15T09:00
Mit Zeitzone: 2023-09-15T09:00Z

Beispielausgabe, wenn die Datei in einem Webbrowser angezeigt wird:

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.

Time-Tag mit Pubdate-Attribut erkunden

In diesem Schritt lernen Sie das pubdate-Attribut kennen, ein spezielles boolesches Attribut für das <time>-Tag, das das Veröffentlichungsdatum eines Artikels oder Blogbeitrags angibt. Obwohl es in HTML5 inzwischen als veraltet gilt, bietet das Verständnis seiner historischen Verwendung Einblicke in semantisches HTML.

Öffnen Sie die Datei event-schedule.html in der WebIDE und ändern Sie den Inhalt, um ein Beispiel für einen Blogbeitrag mit dem pubdate-Attribut hinzuzufügen:

<!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>

Wichtige Punkte zum pubdate-Attribut:

Es ist ein boolesches Attribut (kein Wert erforderlich)
Gibt das Veröffentlichungsdatum eines Artikels an
In HTML5 als veraltet markiert, wird aber von vielen Browsern noch unterstützt
Wird typischerweise innerhalb von <article>-Tags verwendet

Beispielausgabe, wenn die Datei in einem Webbrowser angezeigt wird:

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

Hinweis: Obwohl pubdate inzwischen als veraltet gilt, zeigt es die Entwicklung von semantischem HTML und die Wichtigkeit der Bereitstellung maschinenlesbarer Datumsinformationen.

Implementierung des Time-Tags überprüfen

In diesem letzten Schritt werden Sie die Implementierung des <time>-Tags in Ihrem HTML-Dokument überprüfen und validieren. Sie erstellen ein umfassendes Beispiel, das die verschiedenen Möglichkeiten zeigt, wie das <time>-Tag mit verschiedenen Attributen und in verschiedenen Kontexten verwendet werden kann.

Öffnen Sie die Datei event-schedule.html in der WebIDE und aktualisieren Sie sie mit einem vollständigen Beispiel:

<!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>

Wichtige Prüfliste für die Implementierung:

Mehrere <time>-Tags in verschiedenen Kontexten
Verwendung des datetime-Attributs für maschinenlesbare Daten
Einbeziehung von menschenlesbaren Datumstexten
Demonstration des pubdate-Attributs
Semantische HTML-Struktur mit <article>- und <section>-Tags

Beispielausgabe, wenn die Datei in einem Webbrowser angezeigt wird:

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

Zusammenfassung

In diesem Lab haben die Teilnehmer über das HTML5-<time>-Tag gelernt, einem semantischen Element, das entwickelt wurde, um Daten und Zeiten in einem maschinenlesbaren Format darzustellen. Das Lab hat die Lernenden dabei unterstützt, die wichtigsten Eigenschaften des Tags zu verstehen, einschließlich seiner Fähigkeit, menschenlesbaren Text zu enthalten und ein maschinenlesbares datetime-Attribut zu unterstützen, was die Zugänglichkeit des Webs verbessert und strukturierte Zeitinformationen bereitstellt.

Durch praktische Übungen haben die Teilnehmer eine HTML-Datei erstellt, die die Implementierung des <time>-Tags zeigt, und seine Verwendung mit verschiedenen Attributen wie datetime und pubdate untersucht. Sie haben geübt, semantische Markup zu erstellen, das es sowohl Menschen als auch Maschinen ermöglicht, Datums- und Zeitinformationen effektiv zu interpretieren, was die Wichtigkeit der Verwendung semantischer HTML-Elemente in der Webentwicklung unterstreicht.