Introduction to HTML5
HTML 5 is still a work in progress. So changes are being made to both the specification, and how browsers support/interpret the specification.
Key Features
HTML5 adds some new features to HTML. This is in part because computers, and therefore browsers, can do more than the original spec was design to do.
Here are some new key features to HTML5 (compared to HTML/xHTML)
- New Elements
- header
- article
- section
- footer
- aside
- etc...
- New Attributes - including the ability for you to add your own, and still be legal/pass validation use 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 tools, built right in
- 2D/3D Graphics
- Local Storage - store information locally for off-line use
Sample Page
New declaration
<!DOCTYPE html>
<!DOCTYPE html> <html> <head> <title>Doc Title</title> </head> <body> The content... </body> </html>
More complex, ut what could be standard code could look like the following:
<!DOCTYPE html> <html> <head> <title>Doc Title</title> </head> <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> </body> </html>
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, which we will look at more next week, doesn't use those tags. Rather, they use divs, and define attributes.The Mobile jQuery library looks for these tags, and adds it markup to that.
Example page for Mobile jQuery: (this does not have the script or CSS, just the basic structure)
<!DOCTYPE html>
<html>
<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>
</html>