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

Orlando Web Design: HTML5 for Beginners Lesson 1
Orlando Web Design & Development What is HTML? HTML is the universal markup language for the Web. HTML stands for Hyper Text Markup ...
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 ...
Orlando Web Design: HTML5 for Beginners Lesson 2
Orlando Web Design & Development 1. Website Organization & Structure: A server is like a house because both store lots of ...
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 ...