HTML5 Gallery » Brochure

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

Wild Rhody

Derek Johnson — Fri, 23 Mar 2012 13:22:49 +0000

A website for a company started by two fishermen that supplies local seafood in Rhode Island.

The site has a nice outline and makes good use of some of the new HTML5 elements. I would probably change the “Did you know” section on the home page to an aside as it is tangentially related to the main content, and I would use input type="tel" in the contact form.

URL: http://www.wildrhodyseafood.com/

Marquee Media

Gerard Druiven — Tue, 07 Feb 2012 22:19:00 +0000

The website of New York advertising broker Marquee Media.

The site uses some of the new HTML5 structural elements including nav, footer and section. The section elements on the home page make sense but it’s rare for a section not to need a heading, so the links that are visual headings could go into headings.

URL: http://marqueemedia.com

Redline Engineering

Gerard Druiven — Sun, 15 Jan 2012 14:45:22 +0000

Redline Engineering are specialists in the servicing, restoration and sales of the classic AC car marque.

The site is built using some of the new HTML5 elements such as article, nav, figure, header and footer. There is no real need to use an article for the main content, because that creates a new section in the document outline. You can think of sections as mini-documents, so it makes more sense for this to be the main page content. Using input type="email" would also improve the forms on the site.

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

Tumaini Group

Gerard Druiven — Sat, 27 Aug 2011 14:00:22 +0000

The Tumanini Group entertainers brochure site. Besides some missing sectioning element headings the markup looks well thought out with a good grasp of how the new HTML5 elements fit together.

URL: http://tumainigroup.com

Self Titled

Gerard Druiven — Fri, 26 Aug 2011 14:00:10 +0000

Self-Titled is an art collective comprised of four good friends who met during art classes at Etobicoke School of the Arts. There are a number of section‘s that aren’t required. Each piece of work is split into it’s own article which is good. The content within the page footer could arguably be an aside.

URL: http://self-titled.ca/

Museums Sheffield

Richard Clark — Tue, 23 Aug 2011 14:17:44 +0000

Museums Sheffield is the charitable Trust responsible for four of the city’s museums and galleries: Millennium Gallery, Weston Park Museum, Graves Gallery and Bishops’ House. The markup is generally could although there are some areas where other new elements like time could have been used and some areas would benefit from improved sectioning.

URL: http://www.museums-sheffield.org.uk/

Proficient Plumbing

Gerard Druiven — Thu, 18 Aug 2011 08:00:41 +0000

Website of a Yorkshire based plumbing business.

Fairly clean HTML5 code using the header element to contain a hgroup (with a h1, h3 and h4 - not sure what happened to h2) and nav. The main page content is contained within an article which has a h1 heading. The information sidebar on the right is contained within an aside.

Remember that the type attribute is no longer required on the script element.

URL: http://www.proficient-plumbing.co.uk/

Print Discount

Gerard Druiven — Fri, 12 Aug 2011 14:30:54 +0000

While this site is validly able to lay claim to using HTML5 tags, the reality behind it’s implementation is quite different. Asides are used as functional blocks, it seems a find and replace has been done on the code to replace divs with sections! Layout of code is appalling with no hierarchy and little consideration for semantic markup or for that matter, any element of code design. Safe to say that whoever wrote this code, needs to go back and read a few books.

The

’s in root, just have an image, which is an aside, yes but there is no aside information attached.
small-> container ,section> should be a div
Within ,

should be

( I dare say), but the ,