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:

<div id=”header”> </div>

<div id=”footer”> </div>

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:

<video controls preload>
<source src=”video.mp4″ type=”video/mp4; ’codecs=’avc1.42E01E, mp4a.40.2′” />
</video>

7. Mark Markup Element

XHTML: NOT Available

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

Resources


Category: Web Development Orlando Tags: , , , No Comments By:

Related Posts

Internet History: The Evolution of the Web

The Evolution of the Web visualizes this gradual change in timeline form, tracking technologies and browsers from 19... Read More »

Responsivepx: Test Responsive Web Design

Designing for multiple devices can be challenging since BlackBerrys,  iPhones,  iPads, netbooks, &  Kindles have ... Read More »

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. Acco... Read More »

Leave a Comment

Your email address will not be published. Required fields are marked *


*