0Pricing
HTML Academy · Lektion

time address und mark

Kennzeichnen Sie Datumsangaben, Kontaktinformationen und hervorgehobenen Text semantisch

time address und mark ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Das time-Element

Das <time>-Element kennzeichnet Datums- und Zeitangaben in einem maschinenlesbaren Format:

<p>Published on <time datetime="2025-01-15">January 15, 2025</time>.</p>
<p>The meeting is at <time datetime="14:30">2:30 PM</time>.</p>
<p>The event runs from
  <time datetime="2025-01-15">Jan 15</time> to
  <time datetime="2025-01-20">Jan 20</time>.
</p>

Formate des datetime-Attributs

Das datetime-Attribut muss eine gültige Datums- oder Zeitangabe enthalten:

<time datetime="2025-01-15">January 15</time>        <!-- date -->
<time datetime="14:30">2:30 PM</time>               <!-- time -->
<time datetime="2025-01-15T14:30">Meeting time</time> <!-- date+time -->
<time datetime="2025-W03">Week 3, 2025</time>        <!-- week -->
<time datetime="2025-01">January 2025</time>         <!-- year-month -->
<time datetime="P3D">3 days</time>                  <!-- duration -->

Warum time wichtig ist

Vorteile der Verwendung von <time>:

  • Suchmaschinen verstehen das Datum Ihres Inhalts
  • Browser und Apps können das Datum in einen Kalender übernehmen
  • Screenreader können Datumsangaben korrekt aussprechen
  • JavaScript kann das datetime-Attribut zur Formatierung der Anzeige auslesen

Dynamische Datumsformatierung

Verwenden Sie JavaScript, um Datumsangaben aus dem datetime-Attribut zu formatieren:

<time id="event-time" datetime="2025-06-15T10:00">June 15, 2025</time>

<script>
const el = document.getElementById('event-time');
const date = new Date(el.getAttribute('datetime'));
el.textContent = date.toLocaleDateString('en-US', {
  weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
});
// Output: Sunday, June 15, 2025
</script>

Das address-Element

Das <address>-Element kennzeichnet Kontaktinformationen für das nächstgelegene <article> oder <body>:

<address>
  <p>Jane Smith</p>
  <p><a href="mailto:jane@example.com">jane@example.com</a></p>
  <p><a href="tel:+15555550100">(555) 555-0100</a></p>
  <p>123 Main Street, New York, NY 10001</p>
</address>

address für Kontaktinformationen eines article

Verwenden Sie address innerhalb eines article, um die Kontaktinformationen der Autorin oder des Autors zu kennzeichnen:

<article>
  <h2>HTML Guide</h2>
  <address>
    Written by
    <a href="mailto:jane@example.com" rel="author">Jane Smith</a>
  </address>
  <p>Content...</p>
</article>

Wofür address nicht gedacht ist

Das <address>-Element ist ausschließlich für Kontaktinformationen gedacht, nicht für beliebige Adressangaben:

<!-- BAD: address for a location with no contact info -->
<address>
  Empire State Building, New York
</address>

<!-- Better: use p or a structured element -->
<p>Empire State Building, New York</p>

<!-- GOOD: address for contact information -->
<address>
  <a href="mailto:support@example.com">Contact Support</a>
</address>

Das mark-Element

Das <mark>-Element hebt Text hervor, der im jeweiligen Kontext relevant ist:

<p>
  Search results for "HTML5":
  The <mark>HTML5</mark> specification was finalized in 2014.
  <mark>HTML5</mark> introduced many new semantic elements.
</p>
<!-- Default styling: yellow background -->
<!-- Semantic use: highlighting search terms, annotations -->
<!-- NOT for general styling — use span for that -->

mark gestalten

Passen Sie die standardmäßige gelbe Hervorhebung von mark an:

mark {
  background-color: #fef08a;
  color: inherit;  /* keep text color from parent */
  padding: 0.1em 0.2em;
  border-radius: 3px;
}

/* High contrast mode: */
@media (forced-colors: active) {
  mark {
    background-color: Highlight;
    color: HighlightText;
  }
}

mark vs strong vs em

So wählen Sie zwischen Hervorhebungselementen:

  • <mark> — im aktuellen Kontext hervorgehoben, weil relevant (Suchergebnisse)
  • <strong> — wichtiger Inhalt, der grundsätzlich relevant ist
  • <em> — betonte Aussage, durch die sich die Bedeutung ändert
  • <span> — rein visuelles Styling ohne semantische Bedeutung

Suchen und hervorheben

Praktische Umsetzung: Heben Sie Suchbegriffe in Ergebnissen hervor:

function highlightText(text, query) {
  if (!query) return text;
  const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const regex = new RegExp(`(${escaped})`, 'gi');
  return text.replace(regex, '<mark>$1</mark>');
}
// document.getElementById('result').innerHTML =
//   highlightText(result.title, searchQuery);

Schnelltest

Wofür wird das maschinenlesbare datetime-Attribut verwendet?

Zusammenfassung: time, address, mark

Semantische Inline-Elemente:

  • <time datetime=""> — maschinenlesbare Datums- und Zeitangaben
  • <address> — Kontaktinformationen für das nächstgelegene article oder die Seite
  • <mark> — im jeweiligen Kontext relevante Hervorhebungen (Suchbegriffe)
  • datetime verwendet das ISO-8601-Format: YYYY-MM-DD, HH:MM
  • Standarddarstellung von mark: gelber Hintergrund; anpassbar mit CSS

Häufig gestellte Fragen

Ist die Lektion „time address und mark“ kostenlos?

Ja — der vollständige Text von „time address und mark“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „time address und mark“?

Kennzeichnen Sie Datumsangaben, Kontaktinformationen und hervorgehobenen Text semantisch Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „time address und mark“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. header nav main und footer
  2. Das article-Element: eigenständige Inhalte
  3. Das section-Element gegenüber div
  4. time address und mark
← Zurück zu HTML Academy