Mixing_HTML_Data_Formats 32.8 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta name="generator" content="MediaWiki 1.15.5" />
		<meta name="keywords" content="Mixing HTML Data Formats,HTML Data Improvements,Html-data-tf" />
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="search" type="application/opensearchdescription+xml" href="/wiki/opensearch_desc.php" title="W3C Wiki (en)" />
		<link rel="alternate" type="application/rss+xml" title="W3C Wiki RSS feed" href="/wiki/index.php?title=Special:RecentChanges&amp;feed=rss" />
		<link rel="alternate" type="application/atom+xml" title="W3C Wiki Atom feed" href="/wiki/index.php?title=Special:RecentChanges&amp;feed=atom" />
		<title>Mixing HTML Data Formats - W3C Wiki</title>
		<link rel="stylesheet" href="/wiki/skins/common/shared.css?207" type="text/css" media="screen" />
		<link rel="stylesheet" href="/wiki/skins/common/commonPrint.css?207" type="text/css" media="print" />
		<link rel="stylesheet" href="/wiki/skins/w3cmonobook/main.css?207" type="text/css" media="screen" />
		<!--[if lt IE 5.5000]><link rel="stylesheet" href="/wiki/skins/w3cmonobook/IE50Fixes.css?207" type="text/css" media="screen" /><![endif]-->
		<!--[if IE 5.5000]><link rel="stylesheet" href="/wiki/skins/w3cmonobook/IE55Fixes.css?207" type="text/css" media="screen" /><![endif]-->
		<!--[if IE 6]><link rel="stylesheet" href="/wiki/skins/w3cmonobook/IE60Fixes.css?207" type="text/css" media="screen" /><![endif]-->
		<!--[if IE 7]><link rel="stylesheet" href="/wiki/skins/w3cmonobook/IE70Fixes.css?207" type="text/css" media="screen" /><![endif]-->
		<link rel="stylesheet" href="/wiki/index.php?title=MediaWiki:Common.css&amp;usemsgcache=yes&amp;ctype=text%2Fcss&amp;smaxage=18000&amp;action=raw&amp;maxage=18000" type="text/css" />
		<link rel="stylesheet" href="/wiki/index.php?title=MediaWiki:Print.css&amp;usemsgcache=yes&amp;ctype=text%2Fcss&amp;smaxage=18000&amp;action=raw&amp;maxage=18000" type="text/css" media="print" />
		<link rel="stylesheet" href="/wiki/index.php?title=MediaWiki:W3cmonobook.css&amp;usemsgcache=yes&amp;ctype=text%2Fcss&amp;smaxage=18000&amp;action=raw&amp;maxage=18000" type="text/css" />
		<link rel="stylesheet" href="/wiki/index.php?title=-&amp;action=raw&amp;maxage=18000&amp;gen=css" type="text/css" />
		<!--[if lt IE 7]><script type="text/javascript" src="/wiki/skins/common/IEFixes.js?207"></script>
		<meta http-equiv="imagetoolbar" content="no" /><![endif]-->

		<script type= "text/javascript">/*<![CDATA[*/
		var skin = "w3cmonobook";
		var stylepath = "/wiki/skins";
		var wgArticlePath = "/wiki/$1";
		var wgScriptPath = "/wiki";
		var wgScript = "/wiki/index.php";
		var wgVariantArticlePath = false;
		var wgActionPaths = {};
		var wgServer = "http://www.w3.org";
		var wgCanonicalNamespace = "";
		var wgCanonicalSpecialPageName = false;
		var wgNamespaceNumber = 0;
		var wgPageName = "Mixing_HTML_Data_Formats";
		var wgTitle = "Mixing HTML Data Formats";
		var wgAction = "view";
		var wgArticleId = "6026";
		var wgIsArticle = true;
		var wgUserName = null;
		var wgUserGroups = null;
		var wgUserLanguage = "en";
		var wgContentLanguage = "en";
		var wgBreakFrames = false;
		var wgCurRevisionId = 55602;
		var wgVersion = "1.15.5";
		var wgEnableAPI = true;
		var wgEnableWriteAPI = true;
		var wgSeparatorTransformTable = ["", ""];
		var wgDigitTransformTable = ["", ""];
		var wgRestrictionEdit = [];
		var wgRestrictionMove = [];
		/*]]>*/</script>

		<script type="text/javascript" src="/wiki/skins/common/wikibits.js?207"><!-- wikibits js --></script>
		<!-- Head Scripts -->
		<script type="text/javascript" src="/wiki/skins/common/ajax.js?207"></script>
		<link rel="alternate" type="application/rdf+xml" title="Mixing HTML Data Formats" href="/wiki/index.php?title=Special:ExportRDF/Mixing_HTML_Data_Formats&amp;xmlmime=rdf" />
		<script type="text/javascript" src="/wiki/index.php?title=-&amp;action=raw&amp;gen=js&amp;useskin=w3cmonobook"><!-- site js --></script>
	</head>
<body class="mediawiki ltr ns-0 ns-subject page-Mixing_HTML_Data_Formats skin-w3cmonobook">
	<div id="globalWrapper">
		<div id="column-content">
	<div id="content">
		<a id="top"></a>
				<h1 id="firstHeading" class="firstHeading">Mixing HTML Data Formats</h1>
		<div id="bodyContent">
			<h3 id="siteSub">From W3C Wiki</h3>
			<div id="contentSub"></div>
									<div id="jump-to-nav">Jump to: <a href="#column-one">navigation</a>, <a href="#searchInput">search</a></div>			<!-- start content -->
			<p>This page examines how publishers can mix different HTML data formats within their pages, and how consumers can interpret the results, as part of the work of the <a href="/wiki/Html-data-tf" title="Html-data-tf">HTML Data TF</a>.
</p>
<table id="toc" class="toc" summary="Contents"><tr><td><div id="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1"><a href="#Mixing_Vocabularies"><span class="tocnumber">1</span> <span class="toctext">Mixing Vocabularies</span></a>
<ul>
<li class="toclevel-2"><a href="#Mixing_Vocabularies_in_microformats"><span class="tocnumber">1.1</span> <span class="toctext">Mixing Vocabularies in microformats</span></a></li>
<li class="toclevel-2"><a href="#Mixing_Vocabularies_in_RDFa"><span class="tocnumber">1.2</span> <span class="toctext">Mixing Vocabularies in RDFa</span></a></li>
<li class="toclevel-2"><a href="#Mixing_Vocabularies_in_microdata"><span class="tocnumber">1.3</span> <span class="toctext">Mixing Vocabularies in microdata</span></a>
<ul>
<li class="toclevel-3"><a href="#Mixing_Vocabularies_using_a_Type_Property"><span class="tocnumber">1.3.1</span> <span class="toctext">Mixing Vocabularies using a Type Property</span></a></li>
<li class="toclevel-3"><a href="#Mixing_Vocabularies_using_Repeated_Content"><span class="tocnumber">1.3.2</span> <span class="toctext">Mixing Vocabularies using Repeated Content</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="toclevel-1"><a href="#Mixing_Syntaxes"><span class="tocnumber">2</span> <span class="toctext">Mixing Syntaxes</span></a></li>
<li class="toclevel-1"><a href="#Consuming_Pages_with_Multiple_Formats"><span class="tocnumber">3</span> <span class="toctext">Consuming Pages with Multiple Formats</span></a></li>
</ul>
</td></tr></table><script type="text/javascript"> if (window.showTocToggle) { var tocShowText = "show"; var tocHideText = "hide"; showTocToggle(); } </script>
<a name="Mixing_Vocabularies" id="Mixing_Vocabularies"></a><h2> <span class="mw-headline"> Mixing Vocabularies </span></h2>
<p>Methods for marking up the same data in a page using different vocabularies in the same syntax vary by syntax.
</p>
<a name="Mixing_Vocabularies_in_microformats" id="Mixing_Vocabularies_in_microformats"></a><h3> <span class="mw-headline"> Mixing Vocabularies in microformats </span></h3>
<p>As microformats are simply indicated through classes, it's possible to mix several within the same set of content. An example is the <a href="http://www.bbc.co.uk/worldservice/bangladeshboat/" class="external text" title="http://www.bbc.co.uk/worldservice/bangladeshboat/" rel="nofollow">BBC Bangladesh River Journey</a> page which includes hAtom and hCalendar:
</p>
<pre>&lt;li class=&quot;hentry vevent xfolkentry postid-f2068841910&quot;&gt;
  &lt;h3 class=&quot;entry-title summary&quot;&gt;
    &lt;a href=&quot;http://www.flickr.com/photos/bangladeshboat/2068841910&quot; title=&quot;The final picture (on Flickr)&quot;&gt;The final picture&lt;/a&gt;
  &lt;/h3&gt;
  &lt;div class=&quot;entry-content&quot;&gt;
    &lt;p class=&quot;photo&quot;&gt;
      &lt;a rel=&quot;bookmark&quot; class=&quot;taggedlink url&quot; href=&quot;http://www.flickr.com/photos/bangladeshboat/2068841910&quot; title=&quot;The final picture (on Flickr)&quot;&gt;
        &lt;img src=&quot;http://farm3.static.flickr.com/2175/2068841910_1162a8086b_s.jpg&quot; 
             alt=&quot;The final picture (on Flickr)&quot; title=&quot;The final picture (on Flickr)&quot; width=&quot;64&quot; height=&quot;64&quot; /&gt;
      &lt;/a&gt;
    &lt;/p&gt;
    &lt;p class=&quot;description&quot;&gt;As the BBC team prepare to disembark the boat, the sun sets overhead, and indeed on the trip itself.&lt;/p&gt;
  &lt;/div&gt;
  &lt;ul class=&quot;meta&quot;&gt;
    &lt;li class=&quot;date&quot;&gt;&lt;abbr class=&quot;published dtstart&quot; title=&quot;2007-11-26T02:11:51+06:00&quot;&gt;2 days ago&lt;/abbr&gt;&lt;/li&gt;
    &lt;li class=&quot;location&quot;&gt;&lt;abbr class=&quot;geo point-22&quot; title=&quot;+22.47157;+89.59534&quot;&gt;Mongla, Bangladesh&lt;/abbr&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;
</pre>
<a name="Mixing_Vocabularies_in_RDFa" id="Mixing_Vocabularies_in_RDFa"></a><h3> <span class="mw-headline"> Mixing Vocabularies in RDFa </span></h3>
<p>RDFa is designed to be used with multiple vocabularies:
</p>
<ul><li> types and properties are given IRIs as names, so do not have to be disambiguated; IRIs do not have to be written out in full (see below)
</li><li> an entity can be assigned multiple types from different vocabularies by listing them within the <code>@typeof</code> attribute
</li><li> attributes that indicate properties (<code>@property</code>, <code>@rel</code> and <code>@rev</code>) can take multiple space-separated properties which may be from different vocabularies
</li></ul>
<p>Writing out IRIs in full can clutter HTML so RDFa provides four mechanisms to shorten IRIs:
</p>
<ul><li> There are several built-in prefixes which can be used for popular vocabularies. These are listed as part of the <a href="http://www.w3.org/2011/rdfa-context/rdfa-1.1.html" class="external text" title="http://www.w3.org/2011/rdfa-context/rdfa-1.1.html" rel="nofollow">RDFa 1.1 Core initial context</a>. Any IRI within one of these vocabularies can be abbreviated using the <code>prefix:name</code> notation.
</li><li> The <code>@prefix</code> attribute can be used to define additional prefixes for other vocabularies.
</li><li> The <code>@vocab</code> attribute defines a default vocabulary within its scope; any IRIs that begin with this vocabulary can be abbreviated to a short name (the remainder of the IRI after the vocabulary IRI).
</li><li> Namespace declarations (<code>xmlns:prefix</code> attributes) can also be used to define prefixes. <b>This mechanism is deprecated and should not be used.</b>
</li></ul>
<p>Note that if you use any of the last three mechanisms, the shortened IRIs can only be understood when they are within the scope of the relevant attributes. These can be easy to mislay when people copy and paste HTML from one place to another, or as the result of template changes in a content-management system. We therefore recommend that these attributes are avoided where possible &mdash; use the built-in prefixes or full IRIs in preference &mdash; and, where they are used, placed on elements that represent entities (those with <code>@about</code> or <code>@typeof</code> attributes) and repeated on each entity element rather than being inherited from an ancestor element.
</p>
<a name="Mixing_Vocabularies_in_microdata" id="Mixing_Vocabularies_in_microdata"></a><h3> <span class="mw-headline"> Mixing Vocabularies in microdata </span></h3>
<p>microdata is designed such that each piece of information in a page is assigned types from a single vocabulary, though each entity may have multiple types and have properties from other vocabularies.
</p><p>Properties in microdata are either short names (in which case they are scoped to the vocabulary of the types of the entity) or URLs. A URL property has no relationship to a given short name property unless that relationship is specified within the vocabulary that defines the properties.
</p><p>You might find that you need to target two consumers who each recognise items using types from different vocabularies. For example, you might want to target schema.org and use the vEvent vocabulary with the original HTML:
</p>
<pre>&lt;a href=&quot;nba-miami-philidelphia-game3.html&quot;&gt;
NBA Eastern Conference First Round Playoff Tickets:
 Miami Heat at Philadelphia 76ers - Game 3 (Home Game 1)
&lt;/a&gt;

Thu, 04/21/16
8:00 p.m.

&lt;a href=&quot;wells-fargo-center.html&quot;&gt;
Wells Fargo Center
&lt;/a&gt;
Philadelphia, PA

Priced from: $35
1938 tickets left
</pre>
<p>In this case there are three options available to you. The first, if consumers support it, is to use a different syntax for one of the vocabularies. For example, the vEvent vocabulary is only supported in microdata but schema.org can be consumed from either microdata or RDFa. Mixing syntaxes within a single page is rarely a good option but in some circumstances it may be preferable to the other workarounds described here.
</p>
<a name="Mixing_Vocabularies_using_a_Type_Property" id="Mixing_Vocabularies_using_a_Type_Property"></a><h4> <span class="mw-headline"> Mixing Vocabularies using a Type Property </span></h4>
<p>Some vocabularies may define a property through which types from that vocabulary can be assigned to items that are in a different vocabulary. For example, schema.org could define a <code><a href="http://schema.org/type" class="external free" title="http://schema.org/type" rel="nofollow">http://schema.org/type</a></code> property whose value is a URL, and state that any microdata item that a schema.org type as a value for that property is recognised as being an item of that type. In this case, the types specified in the <code>@itemtype</code> attribute are the <b>primary types</b> of the entity and those specified through the property are the <b>secondary types</b>.
</p><p>Alongside the assertion that property URLs that begin with <code><a href="http://schema.org/" class="external free" title="http://schema.org/" rel="nofollow">http://schema.org/</a></code> have the same semantics as short name properties on items with a schema.org type, this enables the schema.org vocabulary to be mixed in with an item marked up using vEvent:
</p><p><b>Note that at time of writing schema.org does not specify a <code><a href="http://schema.org/type" class="external free" title="http://schema.org/type" rel="nofollow">http://schema.org/type</a></code> property and this example will not work.</b>
</p>
<pre>&lt;div itemscope itemtype=&quot;http://microformats.org/profile/hcalendar#vevent&quot;&gt;
  &lt;link itemprop=&quot;http://schema.org/type&quot; href=&quot;http://schema.org/Event&quot;&gt;
  &lt;a itemprop=&quot;url http://schema.org/url&quot; href=&quot;nba-miami-philidelphia-game3.html&quot;&gt;
  NBA Eastern Conference First Round Playoff Tickets:
  &lt;span itemprop=&quot;summary http://schema.org/name&quot;&gt; Miami Heat at Philadelphia 76ers - Game 3 (Home Game 1) &lt;/span&gt;
  &lt;/a&gt;

  &lt;meta itemprop=&quot;dtstart http://schema.org/startDate&quot; content=&quot;2016-04-21T20:00&quot;&gt;
    Thu, 04/21/16
    8:00 p.m.

  &lt;div itemprop=&quot;location&quot;&gt;
    &lt;div itemprop=&quot;http://schema.org/location&quot; itemscope itemtype=&quot;http://schema.org/Place&quot;&gt;
      &lt;a itemprop=&quot;url&quot; href=&quot;wells-fargo-center.html&quot;&gt;
      Wells Fargo Center
      &lt;/a&gt;
      &lt;div itemprop=&quot;address&quot; itemscope itemtype=&quot;http://schema.org/PostalAddress&quot;&gt;
        &lt;span itemprop=&quot;addressLocality&quot;&gt;Philadelphia&lt;/span&gt;,
        &lt;span itemprop=&quot;addressRegion&quot;&gt;PA&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div itemprop=&quot;http://schema.org/offers&quot; itemscope itemtype=&quot;http://schema.org/AggregateOffer&quot;&gt;
    Priced from: &lt;span itemprop=&quot;lowPrice&quot;&gt;$35&lt;/span&gt;
    &lt;span itemprop=&quot;offerCount&quot;&gt;1938&lt;/span&gt; tickets left
  &lt;/div&gt;
&lt;/div&gt;
</pre>
<p>Note in particular that the vEvent <code>location</code> property takes text while the schema.org <code>location</code> property takes structured information about the location. These are combined by having an element for the property which requires structured information nested within the property that requires text.
</p><p>Also note that in this example the <code><a href="http://schema.org/type" class="external free" title="http://schema.org/type" rel="nofollow">http://schema.org/type</a></code> property is only used where necessary, on the entity which needs to be marked as an event in both vocabularies. Where possible, the schema.org type for an entity is provided explicitly through the <code>@itemtype</code> attribute.
</p><p>This method of mixing vocabularies requires vocabularies to specify how consumers should recognise items of a particular type. It is recommended that vocabulary authors define an <code>@itemtype</code>-equivalent property, and that, for better integration with RDF tools, this property is <code><a href="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" class="external free" title="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" rel="nofollow">http://www.w3.org/1999/02/22-rdf-syntax-ns#type</a></code> (TODO: Issue about what to recommend here.)
</p><p>The other disadvantage of this approach is that there is no support within the microdata API for retrieving items based on the value of a property. In the example above, it would be possible to retrieve the event using:
</p>
<pre>document.getItems('<a href="http://microformats.org/profile/hcalendar#vevent'" class="external free" title="http://microformats.org/profile/hcalendar#vevent'" rel="nofollow">http://microformats.org/profile/hcalendar#vevent'</a>)
</pre>
<p>but not through:
</p>
<pre>document.getItems('<a href="http://schema.org/Event'" class="external free" title="http://schema.org/Event'" rel="nofollow">http://schema.org/Event'</a>)
</pre>
<p>Scripts that extract microdata information using the DOM will be faster if they can use the primary types for an item, specified within the <code>@itemtype</code> attribute, so you should specify types accessed through scripts within <code>@itemtype</code> rather than through a property  wherever possible.
</p>
<a name="Mixing_Vocabularies_using_Repeated_Content" id="Mixing_Vocabularies_using_Repeated_Content"></a><h4> <span class="mw-headline"> Mixing Vocabularies using Repeated Content </span></h4>
<p>The second method of supporting multiple properties is to have the entity represented by two (or more) microdata items on the page. To enable dragging and dropping the data from these items, they should be nested inside each other. Properties can be set on the outer element using <code>link</code> and <code>meta</code> elements which are hidden from users, while the visible content of the page is marked up by the inner element.
</p>
<pre>&lt;div itemscope itemtype=&quot;http://microformats.org/profile/hcalendar#vevent&quot;&gt;
  &lt;link itemprop=&quot;url&quot; href=&quot;nba-miami-philidelphia-game3.html&quot;&gt;
  &lt;meta itemprop=&quot;summary&quot; content=&quot;Miami Heat at Philadelphia 76ers - Game 3 (Home Game 1)&quot;&gt;
  &lt;meta itemprop=&quot;dtstart&quot; content=&quot;2016-04-21T20:00&quot;&gt;
  &lt;meta itemprop=&quot;location&quot; content=&quot;Wells Fargo Center, Philadelphia, PA&quot;&gt;
  &lt;div itemscope itemtype=&quot;http://schema.org/Event&quot;&gt;
    &lt;a itemprop=&quot;url&quot; href=&quot;nba-miami-philidelphia-game3.html&quot;&gt;
    NBA Eastern Conference First Round Playoff Tickets:
    &lt;span itemprop=&quot;name&quot;&gt; Miami Heat at Philadelphia 76ers - Game 3 (Home Game 1) &lt;/span&gt;
    &lt;/a&gt;

    &lt;meta itemprop=&quot;startDate&quot; content=&quot;2016-04-21T20:00&quot;&gt;
      Thu, 04/21/16
      8:00 p.m.

    &lt;div itemprop=&quot;location&quot; itemscope itemtype=&quot;http://schema.org/Place&quot;&gt;
      &lt;a itemprop=&quot;url&quot; href=&quot;wells-fargo-center.html&quot;&gt;
      Wells Fargo Center
      &lt;/a&gt;
      &lt;div itemprop=&quot;address&quot; itemscope itemtype=&quot;http://schema.org/PostalAddress&quot;&gt;
        &lt;span itemprop=&quot;addressLocality&quot;&gt;Philadelphia&lt;/span&gt;,
        &lt;span itemprop=&quot;addressRegion&quot;&gt;PA&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div itemprop=&quot;offers&quot; itemscope itemtype=&quot;http://schema.org/AggregateOffer&quot;&gt;
      Priced from: &lt;span itemprop=&quot;lowPrice&quot;&gt;$35&lt;/span&gt;
      &lt;span itemprop=&quot;offerCount&quot;&gt;1938&lt;/span&gt; tickets left
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
<p>This method does not require any special properties to be defined in the vocabularies used to mark up the page, and the two items are directly assigned the relevant type and are thus accessible to scripts through the <code>document.getItems()</code> method.
</p><p>The disadvantages of this method are that the page contains more items than there are entities (in the above example, two items representing the same event), and it requires repetition of data within the page.
</p>
<a name="Mixing_Syntaxes" id="Mixing_Syntaxes"></a><h2> <span class="mw-headline"> Mixing Syntaxes </span></h2>
<p>A requirement to support a large range of consumers can mean that it becomes necessary to publish using not only multiple vocabularies but multiple syntaxes.
</p><p>RDFa, microformats and microdata all share the same basic entity/attribute/value model, so in many cases it is possible to mirror attributes across the syntaxes. The following example shows the same content marked up with:
</p>
<ul><li> hCalendar (microformat)
</li><li> schema.org (RDFa)
</li><li> vEvent (microdata)
</li></ul>
<pre>&lt;div class=&quot;vevent&quot;
  itemscope itemtype=&quot;http://microformats.org/profile/hcalendar#vevent&quot;
  vocab=&quot;http://schema.org/&quot; typeof=&quot;Event&quot;&gt;
  &lt;a class=&quot;url&quot; itemprop=&quot;url&quot; property=&quot;url&quot; href=&quot;nba-miami-philidelphia-game3.html&quot;&gt;
    NBA Eastern Conference First Round Playoff Tickets:
    &lt;span class=&quot;summary&quot; itemprop=&quot;summary&quot; property=&quot;name&quot;&gt; Miami Heat at Philadelphia 76ers - Game 3 (Home Game 1) &lt;/span&gt;
  &lt;/a&gt;

  &lt;meta itemprop=&quot;dtstart&quot; property=&quot;startDate&quot; content=&quot;2016-04-21T20:00:00&quot;&gt;
  &lt;abbr class=&quot;dtstart&quot; title=&quot;2016-04-21T20:00:00&quot;&gt;
    Thu, 04/21/16
    8:00 p.m.
  &lt;/abbr&gt;

  &lt;div class=&quot;location&quot; itemprop=&quot;location&quot; 
       vocab=&quot;http://schema.org/&quot; property=&quot;location&quot; typeof=&quot;Place&quot;&gt;
    &lt;a property=&quot;url&quot; href=&quot;wells-fargo-center.html&quot;&gt;
      Wells Fargo Center
    &lt;/a&gt;
    &lt;div property=&quot;address&quot; vocab=&quot;http://schema.org/&quot; typeof=&quot;PostalAddress&quot;&gt;
      &lt;span property=&quot;addressLocality&quot;&gt;Philadelphia&lt;/span&gt;,
      &lt;span property=&quot;addressRegion&quot;&gt;PA&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div vocab=&quot;http://schema.org/&quot; property=&quot;offers&quot; typeof=&quot;AggregateOffer&quot;&gt;
    Priced from: &lt;span property=&quot;lowPrice&quot;&gt;$35&lt;/span&gt;
    &lt;span property=&quot;offerCount&quot;&gt;1938&lt;/span&gt; tickets left
  &lt;/div&gt;
&lt;/div&gt;
</pre>
<p>It is particularly important to check pages in which syntaxes are mixed together using an appropriate validator for each format.
</p><p>The following guidelines may help when creating pages in which different syntaxes are mixed together.
</p>
<ul><li> microformats do not use <code>link</code> or <code>meta</code> elements within the content of the page and in some cases require particular elements to be used to encode information, such as using <code>abbr</code> to support the <a href="http://microformats.org/wiki/datetime-design-pattern" class="external text" title="http://microformats.org/wiki/datetime-design-pattern" rel="nofollow">datetime-design-pattern</a> as illustrated by the <code>dtstart</code> property in the example above
</li><li> link relations required in certain microformats, particularly XFN, clash with the use of RDFa's <code>@vocab</code> attribute; avoid using <code>@vocab</code> on any ancestor of an element that contains a <code>@rel</code> (see <a href="/wiki/HTML_Data_Improvements#Link_Relations" title="HTML Data Improvements">issues on link relations</a>)
</li><li> the following equivalencies between RDFa and microdata attributes generally hold true:
<ul><li> <code>@itemid</code> = <code>@resource</code>
</li><li> <code>@itemtype</code> = <code>@typeof</code> (+ <code>@vocab</code> to enable the use of short names for properties)
</li><li> <code>@itemprop</code> + <code>@itemscope</code> = <code>@property</code> + an empty <code>@typeof</code> if there's no <code>@itemtype</code>
</li><li> <code>@itemprop</code> otherwise = <code>@property</code>
</li></ul>
</li><li> when using RDFa, any property elements within an element with a <code>@href</code> will be taken as being properties of the entity identified by the URL in that <code>@href</code>; as long as the link doesn't have a <code>@rel</code>, this can be avoided by adding an empty <code>@property</code> to the link. If the link does have a <code>@rel</code>, you can either move the property elements outside the link or add a <code>@resource</code> attribute whose value is the same as the <code>@resource</code> on the entity element (this can be a local "blank node" identifier in the form <code>_:<i>localName</i></code>
</li><li> RDFa vocabularies are typically stricter in the range of values that they accept for properties that take dates and times; it is best to use the syntax <code>YYYY-MM-DD</code> for dates, <code>hh:mm:ss</code> for times and <code>YYYY-MM-DDThh:mm:ss</code> for dateTimes to be compliant with the <a href="http://www.w3.org/TR/xmlschema-2/#dateTime" class="external text" title="http://www.w3.org/TR/xmlschema-2/#dateTime" rel="nofollow">XML Schema dates and times</a> which RDFa-based vocabularies will typically use
</li><li> the <code>@datatype</code> property might be required for some RDFa vocabularies/consumers; others will coerce values into the appropriate datatype based on the property itself. However, if a property takes a structured value, the property element must have <code>datatype="rdf:XMLLiteral"</code> for that structure to be preserved
</li></ul>
<a name="Consuming_Pages_with_Multiple_Formats" id="Consuming_Pages_with_Multiple_Formats"></a><h2> <span class="mw-headline"> Consuming Pages with Multiple Formats </span></h2>
<p>In attempting to provide information to multiple consumers, publishers may use several formats within a single page. Consumers should ignore data in vocabularies that they do not recognise and only raise errors for unexpected properties in those vocabularies.
</p><p>Consumers of HTML data may recognise several formats embedded within a given page, and even within the same part of a page. In these cases, consumers should merge from the different formats; in the example above, a consumer should recognise that the data in vEvent, hCalendar and schema.org is about is a single event rather than interpreting it as three events and merge property values so that the event ends up having a single URL rather than several. Different formats may provide information about different aspects of an entity to different levels of fidelity &mdash; in the example above, the schema.org RDFa provided extra details about the location of the event t to the vEvent or hCalendar formats &mdash; and consumers should seek to use whatever gives them the most detailed information.
</p>
<!-- 
NewPP limit report
Preprocessor node count: 24/1000000
Post-expand include size: 0/2097152 bytes
Template argument size: 0/2097152 bytes
Expensive parser function count: 0/100
-->

<!-- Saved in parser cache with key wikidb-esw_:pcache:idhash:6026-0!1!0!!en!2!edit=0 and timestamp 20120115171614 -->
<div id='RDFa' about='http://www.w3.org/wiki/Mixing_HTML_Data_Formats' xmlns:wiki_1='http://www.w3.org/wiki/index.php/'xmlns:wiki_1_property='http://www.w3.org/wiki/index.php/Property:'xmlns:wiki_1_category='http://www.w3.org/wiki/index.php/Category:'>
<div property='wiki_1_property:Modification_date' content='11 November 2011 18:36:23'></div>
</div><div style='display:none' ></div><div class="printfooter">
Retrieved from "<a href="http://www.w3.org/wiki/Mixing_HTML_Data_Formats">http://www.w3.org/wiki/Mixing_HTML_Data_Formats</a>"</div>
						<!-- end content -->
						<div class="visualClear"></div>
		</div>
	</div>
		</div>
		<div id="column-one">
	<div id="p-cactions" class="portlet">
		<h5>Views</h5>
		<div class="pBody">
			<ul>
	
				 <li id="ca-nstab-main" class="selected"><a href="/wiki/Mixing_HTML_Data_Formats" title="View the content page [c]" accesskey="c">Page</a></li>
				 <li id="ca-talk" class="new"><a href="/wiki/index.php?title=Talk:Mixing_HTML_Data_Formats&amp;action=edit&amp;redlink=1" title="Discussion about the content page [t]" accesskey="t">Discussion</a></li>
				 <li id="ca-viewsource"><a href="/wiki/index.php?title=Mixing_HTML_Data_Formats&amp;action=edit" title="This page is protected.&#10;You can view its source [e]" accesskey="e">View source</a></li>
				 <li id="ca-history"><a href="/wiki/index.php?title=Mixing_HTML_Data_Formats&amp;action=history" title="Past revisions of this page [h]" accesskey="h">History</a></li>			</ul>
		</div>
	</div>
	<div class="portlet" id="p-personal">
		<h5>Personal tools</h5>
		<div class="pBody">
			<ul>
				<li id="pt-login"><a href="/wiki/index.php?title=Special:UserLogin&amp;returnto=Mixing_HTML_Data_Formats" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o">Log in</a></li>
			</ul>
		</div>
	</div>
	<div class="portlet" id="p-logo">
		<a style="background-image: url(/Icons/w3c_home);" href="/wiki/Main_Page" title="Visit the main page [z]" accesskey="z"></a>
	</div>
	<script type="text/javascript"> if (window.isMSIE55) fixalpha(); </script>
	<div class='generated-sidebar portlet' id='p-navigation'>
		<h5>Navigation</h5>
		<div class='pBody'>
			<ul>
				<li id="n-mainpage"><a href="/wiki/Main_Page" title="Visit the main page">Main Page</a></li>
				<li id="n-Browse-categories"><a href="/wiki/Special:Categories">Browse categories</a></li>
				<li id="n-recentchanges"><a href="/wiki/Special:RecentChanges" title="The list of recent changes in the wiki [r]" accesskey="r">Recent changes</a></li>
				<li id="n-Help"><a href="http://www.mediawiki.org/wiki/Help:Contents">Help</a></li>
			</ul>
		</div>
	</div>
	<div id="p-search" class="portlet">
		<h5><label for="searchInput">Search</label></h5>
		<div id="searchBody" class="pBody">
			<form action="/wiki/index.php" id="searchform"><div>
				<input type='hidden' name="title" value="Special:Search"/>
				<input id="searchInput" name="search" type="text" title="Search W3C Wiki [f]" accesskey="f" value="" />
				<input type='submit' name="go" class="searchButton" id="searchGoButton"	value="Go" title="Go to a page with this exact name if exists" />&nbsp;
				<input type='submit' name="fulltext" class="searchButton" id="mw-searchButton" value="Search" title="Search the pages for this text" />
			</div></form>
		</div>
	</div>
	<div class="portlet" id="p-tb">
		<h5>Toolbox</h5>
		<div class="pBody">
			<ul>
				<li id="t-whatlinkshere"><a href="/wiki/Special:WhatLinksHere/Mixing_HTML_Data_Formats" title="List of all wiki pages that link here [j]" accesskey="j">What links here</a></li>
				<li id="t-recentchangeslinked"><a href="/wiki/Special:RecentChangesLinked/Mixing_HTML_Data_Formats" title="Recent changes in pages linked from this page [k]" accesskey="k">Related changes</a></li>
<li id="t-specialpages"><a href="/wiki/Special:SpecialPages" title="List of all special pages [q]" accesskey="q">Special pages</a></li>
				<li id="t-print"><a href="/wiki/index.php?title=Mixing_HTML_Data_Formats&amp;printable=yes" rel="alternate" title="Printable version of this page [p]" accesskey="p">Printable version</a></li>				<li id="t-permalink"><a href="/wiki/index.php?title=Mixing_HTML_Data_Formats&amp;oldid=55602" title="Permanent link to this revision of the page">Permanent link</a></li><li id="t-smwbrowselink"><a href="/wiki/Special:Browse/Mixing_HTML_Data_Formats" title="Special:Browse/Mixing HTML Data Formats">Browse properties</a></li>			</ul>
		</div>
	</div>
		</div><!-- end of the left (by default at least) column -->
			<div class="visualClear"></div>
			<div id="footer">
				<div id="f-poweredbyico"><a href="http://www.mediawiki.org/"><img src="/wiki/skins/common/images/poweredby_mediawiki_88x31.png" alt="Powered by MediaWiki" /></a></div>
			<ul id="f-list">
					<li id="lastmod"> This page was last modified on 18 November 2011, at 21:30.</li>
					<li id="viewcount">This page has been accessed 7,946 times.</li>
					<li id="privacy"><a href="/wiki/W3C_Wiki:Privacy_policy" title="W3C Wiki:Privacy policy">Privacy policy</a></li>
					<li id="about"><a href="/wiki/W3C_Wiki:About" title="W3C Wiki:About">About W3C Wiki</a></li>
					<li id="disclaimer"><a href="/wiki/W3C_Wiki:General_disclaimer" title="W3C Wiki:General disclaimer">Disclaimers</a></li>
			</ul>
		</div>
</div>

		<script type="text/javascript">if (window.runOnloadHook) runOnloadHook();</script>
<!-- Served in 0.244 secs. --></body></html>