HTML5 has some very innovative features. There are many elements that comprise a full featured HTML5 page. You'll notice the Header tag used above to display header content. Both the header and subhead are using the CSS3 Shadowing element. The first appears as an inner bevel and the 2nd is the standard global shadow. It's a nice feature and just as quick to setup as text with a drop shadow in Adobe Photoshop. It's just a little quicker to apply to the web page being that you don't need to add an image tag and adjust for size/space etc.
The menu is a very fast setup using the HTML5 nav tag and CSS3 for the gradient effect. I just used list tags and applied the appropriate styles to the style sheet. Just below, you'll notice the embedded video using the HTML5 Video tag. There aren't any plugins needed, and no Flash development time. You also don't need to add the lengthy markup to the page necessary to make Flash work. You do however need to add some JavaScript, so it's a pretty even tradeoff on the page coding.
The aside element to the right of the video is used to add additional relevent verbiage in close proximity to the article or page content. I used CSS3 rounded corner styles.
This section was created using the HTML5 Contenteditable tag. It's used to create editable content that encourages end user engagement. This content can be edited by selecting and typing your own text.
CSS3 Layers
If you're not familiar with layers, hopefully I'll be able to shed a little light on it with my very simple axis diagram. You all remember the X/Y axis grid from geometry where X is width and Y is height. When I took geometry in high school, there was barely a mention of the Z-axis which is the 3rd dimension we refer to as depth.
A layer is simply a coordinate along the Z-axis. Think of it in this way. If you're facing your monitor, 2 inches from the Z-axis is closer to you than a position of 1 inch from the starting point of the Z-axis or zero. In your style sheet, you simply set your z-axis postion to a numerical value. I set the Z-axis value to 1 because a 2D web page is at the zero point. This places the graphic above the page. If you expand and contract your window, you'll see that any objects on the page tuck right under the graphic.
By the way, the grapic to the right was created in Adobe Illustrator using the 3D rotate effect. One of the new features in HTML5 is the Canvas element. I'm not a big fan of using it as it's currently applied, although I do see tremendous potential in the future. The Canvas element allows you to draw vector graphics using plotting coordinates in your HTML markup. Why would one want to take the time to write long code in coordinates to make simple shapes in markup language rather than just using a graphic created in Illustrator or Photoshop. The rationale given is that image files load slower because of their file size. There is some truth to that, and there was more truth to that not too many years ago before high speed internet was popular. It's really a non issue now. The image to the right has a file size of 15K. That's pretty impressive being that it's also transparent. With today's internet speeds, dozens of those images can load in less than a second.
I am curious to see where the future of the Canvas element will lead. If a feature rich WYSIWYG illustrating application is developed that generates the code, it would be the way to go. Maybe Adobe is already on it.
The final element I'm going to highlight is the footer tag below. It works the same way as a standard div tag footer setup, but the advantage is that it's already named. That makes for quick work on the style sheet.
The major drawback to HTML5 at this time is that not all of the features are compatible with every browser yet. It also displays things a little differently in the browsers where some of the features are available. Even with the JavaScript added for compatibility, you'll notice this page looks really funny in any Internet Explorer version prior to IE9. If you open it up in IE8 or earlier, you'll also notice the lack of compatibility with CSS3. This can make for significantly increased coding times. If you want complete compatibility, it's literally like coding for two or more complete websites.
Once the new browsers are up to speed, and a majority of users have upgraded to the "latest and greatest", HTML5 will be an excellent tool in the Web Developers arsenal.
