HTML5 time element

The time element is presenting time on a 24-hour clock or a precise date, it contains a machine-readable format and text people can read.
ExampleHTML5 time element valid format
Source Code Expand

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title></title>
</head>

<body>	
	<!-- year and month format -->
	<p><time>2013-10</time></p>
	<!-- date format -->
	<p><time>2013-01-05</time></p>
	<!-- time format -->
	<p><time>21:30</time></p>
	<p><time>21:30:15</time></p>
	<!-- date format with human readable text -->
	<p><time datetime="2013-01-05">2013/01/05</time><p>
	<p><time datetime="2013-01-05T18:50:16-06:00">Jan, 05, 2013</time><p>
	<p><time datetime="2013-01-01T00:00:00-06:00">New Year</time><p>
</body>

</html>




If the time element is palced inside of <article>, then the time element is used for this article.
ExampleHTML5 time element for article
Source Code Expand

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title></title>
</head>

<body>
	<article>
		<header>
			<time datetime="2013-01-05">2013/01/05</time>
			<h1>What`s new in HTML 5</h1>
		</header>
		<p>HTML5 provides serveral new features...</p>	
	</article>	
</body>

</html>




If the time element is palced outside of any <article>, then the time element is used for document.
ExampleHTML5 time element for document
Source Code Expand

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title></title>
</head>

<body>
	<time datetime="2013-01-05">2013/01/05</time>
	<article>
		<header>			
			<h1>What`s new in HTML 5</h1>
		</header>
		<p>HTML5 provides serveral new features...</p>	
	</article>	
	
	<article>
		<header>
			<h1>HTML 5 introduction</h1>
		</header>
		<p>Welcome to HTML 5 world</p>	
	</article>
</body>

</html>


comments powered by Disqus