Slide 3.13: HTML5

HTML5

HTML5 is the new standard for HTML. The previous version of HTML, HTML 4.01, came in 1999. The Web has changed greatly since then. HTML5 is still a work in progress, but major browsers support many of HTML5 elements and APIs. HTML5 is a Candidate Recommendation of W3C since December 17, 2012. Some rules of HTML5 include

New features should be based on HTML, CSS, DOM, & JavaScript,
Reduce the need for external plugins (like Flash),
Better error handling,
More markup to replace scripting,
HTML5 should be device independent, and
The development process should be visible to the public.

Minimum HTML5 Document

A simple HTML5 document is given on the right, with the minimum of required tags. The <!doctype> declaration must be the very first thing in your HTML document, before the <html> tag.

 <!DOCTYPE html>
 <html>
  <head>
   <meta charset="UTF-8">
   <title>Title of the document</title>
  </head>
  <body>
   Content of the document......
  </body>
 </html>

HTML5—New Features
Some of the most interesting new features in HTML5:

The <canvas> element for 2D drawing
The <video> and <audio> elements for media playback
Support for local storage
New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
New form controls, like calendar, date, time, email, url, search

Demonstration
The following demonstration shows how the HTML5 script is displayed on the Web.


<!DOCTYPE HTML> <html> <head><title>HTML Working Area</title> <style type="text/css"> #div1 {width:200px;height:70px;padding:10px;border:2px solid #3366CC;} </style> <script type="text/javascript"> function allowDrop( ev ) { ev.preventDefault(); } function drag( ev ) { ev.dataTransfer.setData( "Text", ev.target.id ); } function drop( ev ) { ev.preventDefault( ); var data = ev.dataTransfer.getData( "Text" ); ev.target.appendChild( document.getElementById( data ) ); } </script> </head> <body> <p>Drag the tiger image into the rectangle:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br /> <img id="drag1" src="http://undcemcs01.und.edu/~wen.chen.hu/course/260/3/figure/tiger.gif" draggable="true" ondragstart="drag(event)" width="136" height="69"> </body> </html>