From DBWiki

Contents 1 Introduction 1.1 Examples 1.1.1 Minimalist Example 1.1.1.1 HTML 1.1.1.2 Rendered HTML 1.1.2 Basic Example 1.1.2.1 HTML 1.1.2.2 Rendered HTML 1.1.3 Preview/Sample Example 1.1.3.1 HTML 1.1.3.2 Rendered HTML 1.1.4 Sample with Legal Acquisition Example 1.1.4.1 HTML 1.1.4.2 Rendered HTML

Introduction

Here are a couple of simple examples showing hMedia implementations:

Examples

Below are a list of examples of how to use the hMedia Microformat in websites, blogs and anywhere HTML is supported.

Minimalist Example

The minimalist example shows the bare minimum needed to comply with the hMedia Microformat. The song "Got My Mojo Working" by the artist "Muddy Waters" is used as the example.

HTML

<div class="hmedia">
 <span class="title">Got My Mojo Working</span> by 
 <div class="vcard">
  <span class="creator fn">Muddy Waters</span>
 </div>
</div>

Rendered HTML

Got My Mojo Working by Muddy Waters

Basic Example

The basic example expands the minimalist example and adds a media type, publisher and published date.

HTML

<div class="hmedia">
 <span class="title">Got My Mojo Working</span>, 
 a <span class="type">song</span> by 
 <div class="vcard"><span class="creator fn">Muddy Waters</span></div>
 Distributed by <span class="publisher">Concord Records</span> on 
 <span class="published"><abbr title="19970304">March 4, 1997</abbr></span>
</div>

Rendered HTML

Got My Mojo Working, a song by Muddy Waters (Distributed by Concord Records on March 4, 1997)

Preview/Sample Example

The following example specifies a preview image for the song and sample of the media via a link.

HTML

<div class="hmedia">
 <img class="preview-image" src="/images/albums/paris-1972.jpg"/>
 <a rel="sample" href="/samples/albums/paris-1972/got_my_mojo_working.mp3">
  <span class="title">Got My Mojo Working</span></a>
 by
 <div class="vcard">
  <span class="creator fn">Muddy Waters</span>
 </div>
</div>

Rendered HTML

[ALBUM IMAGE] Got My Mojo Working by Muddy Waters.

Sample with Legal Acquisition Example

The following is a simple example on how to use this Microformat with a means to legally acquire the media being described, such as through an online music, movie or television store.

HTML

<div class="hmedia">
 <a rel="sample" href="/samples/albums/paris-1972/got_my_mojo_working.mp3">
  <span class="title">Got My Mojo Working</span></a>
 by
 <div class="vcard">
  <span class="creator fn">Muddy Waters</span>
 </div>.
 [<a alt="Buy From My Music Web Store" rel="acquire" 
   href="http://music.webstore.com/buy/song/got_my_mojo_working">Buy Full Version</a>]
</div>

Rendered HTML

Got My Mojo Working by Muddy Waters. [ Buy Full Version ]