1. Tech

Your suggestion is on its way!

An email with a link to:

http://webdesign.about.com/u/sty/HTML-5-Examples/html5-design-examples-from-users/IVIS-INFO.htm

was emailed to:

Thanks for sharing About.com with others!

IVIS INFO

Submit an Entry: HTML5 Designs

By esther_s

IVIS INFO

IVIS INFO homepage

Site Name

IVIS INFO, data storage and protection solutions and services

Site URL

http://www.ivisinfo.gr/

What features of HTML5 are Used

header, nav, section, article, footer, form elements (e.g. type="email")

The Purpose of the Site

I wanted the site to be ready to incorporate all the cool elements HTML5 will have to offer as soon as browsers support them. IVIS INFO is a technology and future oriented company and I wanted this to reflect on the company website.

Advice

  • I would use fewer classes and ids. At the moment I used them as a fallback for older browsers but I realize it probably hurts tag semantics.

Jennifer Kyrnin, About.com Web Design/HTML, says:

The classes and ids don't really affect semantics. In fact, microdata and microformats, and RDFa in particular, use the classes specifically to make the contents more semantic.

I like the use of HTML5Shiv to make sure that these elements work in IE. And this is a good example of using wrapping DIV elements to make sure that older browsers style the various semantic elements correctly.

There are a few errors like surrounding just the H1 element with an HGROUP element. When there is only one header element, you don't need and shouldn't use the HGROUP element.

There are also several untitled sections. If the section that you're creating doesn't naturally have a headline, then it probably shouldn't be a SECTION. Use a DIV element instead. You also don't need to wrap things like ARTICLE and ASIDE elements inside a SECTION element. You should only do this if there are multiple articles or aside areas that can be grouped together. If you are using the SECTION elements just for style or layout, then you should use the DIV element instead.

©2014 About.com. All rights reserved.