Op het web is deze behoefte niet anders. Zelfs in dit medium moeten we aan andere mensen communiceren dat er iets is gebeurd op een bepaald punt, op een specifieke datum of in relatie tot een andere vastgestelde tijd.
Vóór HTML5 hadden we geen element om semantisch een datum of tijd te markeren. In de afgelopen jaren hebben andere oplossingen, met name Microformats en Microdata,geprobeerd deze leemte op te vullen voor specifieke situaties (geboortedatum, publicatie van een boek, enzovoort).
In dit artikel ga ik het element van HTML5 behandelen, wat helpt bij het aanpakken van de zojuist besproken behoefte.<time>
Wat is het Element?<time>
Het element werd geïntroduceerd in de HTML5-specificatie in 2009. Het werd vervolgens in 2011 gedropt ten gunste van . Vervolgens werd opnieuw geïntroduceerd en vervolgens verbeterd om nieuwe datum- / tijdnotaties mogelijk te maken. Hieruit kun je opmaken dat specificaties behoorlijk controversieel kunnen zijn.<time><data><time>
Het element vertegenwoordigt een datum en/of een tijd in de Gregoriaanse kalender. Het is een inline element (like en ) en moet een afsluitende tag hebben (like en ). Bij gebruik in de eenvoudigste vorm moet de inhoud van het element een geldige datum- en/of tijdreeks zijn.<time><span><a><div><span>
Hieronder ziet u een voorbeeld:
<!-- 1st February 2009 -->
<time>2009-02-01</time>In de bovenstaande code definieer ik een datum, met name 1 februari 2009. Het formaat dat in de code () wordt gebruikt, zou je bekend moeten zijn als je enige tijd op Linux hebt doorgebracht, maar zoals we later in dit artikel zullen zien, is dit niet het enige geldige formaat.yyyy-mm-dd
In de eerste versie van het bestek waren precieze data een van de weinige formaten die je kon schrijven. U kunt bijvoorbeeld geen datum opgeven zoals 'november 2014' of '476' (het begin van de Middeleeuwen). Dit was een groot probleem voor verschillende gevallen, zoals de datering van een schilderij of een historische gebeurtenis, omdat een precieze datum niet bekend is.
Gelukkig is dit type datum nu toegestaan in de spec. Dus vandaag kunnen we een bepaalde maand van een jaar zonder dag beschrijven:
<!-- January 2014 -->
<time>2014-01</time>Het attribuutdatetime
De specificatie voor het element heeft ook een attribuut gestandaardiseerd met de naam .<time>datetime
Hoewel het schrijven van datums in de formaten die in de vorige sectie zijn besproken in sommige landen / culturen werkt, past het niet bij andere. Italianen schrijven bijvoorbeeld datums met behulp van de notatie . Daarom kan het weergeven van een datum in een andere notatie tot verwarring leiden.dd/mm/yyyy
Dit probleem kan eenvoudig worden opgelost met behulp van het attribuut van het element. Het is een optioneel attribuut dat de informatie bevat in een machineleesbaar formaat, zoals die in de voorbeelden, waardoor we de inhoud van het element op elke gewenste manier kunnen schrijven.datetime<time>
Als dit niet is opgegeven, moet de inhoud zelfs een van de geldige datum- / tijdnotaties hebben, anders kunnen we deze gebruiken zoals we willen. Dit is geweldig omdat het ons in staat stelt om code als volgt te schrijven:datetime
The next meeting is scheduled for <time datetime="2014-10">October</time>.Of zelfs:
The next meeting is scheduled for <time datetime="2014-10">next month</time>.Beide voorbeelden hebben datuminhoud die niet machinaal leesbaar is volgens de specificatie, maar ze zijn acceptabel vanwege de aanwezigheid van het kenmerk, dat wel een geldige indeling gebruikt.datetime
Op het eerste gezicht lijkt dit misschien vreemd. Maar de inhoud van het element is ontworpen om mensen te dienen, niet machines. Bovendien maakt dit feit de internationalisering van de data mogelijk. Bijvoorbeeld:<time>
<!-- Same message as before but in Italian -->
Il prossimo incontro è programmato per <time datetime="2014-10">il mese prossimo</time>.In de bovenstaande code hebben we dezelfde boodschap als voorheen, maar dan in het Italiaans.
Het attribuutpubdate
De eerste concepten van de specificatie definieerden een attribuut voor het element. Dit attribuut was een Booleaans dat aangeeft dat een bepaalde datum de publicatiedatum was van het bovenliggende element of, indien er geen bovenliggend element was, van het hele document.pubdate<time><article><article>
U kunt bijvoorbeeld schrijven:
<article>
<h1>A good title</h1>
<p>This is the content of a great article.</p>
<footer>
<p>Article published on <time datetime="2014-09-05" pubdate>September the 5th, 2014</time>
</footer>
</article>In dit geval zou 5 september 2014 de publicatiedatum van dit "artikel" zijn.
Ik ben een grote fan van dit attribuut sinds ik erover hoorde, maar helaas werd het uit de specificatie verwijderd. Deze beslissing heeft een groot probleem gecreëerd omdat veel mensen (waaronder ik) de publicatiedatum gebruiken om de frisheid en de relevantie van een artikel of nieuwsbericht te beoordelen. Hoewel het waar is dat u nog steeds toegang hebt tot de pagina van een artikel en de publicatiedatum kunt bekijken, hebben we een standaardmano manier nodig voor een machine om de datum te lezen.
Op dit moment is er geen attribuut dat vervangt, maar u kunt het BlogPosting-schemagebruiken, en met name de waarde, zoals hieronder geïllustreerd:pubdatedatePublished
<article itemscope itemType="http://schema.org/BlogPosting">
<h1 itemprop="headline">A good title</h1>
<p itemprop="articleBody">This is the content of a great article.</p>
<footer>
<p>Article published on <time datetime="2014-09-05" itemprop="datePublished">5th September 2014</time>
</footer>
</article>Nu u een volledig overzicht van het element hebt, laten we de verschillende toegestane indelingen bekijken.<time>
De geldige indelingen voor de inhoud van het element bij afwezigheid van het kenmerk en voor het kenmerk zelf worden in de volgende secties beschreven.<time>datetimedatetime
Een geldige maand
Dit moet een tekenreeks zijn die een specifieke maand van een jaar specificeert in de vorm van . Bijvoorbeeld:yyyy-mm
<!-- September 2014 -->
<time>2014-09</time>Een geldige datum (dag van de maand)
Dit moet een tekenreeks zijn die een precieze datum opgeeft in de vorm van . Bijvoorbeeld:yyyy-mm-dd
<!-- 16th September 2014 -->
<time>2014-09-16</time>Een geldige jaarloze datum
Dit moet een tekenreeks zijn die een maand en een dag zonder jaar aangeeft in de vorm van . Bijvoorbeeld: mm-dd
<!-- 29th June -->
<time>06-29</time>Een geldige tijd
Dit moet een tekenreeks zijn die een tijd zonder datum opgeeft en de 24-uursnotatie gebruikt, in de vorm van waar:HH:MM[:SS[.mmm]]
Hstaat voor urenMstaat voor minutenSstaat voor secondenmstaat voor milliseconden- De vierkante haken geven de onderdelen aan die optioneel zijn
Een voorbeeld van deze indeling wordt hieronder weergegeven:
<!-- 16 hours and 10 minutes
(or 4 hours and 10 minutes pm) -->
<time datetime="16:10">afternoon</time>Een ander voorbeeld is:
<!-- 18 hours, 20 minutes, and 30 seconds
(or 6 hours, 20 minutes, and 30 seconds) -->
<time>18:20:30</time>A Valid Floating Date and Time
This format is present in the W3C spec, but not in the WHATWG version. This should be a precise date and time in the format or . For example:yyyy-mm-ddTHH:MM[:SS[.mmm]]yyyy-mm-dd HH:MM[:SS[.mmm]]
<!-- 16th September 2014 at 18 hours,
20 minutes, and 30 seconds -->
<time datetime="2014-09-16T18:20:30">Tuesday at 18:20</time>A Valid Time Zone Offset
This should be a string representing a time zone offset. For example:
<!-- GMT+1 (like Italy) -->
<time>+01:00</time>Een geldige wereldwijde datum en tijd
Dit moet een tekenreeks zijn die een volledige datum vertegenwoordigt, inclusief tijd en tijdzone. Bijvoorbeeld:
<!-- 16th September 2014 at 18 hours,
20 minutes, and 30 seconds in a
time zone of GMT+1 (like Italy) -->
<time>2014-09-16T18:20:30+01:00</time>Een geldige week
Dit zou een string moeten zijn die een week van een jaar vertegenwoordigt. Bijvoorbeeld:
<!-- The 18th week of 2014 -->
<time>2014-W18</time>Een geldig jaar
Dit moet een string zijn die een jaar vertegenwoordigt. Bijvoorbeeld:
<!-- 2014 -->
<time datetime="2014">this year</time>Een geldige duurreeks
Dit moet een tekenreeks zijn die een duur vertegenwoordigt. Een duur kan beginnen met het voorvoegsel "P", wat staat voor "periode", en een "D" gebruiken om dagen te markeren. Bijvoorbeeld:
<!-- A duration of four days -->
<time datetime="P4D">four days</time>Als u de periode verder moet specificeren, kunt u na de "D" een "T" toevoegen, staand voor "tijd", en "H" gebruiken voor uren, "M" voor minuten en "S" voor seconden. Aldus:
<!-- A duration of four days,
four hours, and three minutes -->
<time datetime="P4DT4H3M">four days</time>Met deze indeling kunt u ook een of meer duurtijdcomponentenopgeven.
Beperkingen
The current specification has some limitations in what you can define with the element. One of these limitations is that you can’t indicate date ranges. So if you are writing a post about a conference that lasts more than one day, for example from June 26, 2014 to June 28, 2014, you have to use two elements. A good example can be found in the speaking page on my website where I use the element as shown below:<time><time><time>
<time datetime="2014-06-28">26<span class="hidden">June 2014</span></time>-<time datetime="2014-06-28">28 June 2014</time>Another limitation is that you can’t use the element to represent dates before the Common Era.<time>
Browser Support
Based on the <time> element article on MDN, this element is supported in:
- Chrome 33+
- Firefox 22+
- Internet Explorer 9+
- Opera 22+
- Safari 7+
However, there is not much to worry about in older browsers. In fact, in case it lacks support for this element the browser will simply display it as an unknown inline element.
Conclusion
If you haven’t started using the element in your pages, I hope this guide has inspired you to do so.<time>
For more info, here are some relevant links:
This article is also available in Portuguese on Tableless
Ik ben een (full-stack) web- en app-ontwikkelaar met meer dan 5 jaar ervaring in het programmeren voor het web met HTML, CSS, Sass, JavaScript en PHP. Ik ben een expert op het gebied van JavaScript- en HTML5-API's, maar mijn interesses omvatten webbeveiliging, toegankelijkheid, prestaties en SEO. Ik ben ook een vaste schrijver voor verschillende netwerken, spreker en auteur van de boeken jQuery in Action, derde editie en Instant jQuery Selectors.
