HTML 5 is still a work in progress. So changes are being made to both the specification, and even more so, how browsers support/interpret the specification.
HTML5 adds some new features to HTML. This is because computers, and therefore browsers, can do more than the original HTML specification was designed to do.
Here are some new key features to HTML5 (compared to HTML/xHTML)
- New Tags Elements
- New Attributes – including the ability for you to add your own, and still be legal/pass validation use the prefix “data-“ to make it work.
- Full CSS3 Support – of course it is still evolving as well
- Video and Audio – no need for Flash, or 3rd party plugins to include AV components
- 2D/3D Graphics – SVG and WebGL
- Local Storage – store information locally for off-line use
- Location services – so if your site could benefit from knowing where your users are, you can access that information,
- and more
A new doctype declaration is used.
This actually helps a bit, because it is smaller, and easier to remember. It also shows a change in that people are expecting the HTML5 to be a “living specification” therefore, instead of versioning, assume it is always changing. This could be problematic in the future. In some cases, what looks more complex, could be standard code before long:
<body> <header> Title of page </header> <section> <article>The content 1... </article> <article>The content 2... </article> <article>The content 3... </article> </section> <footer> Page Footer </footer>
Each of the new tags defines a way to structurally layout the page, but the visual layout would still need to occur with CSS.
HTML5 and Mobile jQuery
You do not have, or even need, to use the new tags to create an HTML5 layout.
Mobile jQuery, for example, doesn’t use those tags. Rather, they use divs, and then use defined attributes. This is nice as some older browsers do not support the new tags. The Mobile jQuery library looks for these div tags, and adds additional markup to that.
Example page for Mobile jQuery: (this does not have the script or CSS, just the basic structure)
<head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div data-role="page"> <div data-role="header"> <h1>My Title</h1> </div><!-- /header --> <div data-role="content"> <p>Hello world</p> </div><!-- /content --> </div><!-- /page --> </body>