HTML5 Resources and Tutorials

html5

What is HTML5?

HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. According to the W3 Schools HTML5 is still a work in progress, but most contemporary browsers have some HTML5 support.

HTML5 New Features

Some of the most interesting new features in HTML5:

The canvas element for drawing
The video and audio elements for media playback
Better support for local offline storage
New content specific elements, like article, footer, header, nav, section
New form controls, like calendar, date, time, email, url, search

Examples

1. New Doctype:

XHTML: <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

HTML5: <!DOCTYPE html>

2. No More `Types` for Scripts and Links:

XHTML: <link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />

HTML5: <link rel=”stylesheet” href=”path/to/stylesheet.css” />

3. Make your Content Editable:

This allows the user to edit any of the text contained within the element
XHTML: NOT Available
HTML5:

<p> To-Do List </p>
<ul contenteditable=”true”>
<li> Pick up milk</li>
<li> Go to the bank
<li> Study for test</li>
</ul>

4. Email Input Validation

XHTML:NOT Available
HTML5:

<form action=”" method=”get”>
<label for=”email”>Email:</label>
<input id=”email” name=”email” type=”email” /> <button type=”submit”> Submit Form </button>
</form>

5. Header and Footer Markup Elements

XHTML: NOT Available
HTML5:

6. Audio Markup Element

XHTML: NOT Available
HTML5:

<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.mp3″ />
<a href=”file.mp3″>Download this file.</a>
</audio>

7. Video Markup Element

XHTML: NOT Available
HTML5:

7. Mark Markup Element

XHTML: NOT Available

HTML5: <p> Hello <mark>”Don’t forget this”</mark>. </p>

Resources

Naked WordPress 3.0 Theme
Nathan Staines released Starkers, a completely naked WordPress theme for designers and developers to build on. This theme is HTML5 and take ...
Google's Book: 20 Things I Learned About Browsers and the Web
Google released a free HTML5 online book! The book is called 20 Things I Learned About Browsers and the Web. According to the forward, it’s ...
Internet History: The Evolution of the Web
The Evolution of the Web visualizes this gradual change in timeline form, tracking technologies and browsers from 1990 through to the present ...
MarkUp: Draw on Any Webpage
MarkUp lets you draw on any webpage with a variety of tools to express your thoughts, make a point or just simply edit. Share ideas with cl ...