Microformats
Microformats (μF) are a set of defined HTML classes created to serve as consistent and descriptive metadata about an element, designating it as representing a certain type of data (such as contact information, geographic coordinates, events, blog posts, products, recipes, etc.).
Test the HTML code with pin13.net: Microformats Parser
geo & h-geo
<span class="geo h-geo">Canterbury: <span class="latitude p-latitude">51.2718932</span>; <span class="longitude p-longitude">1.0672116</span></span>, <span class="p-altitude">5</span>
Canterbury: 51.2718932, 1.0672116, 5
{ "items": [ { "type": [ "h-geo" ], "properties": { "latitude": [ "51.2718932" ], "longitude": [ "1.0672116" ] } } ] }
adr & h-adr
<address class="adr h-adr">
<p class="label p-label">Head Office</p>
<p class="street-address p-street-address">11 Seymour Place</p>
<p class="extended-address p-extended-address">Office 1</p>
<p class="locality p-locality">Canterbury</p>
<p class="region">Kent</p>
<p class="postal-code p-postal-code">CT1 3SF</p>
<p class="country-name p-country-name">United Kingdom</p>
<p class="geo h-geo">Canterbury: <span class="latitude p-latitude">51.2718932</span>; <span class="longitude p-longitude">1.0672116</span>, <span class="p-altitude">5</span></p>
<p class="post-office-box p-post-office-box">P.O. Box 2026943</p>
</address>
Head Office 11 Seymour Place Office 1 Canterbury Kent CT1 3SF United Kingdom 51.2718932, 1.0672116, 5 P.O. Box 2026943
{ "items": [ { "type": [ "h-adr" ], "properties": { "label": [ "Head Office" ], "street-address": [ "11 Seymour Place" ], "extended-address": [ "Office 1" ], "locality": [ "Canterbury" ], "postal-code": [ "CT1 3SF" ], "country-name": [ "United Kingdom" ], "post-office-box": [ "P.O. Box 2026943" ] }, "children": [ { "type": [ "h-geo" ], "properties": { "latitude": [ "51.2718932" ], "longitude": [ "1.0672116" ], "altitude": [ "5" ] } } ] } ] }
hCard & h-card
<div class="vcard h-card">
<p class="fn p-name">Sally Ride</p>
<span class="n">
<p class="honorific-prefix p-honorific-prefix">Dr.</p>
<p class="given-name p-given-name">Sally</p>
<abbr class="additional-name p-additional-name">K.</abbr>
<p class="family-name p-family-name">Ride</p>
<p class="honorific-suffix p-honorific-suffix">Ph.D.</p>
</span>
<p class="nickname p-nickname">sallykride</p>
<p class="org p-org">Sally Ride Science</p>
<p class="title p-job-title">C.T.O.</p>
<p class="role p-role">Manages Technology Estate</p>
<img class="photo u-photo" src="http://example.com/sk.jpg"/>
<p><a class="url u-url" href="http://sally.example.com">http://sally.example.com</a></p>
<p><a class="email u-email" href="mailto:sally@example.com">sally@example.com</a></p>
<p><a class="tel p-tel" href="tel:1818551212">+1.818.555.1212</a></p>
<address class="adr h-adr">
<p class="label p-label">Head Office</p>
<p class="street-address p-street-address">11 Seymour Place</p>
<p class="extended-address p-extended-address">Office 1</p>
<p class="locality p-locality">Canterbury</p>
<p class="region">Kent</p>
<p class="postal-code p-postal-code">CT1 3SF</p>
<p class="country-name p-country-name">United Kingdom</p>
<p class="geo h-geo">Canterbury: <span class="latitude p-latitude">51.2718932</span>; <span class="longitude p-longitude">1.0672116</span>, <span class="p-altitude">5</span></p>
<p class="post-office-box p-post-office-box">P.O. Box 2026943</p>
</address>
<time class="bday dt-bday" datetime="1951-05-26">26th of May, 1951</time> birthday
<p class="category p-category">physicist</p>
<p class="note p-note">First American woman in space.</p>
<p class="u-impp"></p>
<p class="p-sex"></p>
<p class="p-gender-identity"></p>
<p class="dt-anniversary"></p>
</div>
Sally Ride Dr. Sally K. Ride Ph.D. sallykride Sally Ride Science C.T.O. Manages Technology Estate http://sally.example.com sally@example.com +1.818.555.1212 Head Office 11 Seymour Place Office 1 Canterbury Kent CT1 3SF United Kingdom Canterbury: 51.2718932; 1.0672116, 5 P.O. Box 2026943 26th of May, 1951 birthday physicist First American woman in space.
{ "items": [ { "type": [ "h-card" ], "properties": { "name": [ "Sally Ride" ], "honorific-prefix": [ "Dr." ], "given-name": [ "Sally" ], "additional-name": [ "K." ], "family-name": [ "Ride" ], "honorific-suffix": [ "Ph.D." ], "nickname": [ "sallykride" ], "org": [ "Sally Ride Science" ], "job-title": [ "C.T.O." ], "role": [ "Manages Technology Estate" ], "tel": [ "+1.818.555.1212" ], "category": [ "physicist" ], "note": [ "First American woman in space." ], "sex": [ "" ], "gender-identity": [ "" ], "photo": [ "http://example.com/sk.jpg" ], "url": [ "http://sally.example.com" ], "email": [ "mailto:sally@example.com" ], "impp": [ "" ], "bday": [ "1951-05-26" ] }, "children": [ { "type": [ "h-adr" ], "properties": { "label": [ "Head Office" ], "street-address": [ "11 Seymour Place" ], "extended-address": [ "Office 1" ], "locality": [ "Canterbury" ], "postal-code": [ "CT1 3SF" ], "country-name": [ "United Kingdom" ], "post-office-box": [ "P.O. Box 2026943" ] }, "children": [ { "type": [ "h-geo" ], "properties": { "latitude": [ "51.2718932" ], "longitude": [ "1.0672116" ], "altitude": [ "5" ] } } ] } ] } ] }
IETF: RFC 2426 - vCard MIME Directory Profile
IETF: RFC 3966 - The tel URI for Telephone Numbers
IETF: RFC 6068 - The 'mailto' URI Scheme
IETF: RFC 4770 - vCard Extensions for Instant Messaging (IM)
hCalendar & h-event
<div class="vevent h-event">
<p class="summary p-summary p-name">10k guided Walk-Through History</p>
<p><time class="dtstart dt-start" datetime="2022-10-17T09:30">17th of October, 2022 at 09:30</time></p>
<p><time class="dtend dt-end" datetime="2022-10-17T14:30">17th of October, 2022 at 14:30</time></p>
<p><time class="duration dt-duration" datetime="PT5H">5 Hours</time></p>
<p class="rdate"></p>
<p class="rrule"></p>
<span class="location p-location">
<!-- hCard & h-card / adr & h-adr / geo & h-geo -->
</span>
<p class="category p-category">Walks</p>
<p class="description p-description e-content"><a href="https://canterburyfestival.co.uk/whats-on/10k-guided-walk-through-history-90-off-road/">10k guided Walk-Through History (90% off-road) - Canterbury Festival</a></p>
<p class="attendee p-attendee"></p>
<p class="contact"></p>
<p class="organizer p-organizer"><a href="mailto:bercolclc@gmail.com">Colin Robbins</a></p>
<p class="attach"></p>
<p class="status"></p>
<p class="u-rsvp"></p>
<p><a class="url u-url" href=""></a></p>
</div>
10k guided Walk-Through History 17th of October, 2022 at 09:30 17th of October, 2022 at 14:30 5 Hours Walks 10k guided Walk-Through History (90% off-road) - Canterbury Festival Colin Robbins
{ "items": [ { "type": [ "h-event" ], "properties": { "summary": [ "10k guided Walk-Through History" ], "name": [ "10k guided Walk-Through History" ], "location": [ "" ], "category": [ "Walks" ], "description": [ "10k guided Walk-Through History (90% off-road) - Canterbury Festival" ], "attendee": [ "" ], "organizer": [ "Colin Robbins" ], "rsvp": [ "" ], "url": [ "" ], "start": [ "2022-10-17T09:30" ], "end": [ "2022-10-17T14:30" ], "duration": [ "PT5H" ], "content": [ { "html": "10k guided Walk-Through History (90% off-road) - Canterbury Festival", "value": "10k guided Walk-Through History (90% off-road) - Canterbury Festival" } ] } } ] }
Microformats.org: hCalendar 1.0
IETF: RFC 2445 - nternet Calendaring and Scheduling Core Object Specification (iCalendar)
hResume & h-resume
<div class="hresume h-resume">
<p class="p-name"></p>
<p class="summary p-summary">I have 10 years experience with all Web 2.0 technologies– I've been working with Ajax since 1996, designing with pastels while others will still using tiled background images and frames...</p>
<span class="contact p-contact">
<!-- hCard & h-card -->
</span>
<ol class="vcalendar">
<li class="education p-education">
<!-- vEvent & h-event -->
</li>
</ol>
<ol class="vcalendar">
<li class="experience p-experience">
<!-- vEvent & h-event -->
</li>
</ol>
<span class="affiliation p-affiliation">
<!-- hCard & h-card -->
</span>
<p>I have skills in <a class="skill p-skill" rel="tag" href="http://en.wikipedia.org/wiki/Bow_%28weapon%29">bow hunting</a> and <a class="skill p-skill" rel="tag" href="http://en.wikipedia.org/wiki/Nunchucks">nunchucks</a>.</p>
<p><span class="affiliation p-affiliation vcard h-card"><span class="fn org">National Honor Society</span></span></p>
<p><cite>Breeding Ligers for Fun and Magic</cite>, Idaho Press, 2004.</p>
</div>
I have 10 years experience with all Web 2.0 technologies– I've been working with Ajax since 1996, designing with pastels while others will still using tiled background images and frames... I have skills in bow hunting and nunchucks. National Honor Society Breeding Ligers for Fun and Magic, Idaho Press, 2004.
{ "items": [ { "type": [ "h-resume" ], "properties": { "name": [ "" ], "summary": [ "I have 10 years experience with all Web 2.0 technologies\u2013 I've been working with Ajax since 1996, designing with pastels while others will still using tiled background images and frames..." ], "contact": [ "" ], "education": [ "" ], "experience": [ "" ], "affiliation": [ "", { "type": [ "h-card" ], "properties": { "name": [ "National Honor Society" ] }, "value": "National Honor Society" } ], "skill": [ "bow hunting", "nunchucks" ] } } ] }
hReview & h-review
<div class="hreview h-review">
<h1 class="summary p-name">Microformats: is structured data worth it?</h1>
<blockquote>
<a class="item p-item h-item" href="http://microformats.org">Microformats</a> are the simplest way to publish structured data on the web.
</blockquote>
<p><data class="rating p-rating" value="5">★★★★★</data></p>
<p>Published <time class="dtreviewed dt-published" datetime="2013-06-12T12:00:00">12<sup>th</sup> June 2013</time></p>
<p>By <a class="reviewer p-author hcard h-card" href="http://example.com">Joe Bloggs</a></p>
<span class="description e-content">
<p>Yes, microformats are undoubtedly great. They are the simplest way to markup structured data in HTML and reap the benefits thereof, including using your web page as your API by automatic conversion to JSON. The alternatives of microdata/schema and RDFa are much more work, require more markup, and are more complicated (harder to get right, more likely to break).</p>
</span>
<p class="p-category">Structured Data</p>
<p><a class="url u-url"></a></p>
</div>
Microformats: is structured data worth it? Microformats are the simplest way to publish structured data on the web. ★★★★★ Published 12th June 2013 By Joe Bloggs Yes, microformats are undoubtedly great. They are the simplest way to markup structured data in HTML and reap the benefits thereof, including using your web page as your API by automatic conversion to JSON. The alternatives of microdata/schema and RDFa are much more work, require more markup, and are more complicated (harder to get right, more likely to break). Structured Data
{ "items": [ { "type": [ "h-review" ], "properties": { "name": [ "Microformats: is structured data worth it?" ], "rating": [ "5" ], "category": [ "Structured Data" ], "url": [ "" ], "published": [ "2013-06-12T12:00:00" ], "content": [ { "html": "<p>Yes, microformats are undoubtedly great. They are the simplest way to markup structured data in HTML and reap the benefits thereof, including using your web page as your API by automatic conversion to JSON. The alternatives of microdata/schema and RDFa are much more work, require more markup, and are more complicated (harder to get right, more likely to break).</p>", "value": "Yes, microformats are undoubtedly great. They are the simplest way to markup structured data in HTML and reap the benefits thereof, including using your web page as your API by automatic conversion to JSON. The alternatives of microdata/schema and RDFa are much more work, require more markup, and are more complicated (harder to get right, more likely to break)." } ], "item": [ { "type": [ "h-item" ], "properties": { "name": [ "Microformats" ], "url": [ "http://microformats.org" ] }, "value": "Microformats" } ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Joe Bloggs" ], "url": [ "http://example.com" ] }, "value": "Joe Bloggs" } ] } } ] }
hAtom, h-feed & h-entry
<main class="hfeed h-feed">
<header class="site-title p-name">The Markup Blog</header>
<p class="site-description p-summary">Stories of elements of their attributes.</p>
<p class="p-author"></p>
<p><a href="" class="u-url"></a></p>
<p><img src="" class="u-photo" /></p>
<article class="hentry h-entry">
<header class="entry-title p-name">Microformats are amazing</header>
<p>Published by <span class="author p-author vcard h-card"><span class="fn p-name">W. Developer</span></span> on <time class="published dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time></p>
<p class="entry-summary p-summary">In which I extoll the virtues of using microformats.</p>
<section class="entry-content e-content">
<p>Blah blah blah</p>
</section>
</article>
</main>
The Markup Blog Stories of elements of their attributes. Microformats are amazing Published by W. Developer on 13th June 2013 In which I extoll the virtues of using microformats. Blah blah blah
{ "items": [ { "type": [ "h-feed" ], "properties": { "name": [ "The Markup Blog" ], "summary": [ "Stories of elements of their attributes." ], "author": [ "" ], "url": [ "" ], "photo": [ "" ] }, "children": [ { "type": [ "h-entry" ], "properties": { "name": [ "Microformats are amazing" ], "summary": [ "In which I extoll the virtues of using microformats." ], "published": [ "2013-06-13 12:00:00" ], "content": [ { "html": "<p>Blah blah blah</p>", "value": "Blah blah blah" } ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "W. Developer" ] }, "value": "W. Developer" } ] } } ] } ] }