Programming Stuff

HTML5 Sample

Here an overview of HTML5 that is the HTML last standard. I want to mention some characteristics and give a sample.

First of all HTML5 accept all features of the previous standard HTML4.

HTML5 has the new tags to facilitate the way for designing a web site. The sample is focus in this feature.
Other features: Canvas, Media, Geo-Location, DOM, Form Elements, Storage, etc are not cover by this post (for more information, see the references)

In the past, we were using tables to organize the design of the web application that is not good because the table are using to show the data, example: table of cars with price, model and color.  after that we decided to implement DIV for the design using CSS to organize the position, this approach is useful but show a negligence of HTML for design a basic structure. Then appear HTML5 with these new tags: header, nav, section, article, aside, and footer, that make it easier.

Version 1: TABLE (view)

Version 2: DIV (view)

Version 3: HTML5 New Tags (view)

 

(Tested in IE, Firefox, Opera, Safari, Chrome)NOTE: The video in the sample web page is a traditional embed element. It is a video from YouTube.com used to show a nice web page but NOT for a demonstration of HTML5 media/video feature.

** UPDATE 6/2/2014

Responsive HTML5 layout: http://dsheiko.com/weblog/responsive-web-design-with-html5  (responsive preview)

htmlflex

HTML5 code

CSS Code

 

References:
http://dev.w3.org/html5/html-author/
http://html5demos.com/
http://en.wikipedia.org/wiki/HTML5
http://www.ibm.com/developerworks/library/x-html5/
http://www.youtube.com/watch?v=siOHh0uzcuY (video)
http://www.alistapart.com/articles/previewofhtml5
http://kpumuk.info/development/10-recommendations-on-using-html5-today/
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-screencast/