Having just finished reading Introducing HTML5 I’m rather excited about all the new HTML5 tags and can’t wait to get using them!

One of the new semantic tags is the <time> tag which is used to mark up dates and times so they are readable to both humans and to machines. It does this by including a datetime attribute which contains the relevent date in a standardised format.

For instance:

<p>
   This post was written on <time datetime="2010-09-16T21:28:29+01:00">Thursday evening</time>
<p>

As you can see, the machine readable format is “YYYY-MM-DD” with a “T” to separate the time in the 24-hour format HH:MM. It ends with your timezone’s offset from UTC/GMT.

UPDATE

Ignore everything that follows! As clever commenters pointed out, there is actually a PHP constant for this format – DATE_W3C. All you need to get the current time is…

<?php echo date(DATE_W3C); ?>

All that follows, from the original post, is left for reference only…

To make this easier to generate when dealing with dates in PHP, I have written a function to do this for me, which is below. Feel free to use it and let me know of any suggestions for improvement.

To use the function, pass in a unix timestamp or leave blank to use the current time.

<?php

/**
 * formats the date passed into format required by 'datetime' attribute of  tag
 * if no intDate supplied, uses current date.
 * @author Pete Williams
 * @link http://petewilliams.info/blog/2010/09/generate-html5-time-tags-datetime-attribute-in-php/
 * @param intDate integer optional
 * @return string
 **/
function getDateTimeValue( $intDate = null ) {

	$strFormat = 'Y-m-d\TH:i:sP';
	$strDate = $intDate ? date( $strFormat, $intDate ) : date( $strFormat ) ; 

	return $strDate;
}

echo getDateTimeValue();

Example: view current time in datetime format.

Buy domain names for just $13/year.

On a site I’m currently working on, it seemed best to display an OL as a list in sentence form.

For example:

<ul class="commaList">
	<li>one</li>
	<li>two</li>
	<li>three</li>
	<li>four</li>
</ul>

Would display as: One, two, three and four.

In case this CSS is of any use to anyone else, I’ve published it as a snippet below.

Please note this uses pseudo-selectors and so will not work in IE, but will gracefully degrade.

/* display ordered list as comma list */
.commaList li:first-child {
	text-transform: capitalize;
}

.commaList li:after{
	content: ',';
	padding-right: 5px;
}

.commaList li:nth-last-child(2):after {
	content: '';
	padding-right: 5px;
}

.commaList li:last-child:before {
	content: 'and ';
	padding-right: 0;
}

.commaList li:last-child:after {
	content: '.';
	clear: both;
}

/* this prevents single item lists from containing commas and 'ands' */
.commaList li:only-of-type:before, .commaList li:only-of-type:after {
	content: '';
	padding: 0;
}