The HTML5 revolution is moving fast and more and more browsers are taking full advantage of the great new features. We finally at a time where us developers can safely make the switch so here are some of the basic but powerful new features that HTML5 has to offer and tips and techniques to help along the way.
1. New Doctype
There is no need to for that unnecessesary doctype declaration any more.
The old:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The new:
<!DOCTYPE html>
Its actually not even necesary in HTML5 but its a safe call to make sure some of the archaic browsers know how to render the page.
2. The Figure Element
Ever try to add an image and couple it with a caption? Consider this:
<img src="path/to/image" alt="About image" />
<p>Image of Mars. </p>
There really isnt any way to associate the caption with the image itself. HTML5 has rectified this with the introduction of the figure element and the figcaption element.
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
3. No More Types for Links and Scripts
There is no need to define the type attribue to your link and script tags:
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>
You can now just define them in this manner as the type is automatically implied:
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>
4. No Need For Quotes
HTML5 is not XHTML so therefore you do not need to wrap your attributes in quotation marks any more. You still can if you wish but it is not mandatory.
Start the reactor.
It is still common practice for myself to wrap them but the choice is now yours.
5. Local Storage
Local Stoage isn’t officially HTML5 but its worth mentioning as it takes advantage of the contenteditable attribute. Now we can make advanced browsers remember what we type even after the browser is closed. Here is a quick Tutorial thanks to Tuts+
This feature is still not FULLY supported but its quite close with even IE8, Safari 4 and FF 3.5 supporting.
6. Header and Footer
Remember the old days of:
<div id="header">
...
</div>
<div id="footer">
...
</div>
Divs have no semantic structure even after an ID is applied; now with HTML5 we have the
Recent Comments