HTML5 Multimedia Development Cookbook

Using the time element

“The <time> element represents either a time on a 24-hour clock, or a precise
date in the proleptic Gregorian calendar, optionally with a time and a time-zone
offset.” – WHATWG’s HTML5 Draft Standard
– http://whatwg.org/html5

Getting ready

The new <time> element is a powerful way to display time or a specific date.

How to do it…

In this recipe we’ll display dates and times that will be readable for both humans and
machines. Let’s look at four examples.


	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--[if lt IE 9]><script
			src=http://html5shiv.googlecode.com/svn/trunk/html5.js>
		</script>[endif]-->
		<meta name="viewport" content="width=device-width,
			initial-scale=1.0">
	</head>
	<body>
		<article>
			<header>
				<h2>Headline</h2>
				<time datetime="2010-11-29">November 29, 2010</time>
			</header>
			<p>First paragraph</p>
			<p>Second paragraph</p>
			<footer>Meta information.</footer>
		</article>
		<article>
			<header>
				<h2>Headline</h2>
				<time datetime="2010-11-29">Nov. 29</time>
			</header>
			<p>First paragraph</p>
			<p>Second paragraph</p>
			<footer>Meta information.</footer>
		</article>
		<article>
			<header>
				<h2>Headline</h2>
				<time datetime="2010-11-29">the date this was written</time>
			</header>
			<p>First paragraph</p>
			<p>Second paragraph</p>
			<footer>Meta information.</footer>
		</article>
		<article>
			<header>
				<h2>Headline</h2>
				<time datetime="2010-11-29T11:34">the date and time this was
				written</time>
			</header>
			<p>First paragraph</p>
			<p>Second paragraph</p>
			<footer>Meta information.</footer>
		</article>
	</body>
	</html>

How it works…

We can use the new <time> element to indicate specific dates, times, or both.

There’s more…

The new <time> element specifies an exact moment in time—not a time period.

Odd rules

One interesting aspect of the new <time> element is that you can’t use a date before the
Christian Era. You also can’t use a date like “November 2010.” Whatever date we specify
must be a positive, specific date—not a relative one. The HTML5 Working Group continues
to address this seemingly arbitrary restriction.

<time>’s Time will come

Browsers display the new <time> element but don’t do anything special with it—yet.

Always remember SEO

Time. Why are we so obsessed with it? One very valid reason to focus on time and dates on
the web is Search Engine Optimization. SEO, once seen as some sort of mysterious voodoo
only black hatted wizards understood, is now everyone’s responsibility online. You spend time
creating good code and expect a writer to create content worth reading. Now go one step
further and ensure that your intended audience can actually find the content you have taken
the time to create. And the new <time> element is just one of the ways search engines draw
attention to the most recent content.

See also

The new HTML5 <time> element is a possible addition to the Microformats movement.
Microformats promise to add additional semantic meaning to our markup. Though not
officially a standard, Microformats are slowly gaining acceptance in the web development
community. Learn more at Microformats.org.

Specifying the pubdate of an article

“The pubdate attribute is a boolean attribute. If specified it indicates that the
date and time given by the element is the publication date and time of the nearest
ancestor <article> element, or, if the element has no ancestor <article>
element, of the document as a whole.” – WHATWG’s HTML5 Draft Standard -

http://whatwg.org/html5

Getting ready

The new pubdate is an attribute for the new <time> element when it exists within the new
<article> element. It allows us to be even more precise when presenting the date and time
of publication.

How to do it…

In this recipe we’ll build on the new <time> element from the last recipe and add the new
optional pubdate attribute to display our publication date.


	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--[if lt IE 9]><script
			src=http://html5shiv.googlecode.com/svn/trunk/html5.js>
		</script>[endif]-->
		<meta name="viewport" content="width=device-width,
			initial-scale=1.0">
	</head>
	<body>
		<article>
			<header>
				<h2>Headline</h2>
				<p>Published on <time datetime="2010-11-29" pubdate>
					November 29, 2010</time> in the something category.</p>
			</header>
			<p>First paragraph</p>
			<p>Second paragraph</p>
			<footer></footer>
		</article>
		<article>
			<header>
				<h2>Headline</h2>
				<p>Published on <time datetime="2010-11-28" pubdate>
				November 28, 2010</time> in the something category.</p>
			</header>
			<p>First paragraph</p>
			<p>Second paragraph</p>
			<footer></footer>
		</article>
	</body>
	</html>

How it works…

Pubdate is simply a binary variable, or Boolean, attribute to denote when something
was published.

There’s more…

You can think of pubdate as adding extra information to an element (<time>) that is already
providing extra information. It is like the cherry on a sundae. And who doesn’t like cherries on
their sundaes?

Still waiting on browsers

We are getting really forward-thinking by including new elements like <mark>, <time>, and
pubdate, as none are fully supported by any browser—yet.

Modern browsers like Firefox display the new

Extra credit

You can code the new pubdate Boolean attribute as <time datetime=”2010-11-29″
pubdate=”pubdate”> if you want to conform to XML syntax.

Let’s end confusion

Even though HTML5 is still quite new, there’s already some confusion about the new pubdate
Boolean attribute. Some think it should generate the date of publication based on your
computer clock or a server. That’s not its role. Its role is to produce a machine-readable
publication date that is useful no matter what text you may put after it.

See also

Tantek Celik has created a very useful site at http://favelets.com that features all sorts
of “bookmarklets” or in-browser JavaScript commands. Use these to do things like validate
HTML5, CSS, and anchors all in the same window. Very helpful!

Comments

comments

Pages: 1 2 3 4

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*