Data i czas (<time>)

Lekcja 9.8: Data i czas (<time>)

Strona główna > Rozdział 9: Elementy semantyczne > Data i czas (<time>)

Semantyczne oznaczanie dat i czasów

Ludzie potrafią interpretować daty i czasy zapisane w różnych formatach (np. "jutro", "w zeszły wtorek", "5 maja 2025", "14:30"). Jednak dla maszyn (wyszukiwarek, kalendarzy, czytników ekranu) takie niejednoznaczne zapisy są trudne do zrozumienia. HTML5 wprowadził element <time>, aby umożliwić semantyczne oznaczanie dat i/lub czasów w sposób zrozumiały zarówno dla ludzi, jak i dla maszyn.

Element <time>

Element <time> reprezentuje określoną chwilę w czasie lub przedział czasowy. Jego główną zaletą jest możliwość dodania atrybutu datetime, który zawiera datę/czas w precyzyjnym, maszynowo czytelnym formacie.

Treść wewnątrz znacznika <time>...</time> to forma daty/czasu przeznaczona do odczytu przez człowieka.
Atrybut datetime zawiera tę samą datę/czas w jednym ze standardowych formatów zrozumiałych dla maszyn.

Atrybut `datetime`

Jest to kluczowy atrybut elementu <time>. Jego wartość musi być poprawną datą lub czasem w jednym z dozwolonych formatów. Najważniejsze formaty to:

Pełna data: YYYY-MM-DD (np. 2025-04-30)
Miesiąc i rok: YYYY-MM (np. 2025-04)
Rok: YYYY (np. 2025)
Tydzień roku: YYYY-Www (np. 2025-W18 - 18. tydzień 2025 roku)
Pełny czas (lokalny): hh:mm:ss lub hh:mm (np. 15:30:00 lub 15:30)
Pełna data i czas (lokalny): YYYY-MM-DDThh:mm:ss lub YYYY-MM-DDThh:mm (litera 'T' oddziela datę od czasu, np. 2025-04-30T15:30:00)
Data i czas z przesunięciem strefy czasowej (UTC offset): YYYY-MM-DDThh:mm:ss+hh:mm lub YYYY-MM-DDThh:mm:ss-hh:mm lub YYYY-MM-DDThh:mm:ssZ (Z oznacza UTC), np. 2025-04-30T15:30:00+02:00 (czas w strefie +2h od UTC)
Czas trwania (duration): P (period) + określenie czasu, np. PT2H30M (2 godziny 30 minut), P3D (3 dni).

Jeśli atrybut datetime nie zostanie podany, treść wewnątrz <time> musi być sama w sobie poprawną datą lub czasem w jednym z tych formatów.

Korzyści z używania <time>

SEO: Wyszukiwarki mogą precyzyjnie zrozumieć daty publikacji artykułów, daty wydarzeń itp., co może być wykorzystane np. do filtrowania wyników wyszukiwania według daty.
Dostępność: Czytniki ekranu mogą odczytać datę w sposób bardziej zrozumiały dla użytkownika.
Automatyzacja: Skrypty (np. JavaScript) mogą łatwo odczytać i przetwarzać daty/czasy z atrybutu datetime. Przeglądarki lub rozszerzenia mogą oferować funkcje dodawania wydarzeń do kalendarza na podstawie tych znaczników.

Przykład z datą publikacji:

<p>Artykuł opublikowano <time datetime="2025-04-30">30 kwietnia 2025</time>.</p>

Przykład z datą i czasem:

<p>Spotkanie rozpocznie się <time datetime="2025-05-15T10:00:00+02:00">15 maja o 10:00 czasu lokalnego</time>.</p>

Przykład z czasem trwania:

<p>Film trwa <time datetime="PT2H15M">2 godziny i 15 minut</time>.</p>

Przykład bez atrybutu `datetime` (treść musi być poprawnym formatem):

<p>Data wydarzenia: <time>2026-01-01</time></p>

Wygląd elementu <time>

Domyślnie element <time> jest elementem liniowym (inline) i nie ma żadnego specjalnego formatowania wizualnego. Jego wygląd można kontrolować za pomocą CSS, tak jak każdego innego elementu liniowego.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: W stopce artykułu na blogu dodaj informację o dacie publikacji, używając znacznika <time> z odpowiednim atrybutem datetime. Użyj czytelnej dla człowieka formy daty wewnątrz znacznika.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Artykuł z datą publikacji</title>
    <style>
        article footer {
            margin-top: 20px;
            padding-top: 10px;
            border-top: 1px solid #eee;
            font-size: 0.9em;
            color: #555;
        }
    </style>
</head>
<body>

<article>
    <header>
        <h2>Mój Pierwszy Post na Blogu</h2>
    </header>
    
    <p>Treść mojego pierwszego posta...</p>
    
    <footer>
        <p>Opublikowano: <time datetime="2025-04-30">30 kwietnia 2025</time> przez Jana Kowalskiego.</p>
    </footer>
</article>

</body>
</html>

Dodatkowe zadania do samodzielnego wykonania:

Dodaj informację o godzinie rozpoczęcia i zakończenia wydarzenia, używając <time> z formatem daty i czasu oraz strefą czasową.
Oznacz czas trwania przygotowania przepisu kulinarnego za pomocą <time> i formatu czasu trwania (np. PT1H30M).
Spróbuj użyć JavaScriptu, aby odczytać wartość atrybutu datetime z elementu <time> i wyświetlić ją w innym formacie.

Najczęściej zadawane pytania

Do czego służy znacznik <time>?

Do semantycznego oznaczania daty i/lub czasu w sposób zrozumiały dla ludzi (treść elementu) i maszyn (poprzez atrybut datetime).

Jakie formaty obsługuje atrybut datetime?

Obsługuje standardowe formaty ISO 8601 dla daty (YYYY-MM-DD), czasu (hh:mm:ss), daty i czasu (YYYY-MM-DDThh:mm:ss), czasu ze strefą czasową oraz czasu trwania (np. PT2H).

Czy atrybut datetime jest obowiązkowy?

Nie, ale jeśli go nie ma, treść wewnątrz <time> musi sama być poprawną datą/czasem w jednym z obsługiwanych formatów maszynowych, co często jest mniej czytelne dla człowieka.

Jakie korzyści daje używanie <time>?

Poprawia SEO (wyszukiwarki rozumieją daty), zwiększa dostępność (czytniki ekranu lepiej interpretują daty) i ułatwia automatyczne przetwarzanie dat przez skrypty lub aplikacje (np. kalendarze).

Czy <time> zmienia wygląd tekstu?

Nie, domyślnie jest to element liniowy bez specjalnego formatowania. Jego wygląd można dowolnie modyfikować za pomocą CSS.