HTML5 Gallery » doctype

Terjin

Ian Devlin — Wed, 16 May 2012 09:00:17 +0000

Personal website of interaction designer, Terjin.

Copious use of the new HTML5 structural element, although the section element has been overused, with our old friend the div being more appropriate in certain places. The “sidebar” div that contains numerous aside elements probably could have been an aside itself with sections.

URL: http://terj.in/

Pushkin & Plyshkin

Ian Devlin — Mon, 14 May 2012 08:41:58 +0000

A collecting house for entirely useful things.

This site makes clean use of many of the HTML5 structural elements such as nav, header, section, article and footer. The section element with the contentcontainer class should be a div, as it currently has no heading and is being used for styling purposes only. Each gallery item is an article, which works well. The data- attributes are also used to provide custom data throughout the site.

URL: http://pushkin-plyushkin.com/en

Blacktie

Richard Clark — Thu, 10 May 2012 15:00:32 +0000

Blacktie is a digital agency based in Spain. The site uses several new sectioning elements from HTML5. There is an opportunity to improve the document outline by adding some nested section elements within other areas where the section element has been used.

URL: http://www.blacktie.es

Zeneye

Richard Clark — Wed, 09 May 2012 19:49:16 +0000

Zeneye is the personal website of Robert Fyffe, a freelance developer from Scotland. The site uses several new HTML5 structural elements including nav, footer, section and aside. nav is arguably overused and the way sections have been used could be more well thought out.

URL: http://www.zeneye.co.uk

Edgar Leijs

Derek Johnson — Wed, 11 Apr 2012 21:05:38 +0000

Edgar Leijs is a web designer and web editor from Amsterdam.

It’s nice to see Edgar’s portfolio items marked up using the article element rather than div or li, both of which are very common. The article is much more semantic and Edgar shows a good understanding of when it can be used.

Edgar’s use of the header element is unnecessary when it’s only content is a heading, but it’s not wrong by any means. Similarly the nested section in the portfolio items would probably be better as a div, or else given a heading.

URL: http://www.edgarleijs.com/

Doubleleft

Derek Johnson — Thu, 05 Apr 2012 21:51:58 +0000

The website of Brazilian iOS app developers Doubleleft.

Some of the new HTML5 elements get a good showing in this site, and the author has taken care to use the shorter doctype and meta charset declaration. The type attribute has also been removed from all the script elements, although not the stylesheet link element where it is also unnecessary.

URL: http://doubleleft.com/

Michael K. Clements

Ian Devlin — Tue, 03 Apr 2012 09:00:26 +0000

The main navigation uses a nav element and is a good example of how nav doesn’t have to contain a ul or ol list of items. The video element is used although oddly the WebM video wouldn’t play in Firefox 11.

The page charset definition could have made use of the new shorter code that HTML5 brings with it. Remember that the script and link stylesheet elements no longer require the type attribute.

URL: michaelkc.com

Tatiana Bileski

Derek Johnson — Fri, 30 Mar 2012 11:50:45 +0000

The personal site of designer Tatiana Bileski.

HTML5 structural elements are used in the site, although there are too many untitled sections being used where div would be better. However it’s nice to see native video in use, and with the poster attribute.

in use, and with the

URL: http://www.tatianabileski.com/

I Like Taking Photos

Derek Johnson — Thu, 29 Mar 2012 21:30:46 +0000

A selection of photographs by Rhainon Farrow.

This is a very simple site that uses the HTML5 doctype, shortened charset declaration and a couple of new elements. The photos don’t need to be in a section as they are not a sub-section of the document, they are the main content. However, kudos for usingsmall in the footer, and a nice reminder that you don’t need to do much to start using HTML5 today.

URL: http://iliketakingphotos.co.uk/

Gethu Games

Derek Johnson — Tue, 27 Mar 2012 22:13:08 +0000

Two canvas based games – one a spirograph maker with adjustable parameters to allow users to create different shapes and colours. The other is a 9×9 versions of tic-tac-toe that has an audio track playing. Both games will run offline thanks to appcache.

Clever and fun!

URL: http://www.gethugames.in/