Loading...- Wprowadzenie
- Typ dokumentu HTML5
- Element html
- Element head
- Kodowanie znaków w HTML5
- Relacje między dokumentami
- Elementy semantyczne HTML5
- Obsługa nieznanych elementów
- Nagłówki w HTML5
- Artykuły w HTML5
- Elementy daty i godziny HTML5
- Nawigacja w HTML5
- Stopka strony w HTML5
Przyznasz chyba, że te wszystkie nowości są niesamowite, prawda? Może ich poznawanie nie wywołuje takiego entuzjazmu, jak zjazd nago na nartach z Mount Everest recytując Odę do młodości od końca, ale chyba nie można więcej wymagać od semantycznych znaczników HTML. Wróćmy do naszej przykładowej strony. Kolejny fragment kodu, na który chcę zwrócić twoją uwagę jest wyróżniony poniżej:
<div class="entry">
<p class="post-date">22 października 2009 r.</p>
<h2>Dzień wyjazdu</h2>
</div>Już to znamy, prawda? Typowa sytuacja: chcemy pokazać datę publikacji artykułu, a ponieważ nie ma przeznaczonego do tego celu semantycznego elementu, stosujemy ogólny element ze specjalną klasą. Jest to poprawny kod HTML5. Nie musisz go zmieniać. Ale w języku HTML5 jest dostępne lepsze rozwiązanie tej kwestii: element time.
<time datetime="2009-10-22" pubdate>22 października 2009 r.</time>Element <time> składa się z trzech części:
- znacznika czasu przeznaczonego dla komputerów,
- treści tekstowej dla ludzi,
- opcjonalnej flagi
pubdate.
W tym przykładzie atrybut datetime zawiera tylko datę, bez godziny. Format daty jest następujący: rrrr-mm-dd:
<time datetime="2009-10-22" pubdate>22 października 2009 r.</time>Jeśli chcesz dodatkowo podać godzinę, wstaw za datą literę T, a następnie wpisz godzinę w formacie 24 godzinnym, po czym podaj strefę czasową.
<time datetime="2009-10-22T13:59:47-04:00" pubdate>
22 października 2009 r. 1:59 EDT
</time>(Format daty i godziny jest bardzo elastyczny. W specyfikacji HTML5 można znaleźć przykłady poprawnie zbudowanych łańcuchów daty i godziny.)
Zwróć uwagę, że zmieniłem treść tekstową — to co znajduje się między znacznikami <time> i </time> — aby odpowiadała maszynowemu znacznikowi czasu. Nie jest to jednak konieczne. Treść tekstowa może być dowolna, ważne aby w atrybucie datetime podać poprawną datę i/lub godzinę w formacie maszynowym. W związku z tym poniższy kod jest poprawny wg zasad HTML5:
<time datetime="2009-10-22">zeszły czwartek</time>Poniższy fragment również jest poprawny:
<time datetime="2009-10-22"></time>Pozostało jeszcze wyjaśnić znaczenie cząstki pubdate. Jest to atrybut logiczny, a więc jeśli jest potrzebny, wystarczy go zdefiniować, np.:
<time datetime="2009-10-22" pubdate>22 października 2009 r.</time>Jeśli nie lubisz takich „gołych” atrybutów, to możesz też napisać tak:
<time datetime="2009-10-22" pubdate="pubdate">22 października 2009 r.</time>Co oznacza atrybut pubdate? Może oznaczać dwie rzeczy, w zależności od miejsca występowania. Jeśli element time znajduje się w elemencie article, to znaczy, że ten znacznik czasu określa datę publikacji artykułu. Jeśli element time nie znajduje się w elemencie article, to znaczy, że ten znacznik czasu określa datę publikacji całego dokumentu.
Poniżej znajduje się kompletny kod artykułu, w którym w pełni wykorzystano możliwości języka HTML5:
<article>
<header>
<time datetime="2009-10-22" pubdate>
22 października 2009 r.
</time>
<h1>
<a href="#"
rel="bookmark"
title="łącze do tego wpisu">
Dzień wyjazdu
</a>
</h1>
</header>
<p>Lorem ipsum dolor sit amet…</p>
</article>
Wysyłam...
Dodaj komentarz