Poznaj Programowanie

Tagi HTML: time

Piotr Grochal 5 min. czytania

Tag <time> to jeden z kluczowych elementów semantycznych HTML5, który pozwala na precyzyjne oznaczanie dat, godzin i okresów czasu w treści strony. Dzięki niemu poprawiasz czytelność dla użytkowników i umożliwiasz maszynom (wyszukiwarkom, czytnikom ekranu, aplikacjom kalendarzowym) automatyczne przetwarzanie informacji czasowych.

Element <time> reprezentuje datę, godzinę lub ich kombinację zgodnie z kalendarzem gregoriańskim. Jego największą siłą jest atrybut datetime, który zapisuje wartość w standardzie ISO 8601 (zrozumiałym dla komputerów), podczas gdy zawartość między znacznikami może pozostać przyjazna dla człowieka.

Podstawowa składnia i kontekst użycia

Domyślnie jest to element liniowy (CSS display: inline), zaliczany do treści frazowanej. Wymaga jawnego otwierającego i zamykającego znacznika. W środku możesz umieszczać tekst lub inne elementy frazowane. Jeśli pominiesz datetime, zawartość musi być sama w sobie poprawną wartością w formacie ISO 8601.

Podstawowa składnia:

<time datetime="YYYY-MM-DDThh:mm:ssTZD">Treść czytelna dla człowieka</time>

Najczęstsze składniki wartości czasu w ISO 8601 wyglądają tak:

  • data – zapis YYYY-MM-DD (np. 2023-12-31);
  • godzina – zapis z prefiksem T, np. Thh:mm (np. T14:30);
  • sekundy – pole ss jest opcjonalne;
  • strefa czasowa – skrót TZD (np. +01:00 lub Z dla UTC).

Jeśli pominiesz atrybut datetime, zawartość musi być maszynowo czytelna (ISO 8601):

<time>14:54</time> <!-- Godzina w ISO -->

Atrybut datetime – serce elementu <time>

W <time>: atrybut datetime definiuje maszynową reprezentację daty/godziny.

W <ins> i <del>: wskazuje datę wstawienia lub usunięcia treści (historia edycji dokumentu).

Poniższe formaty wartości datetime są zgodne z ISO 8601 i powszechnie akceptowane:

Typ wartości Przykład
Rok–miesiąc 2023-01
Data 2023-01-11
Data + godzina 2023-01-11T14:30
Data + godzina + sekundy + strefa 2023-01-11T14:30:45+01:00
Tylko godzina 14:30
Czas trwania PT2H30M (2 godziny 30 minut)

Przykład prosty – godziny otwarcia:

<p>Otwarty od <time>10:00</time> do <time>21:00</time> w dni powszednie.</p>

Wynik: „Otwarty od 10:00 do 21:00 w dni powszednie.” – czytelne wizualnie i parsowalne maszynowo.

Praktyczne przykłady użycia w blogu programistycznym

1. Oznaczanie wydarzeń i dat w artykule

Wyobraź sobie post o konferencji programistycznej – przykładowy znacznik wygląda tak:

<article>
<h2>Konferencja JS 2026</h2>
<p>Mamy randkę <time datetime="2026-02-14T20:00">14 lutego o 20:00</time> na Walentynki z JavaScriptem!</p>
<p>Koncert zaczyna się o <time datetime="20:00">20:00</time> i potrwa <time datetime="PT2H30M">2 godziny 30 minut</time>.</p>
</article>

Korzyści: wyszukiwarki mogą rozpoznać wydarzenie (np. do Kalendarza Google), a czytniki ekranu odczytają daty i godziny poprawnie.

2. Edycje treści z <ins> i <del>

Tak możesz pokazać historię zmian w treści wraz z datami edycji:

<p><ins datetime="2023-01-11">Gdyby kózka nie skakała, toby nóżki nie złamała.</ins></p>
<p><del datetime="2023-01-22">Kobyła ma mały bok.</del></p>
<p>Wyjeżdżam w góry <time datetime="2023-12-31">Sylwestra</time>.</p>

Przykładowa stylizacja CSS:

ins { background: #d4edda; text-decoration: none; }
del { background: #f8d7da; text-decoration: line-through; }
time { font-weight: bold; color: #007bff; }

3. Dynamiczny zegar z JavaScript

Poniżej pełny przykład integracji z JS – aktualny czas w semantycznym <time> z atrybutem datetime:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Zegar z <time></title>
<style>
#zegar { font-size: 2em; font-family: monospace; }
time { font-weight: bold; }
</style>
</head>
<body>
<p>Aktualny czas: <time id="zegar"></time></p>
<script>
function aktualizujZegar() {
const teraz = new Date();
const formatted = teraz.toISOString().slice(11, 19); // hh:mm:ss
document.getElementById('zegar').setAttribute('datetime', teraz.toISOString());
document.getElementById('zegar').textContent = teraz.toLocaleTimeString('pl-PL');
}
setInterval(aktualizujZegar, 1000);
aktualizujZegar();
</script>
</body>
</html>

Efekt: dynamiczny zegar z semantycznym <time>, parsowalny przez maszyny – idealny do paneli i blogów technologicznych.

4. Zaawansowany przykład – kalendarz wydarzeń

Przykładowa definicja tabeli wydarzeń w HTML (z semantycznym <time>):

<table>
<tr>
<th>Data</th>
<th>Opis</th>
</tr>
<tr>
<td><time datetime="2023-12-31">Sylwester</time></td>
<td>Impreza programistyczna</td>
</tr>
<tr>
<td><time datetime="1980-01-01T09:00">1 stycznia 1980, godz. 9:00</time></td>
<td>Pierwsze uruchomienie HTML</td>
</tr>
</table>

Zalety semantycznego użycia <time>

Najważniejsze korzyści stosowania <time> w treści strony to:

  • SEO i dostępność – przeglądarki i wyszukiwarki rozpoznają daty, co zwiększa szansę na wyniki rozszerzone i lepszą nawigację dla czytników ekranu;
  • stylizacja – łatwo stylować selektorem, np. time { font-variant: small-caps; };
  • zachowanie awaryjne – bez datetime działa jak zwykły tekst (nie psuje układu);
  • wsparcie przeglądarek – szerokie wsparcie na desktopie i urządzeniach mobilnych.

Błędy do uniknięcia

Uważaj na typowe potknięcia:

  • nie używaj <time> do ogólników (np. „w przyszłym tygodniu”) – stosuj precyzyjne dane,
  • zawsze waliduj format ISO 8601, inaczej maszyny nie zinterpretują wartości,
  • nie nadużywaj – oznaczaj tylko realne daty i godziny.