Microdata
HTML5 defines a standardized scheme for marking up and retrieving metadata in the body of an HTML document. If you’ve worked with microformats like hCard and hCalendar then microdata will be relatively familiar. The biggest change is the move from the class name hijacking central to microformats to a new itemprop attribute. In addition to this designed solution Microdata adss two new attributes and one dom method that provides standard access to microdata. itemscope sets the scope of a microdata segment, itemtype defines a URL for the microdata format in use and document.getItems() provides access to microdata. The method returns a NodeList containing the items corresponding to an optional itemType argument or all types, if no argument is provided. the following code listing shows a sample document that features a simple bio of your humble author marked up with microdata. It leverages microdata formats from schema.org and mixes and matches three separate microdata formats, Person, Postal Address and Organization.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Microdata Example</title>
<link rel="stylesheet" href="_assets/css/style.css">
<script src="_assets/js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body id="microdata">
<div id="main">
<div itemscope itemtype="http://schema.org/Person">
<h1 itemprop="name">Rob Larsen</h1>
<img src="http://gravatar.com/avatar/88218052898935c38927c1a5e607c794?size=420" itemprop="image" />
<h2 itemprop="jobTitle">Senior Specialist,
<span itemprop="worksFor"><span itemprop="name" itsemscope itemtype="http://schema.org/Organization">
Sapient Global Markets</span></span></h2>
<ul itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<li itemprop="streetAddress"> 131 Dartmouth St. </li>
<li><span itemprop="addressLocality">Boston</span> <span itemprop="addressRegion">MA</span></li>
<li>Rob's email: <a href="mailto:jane-doe@xyz.edu" itemprop="email"> rob@htmlcssjavascript.com</a> </li>
<li>Rob's Blog: <a href="https://htmlcssjs.wpengine.com/" itemprop="url">htmlcssjavascript.com</a> </li>
<li><a href="http://twitter.com/robreact/" itemprop="url">@robreact on Twitter </a> </li>
<li><a href="https://github.com/roblarsen" itemprop="url">roblarsen on github</a> </li>
</ul>
</div>
</div>
<script src="code.jquery.com/jquery-1.7.1.min.js"></script>
</body>
</html>