<?xml version="1.0" encoding="UTF-8"?> <rss
version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
> <channel><title>HTML5 Gallery &#187; microformats</title> <atom:link href="http://html5gallery.com/tag/microformats/feed/" rel="self" type="application/rss+xml" /><link>http://html5gallery.com</link> <description>A showcase of sites using HTML5 markup</description> <lastBuildDate>Tue, 07 Feb 2012 22:19:00 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.3</generator> <item><title>Ernesto Graterol</title><link>http://html5gallery.com/2012/01/ernesto-graterol/</link> <comments>http://html5gallery.com/2012/01/ernesto-graterol/#comments</comments> <pubDate>Tue, 31 Jan 2012 22:23:41 +0000</pubDate> <dc:creator>Gerard Druiven</dc:creator> <category><![CDATA[Agency]]></category> <category><![CDATA[charset]]></category> <category><![CDATA[doctype]]></category> <category><![CDATA[elements]]></category> <category><![CDATA[microformats]]></category> <guid
isPermaLink="false">http://html5gallery.com/?p=7709</guid> <description><![CDATA[Ernesto Graterol is a WordPress theme and plugin development studio. The site is a single page, using JavaScript to switch the tabbed content, so each part would be a good candidate for the section element. It depends on your interpretation of the nav specification, but I would say as it&#8217;s their content the social links [...]]]></description> <content:encoded><![CDATA[<p>Ernesto Graterol is a WordPress theme and plugin development studio.</p><p>The site is a single page, using JavaScript to switch the tabbed content, so each part would be a good candidate for the <code>section</code> element. It depends on your interpretation of the <a
href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element">nav specification</a>, but I would say as it&#8217;s their content the social links could go into a <a
href="http://html5doctor.com/nav-element/">nav</a>.</p><p> <img
src="http://html5gallery.com/wp-content/uploads/2011/12/ernestograterol-thumb.jpg" alt="Website Screenshot" /></p><p>URL: <a
href="http://www.ernestograterol.com/">http://www.ernestograterol.com/</a></p>]]></content:encoded> <wfw:commentRss>http://html5gallery.com/2012/01/ernesto-graterol/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>MBA Multimedia</title><link>http://html5gallery.com/2012/01/mba-multimedia/</link> <comments>http://html5gallery.com/2012/01/mba-multimedia/#comments</comments> <pubDate>Thu, 12 Jan 2012 22:02:56 +0000</pubDate> <dc:creator>Gerard Druiven</dc:creator> <category><![CDATA[Agency]]></category> <category><![CDATA[charset]]></category> <category><![CDATA[doctype]]></category> <category><![CDATA[elements]]></category> <category><![CDATA[forms]]></category> <category><![CDATA[microformats]]></category> <category><![CDATA[wai-aria]]></category> <guid
isPermaLink="false">http://html5gallery.com/?p=7718</guid> <description><![CDATA[MBA Multimedia is a web agency based just outside Rennes in France. The site is really well constructed and makes good use of headings to create a nice outline. Other boxes are ticked too including hcard microformat and good use of new form input types and attributes. There is a little WAI-ARIA which could be [...]]]></description> <content:encoded><![CDATA[<p>MBA Multimedia is a web agency based just outside Rennes in France.</p><p>The site is really well constructed and makes good use of headings to create a nice outline. Other boxes are ticked too including hcard microformat and good use of new form input types and attributes. There is a little <abbr>WAI-ARIA</abbr> which could be rolled out to cover <code>banner</code>, <code>navigation</code>, <code>form</code>, <code>complementary</code> and <code>contentinfo</code> roles.</p><p> <img
src="http://html5gallery.com/wp-content/uploads/2011/12/mbamultimedia-thumb.jpg" alt="Website Screenshot" /></p><p>URL: <a
href="http://www.mba-multimedia.com">http://www.mba-multimedia.com</a></p>]]></content:encoded> <wfw:commentRss>http://html5gallery.com/2012/01/mba-multimedia/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Hotel Cristallo</title><link>http://html5gallery.com/2011/07/hotel-cristallo/</link> <comments>http://html5gallery.com/2011/07/hotel-cristallo/#comments</comments> <pubDate>Thu, 07 Jul 2011 18:55:57 +0000</pubDate> <dc:creator>Derek Johnson</dc:creator> <category><![CDATA[Brochure]]></category> <category><![CDATA[charset]]></category> <category><![CDATA[doctype]]></category> <category><![CDATA[elements]]></category> <category><![CDATA[forms]]></category> <category><![CDATA[microformats]]></category> <guid
isPermaLink="false">http://html5gallery.com/?p=7059</guid> <description><![CDATA[A brochure site for a hotel on the shores of Lake Garda. This site is really well marked up, and the author clearly has a good understanding of when and how to use sectioning content. The placeholder attribute is used in the contact form, but new input types e.g. type="email" and type="tel" are not. Using [...]]]></description> <content:encoded><![CDATA[<p>A brochure site for a hotel on the shores of Lake Garda.</p><p>This site is really well marked up, and the author clearly has a good understanding of when and how to use sectioning content. The <code>placeholder</code> attribute is used in the contact form, but new <code>input</code> types e.g. <code>type="email"</code> and <code>type="tel"</code> are not. Using these along with the <code>required</code> attribute could improve the form.</p><p> <img
src="http://html5gallery.com/wp-content/uploads/2011/07/hotel-thumb.jpg" alt="Website Screenshot" /></p><p>URL: <a
href="http://www.hotelcristallopeschiera.it/it/">http://www.hotelcristallopeschiera.it/it/</a></p>]]></content:encoded> <wfw:commentRss>http://html5gallery.com/2011/07/hotel-cristallo/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Eden Golf</title><link>http://html5gallery.com/2011/06/eden-golf/</link> <comments>http://html5gallery.com/2011/06/eden-golf/#comments</comments> <pubDate>Sat, 18 Jun 2011 14:00:21 +0000</pubDate> <dc:creator>Derek Johnson</dc:creator> <category><![CDATA[Brochure]]></category> <category><![CDATA[doctype]]></category> <category><![CDATA[elements]]></category> <category><![CDATA[microformats]]></category> <guid
isPermaLink="false">http://html5gallery.com/?p=6839</guid> <description><![CDATA[A brochure site for a company that supplies golf simulators. Decent use of new structural elements, although the fact that footer isn&#8217;t sectioning content has resulted in the un-nested facebook heading in the footer inadvertently becoming the document title as it is the highest level heading in the body. URL: http://www.simulateur-golf.com/]]></description> <content:encoded><![CDATA[<p>A brochure site for a company that supplies golf simulators.</p><p>Decent use of new structural elements, although the fact that <code>footer</code> isn&#8217;t sectioning content has resulted in the un-nested facebook heading in the <code>footer</code> inadvertently becoming the document title as it is the highest level heading in the body.</p><p> <img
src="http://html5gallery.com/wp-content/uploads/2011/06/golf-thumb.jpg" alt="Website Screenshot" /></p><p>URL: <a
href="http://www.simulateur-golf.com/">http://www.simulateur-golf.com/</a></p>]]></content:encoded> <wfw:commentRss>http://html5gallery.com/2011/06/eden-golf/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>Jacob B&#246;hme</title><link>http://html5gallery.com/2011/06/jacob-bhme/</link> <comments>http://html5gallery.com/2011/06/jacob-bhme/#comments</comments> <pubDate>Fri, 17 Jun 2011 23:20:13 +0000</pubDate> <dc:creator>Derek Johnson</dc:creator> <category><![CDATA[Brochure]]></category> <category><![CDATA[doctype]]></category> <category><![CDATA[elements]]></category> <category><![CDATA[microformats]]></category> <category><![CDATA[svg]]></category> <guid
isPermaLink="false">http://html5gallery.com/?p=6824</guid> <description><![CDATA[A brochure website for a German foot care specialist. One notable feature of this site is the use of SVG for the map in the sidebar, and it&#8217;s good to see microformats used on the contact details. The site could benefit from the use of some explicit sectioning content and new form input types. URL: [...]]]></description> <content:encoded><![CDATA[<p>A brochure website for a German foot care specialist.</p><p>One notable feature of this site is the use of <abbr>SVG</abbr> for the map in the sidebar, and it&#8217;s good to see microformats used on the contact details. The site could benefit from the use of some explicit sectioning content and new form input types.</p><p> <img
src="http://html5gallery.com/wp-content/uploads/2011/06/jacob-thumb.jpg" alt="Website Screenshot" /></p><p>URL: <a
href="http://jacob-boehme.de/">http://jacob-boehme.de/</a></p>]]></content:encoded> <wfw:commentRss>http://html5gallery.com/2011/06/jacob-bhme/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Furnace</title><link>http://html5gallery.com/2011/03/furnace/</link> <comments>http://html5gallery.com/2011/03/furnace/#comments</comments> <pubDate>Tue, 15 Mar 2011 18:00:09 +0000</pubDate> <dc:creator>Derek Johnson</dc:creator> <category><![CDATA[Agency]]></category> <category><![CDATA[Brochure]]></category> <category><![CDATA[Portfolio]]></category> <category><![CDATA[block links]]></category> <category><![CDATA[charset]]></category> <category><![CDATA[doctype]]></category> <category><![CDATA[elements]]></category> <category><![CDATA[microformats]]></category> <guid
isPermaLink="false">http://html5gallery.com/?p=6522</guid> <description><![CDATA[The website of London interactive production company Furnace. The site uses new HTML5 structural elements, and the document outline is well constructed. It&#8217;s also nice to see block-level links in use in the nav just above the footer. URL: http://www.furnacedigital.com/]]></description> <content:encoded><![CDATA[<p>The website of London interactive production company Furnace.</p><p>The site uses new <abbr>HTML</abbr>5 structural elements, and the document outline is well constructed. It&#8217;s also nice to see block-level links in use in the <code>nav</code> just above the <code>footer</code>.</p><p> <img
src="http://html5gallery.com/wp-content/uploads/2011/03/furnace-thumb.jpg" alt="Website Screenshot" /></p><p>URL: <a
href="http://www.furnacedigital.com/">http://www.furnacedigital.com/</a></p>]]></content:encoded> <wfw:commentRss>http://html5gallery.com/2011/03/furnace/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Frederick Indoor Sports Center</title><link>http://html5gallery.com/2011/03/frederick-indoor-sports-center/</link> <comments>http://html5gallery.com/2011/03/frederick-indoor-sports-center/#comments</comments> <pubDate>Sat, 05 Mar 2011 14:00:41 +0000</pubDate> <dc:creator>Derek Johnson</dc:creator> <category><![CDATA[Brochure]]></category> <category><![CDATA[block links]]></category> <category><![CDATA[charset]]></category> <category><![CDATA[doctype]]></category> <category><![CDATA[elements]]></category> <category><![CDATA[forms]]></category> <category><![CDATA[microformats]]></category> <category><![CDATA[wai-aria]]></category> <guid
isPermaLink="false">http://html5gallery.com/?p=6422</guid> <description><![CDATA[A website advertising Frederick Indoor Sports Center in Maryland, USA. A lot of care and attention has gone into the markup of this website. Shortened doctype, script elements and stylesheet link elements, WAI-ARIA landmark roles, input type="email", input type="tel" and microformats are used throughout the site. Not only that but the document outline is spot [...]]]></description> <content:encoded><![CDATA[<p>A website advertising Frederick Indoor Sports Center in Maryland, USA.</p><p>A lot of care and attention has gone into the markup of this website. Shortened <code>doctype</code>, <code>script</code> elements and stylesheet <code>link</code> elements, <abbr>WAI-ARIA</abbr> landmark roles, <code>input type="email"</code>, <code>input type="tel"</code> and microformats are used throughout the site. Not only that but the document outline is spot on, with <code>section</code> and <code>article</code> used appropriately.</p><p>There is room for some small improvements though. The content of the <code>figure</code> in the page <code>footer</code> couldn&#8217;t really be said to be necessary for the understanding of the surrounding content, so <code>aside</code> would be a better choice. There are also headings that are hidden using <abbr>CSS</abbr> <code>clip</code>. If there&#8217;s no need for the heading it can be left out.</p><p> <img
src="http://html5gallery.com/wp-content/uploads/2011/03/fisc-thumb.jpg" alt="Website Screenshot" /></p><p>URL: <a
href="http://www.frederickindoor.com/">http://www.frederickindoor.com/</a></p>]]></content:encoded> <wfw:commentRss>http://html5gallery.com/2011/03/frederick-indoor-sports-center/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>BlissBody Yoga</title><link>http://html5gallery.com/2011/03/blissbody-yoga/</link> <comments>http://html5gallery.com/2011/03/blissbody-yoga/#comments</comments> <pubDate>Fri, 04 Mar 2011 18:00:32 +0000</pubDate> <dc:creator>Derek Johnson</dc:creator> <category><![CDATA[Brochure]]></category> <category><![CDATA[charset]]></category> <category><![CDATA[doctype]]></category> <category><![CDATA[elements]]></category> <category><![CDATA[microformats]]></category> <guid
isPermaLink="false">http://html5gallery.com/?p=6415</guid> <description><![CDATA[A brochure site for a yoga teacher in Alexandria. The site uses the HTML5 boilerplate as a starting point, and some new elements to markup the content. The document outline is good and the developer seems to understand the proper use of the section element. A couple of things could be done to improve the [...]]]></description> <content:encoded><![CDATA[<p>A brochure site for a yoga teacher in Alexandria.</p><p>The site uses the <a
href="http://html5boilerplate.com/"><abbr>HTML</abbr>5 boilerplate</a> as a starting point, and some new elements to markup the content. The document outline is good and the developer seems to understand the proper use of the <code>section</code> element. A couple of things could be done to improve the site: <code>small</code> could be used for the copyright notice in the footer, and although contact details are marked up using the hcard microformat, the correct class to use is <code>vcard</code>.</p><p> <img
src="http://html5gallery.com/wp-content/uploads/2011/03/blissbody-thumb.jpg" alt="Website Screenshot" /></p><p>URL: <a
href="http://www.blissbody-yoga.com/">http://www.blissbody-yoga.com/</a></p>]]></content:encoded> <wfw:commentRss>http://html5gallery.com/2011/03/blissbody-yoga/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Festival Mundo</title><link>http://html5gallery.com/2011/03/festival-mundo/</link> <comments>http://html5gallery.com/2011/03/festival-mundo/#comments</comments> <pubDate>Thu, 03 Mar 2011 22:00:21 +0000</pubDate> <dc:creator>Derek Johnson</dc:creator> <category><![CDATA[Brochure]]></category> <category><![CDATA[Events]]></category> <category><![CDATA[charset]]></category> <category><![CDATA[doctype]]></category> <category><![CDATA[elements]]></category> <category><![CDATA[microformats]]></category> <guid
isPermaLink="false">http://html5gallery.com/?p=6399</guid> <description><![CDATA[The website of a Brazilian music and cultural festival. The site is marked up using plenty of new HTML5 elements, and the blog section on the home page is a nice example of a section with nested articles. The agenda section uses the same structure but the articles are untitled. It would be better to [...]]]></description> <content:encoded><![CDATA[<p>The website of a Brazilian music and cultural festival.</p><p>The site is marked up using plenty of new <abbr>HTML</abbr>5 elements, and the blog <code>section</code> on the home page is a nice example of a <code>section</code> with nested <code>article</code>s. The agenda <code>section</code> uses the same structure but the <code>article</code>s are untitled. It would be better to use the tabs as <code>article</code> headings and position them with <abbr>CSS</abbr>.</p><p> <img
src="http://html5gallery.com/wp-content/uploads/2011/03/mundo-thumb.jpg" alt="Website Screenshot" /></p><p>URL: <a
href="http://www.festivalmundo.com.br/">http://www.festivalmundo.com.br/</a></p>]]></content:encoded> <wfw:commentRss>http://html5gallery.com/2011/03/festival-mundo/feed/</wfw:commentRss> <slash:comments>2</slash:comments> </item> <item><title>Arno Hoogma</title><link>http://html5gallery.com/2011/01/arno-hoogma/</link> <comments>http://html5gallery.com/2011/01/arno-hoogma/#comments</comments> <pubDate>Fri, 14 Jan 2011 14:00:15 +0000</pubDate> <dc:creator>Derek Johnson</dc:creator> <category><![CDATA[Personal]]></category> <category><![CDATA[Portfolio]]></category> <category><![CDATA[charset]]></category> <category><![CDATA[custom data]]></category> <category><![CDATA[doctype]]></category> <category><![CDATA[elements]]></category> <category><![CDATA[microformats]]></category> <category><![CDATA[wai-aria]]></category> <guid
isPermaLink="false">http://html5gallery.com/?p=5992</guid> <description><![CDATA[The portfolio site of Dutch front-end and back-end web developer. The site is a straightforward one with new HTML5 elements used to mark it up, as well as some custom data attributes in the portfolio slider. There is a section used to wrap a large block of content where div would have been more appropriate, [...]]]></description> <content:encoded><![CDATA[<p>The portfolio site of Dutch front-end and back-end web developer.</p><p>The site is a straightforward one with new <abbr>HTML</abbr>5 elements used to mark it up, as well as some custom <code>data</code> attributes in the portfolio slider. There is a <code>section</code> used to wrap a large block of content where <code>div</code> would have been more appropriate, and the <code>type</code> attribute can be dropped from the stylesheet <code>link</code> elements.</p><p> <img
src="http://html5gallery.com/wp-content/uploads/2011/01/arno-thumb.jpg" alt="Website Screenshot" /></p><p>URL: <a
href="http://arno.hoog.ma/">http://arno.hoog.ma/</a></p>]]></content:encoded> <wfw:commentRss>http://html5gallery.com/2011/01/arno-hoogma/feed/</wfw:commentRss> <slash:comments>2</slash:comments> </item> </channel> </rss>
