Slide 7.7: HTML5

HTML5

There are a couple of versions of HTML:

HTML is the basic language used to write web pages. HTML is a mark up language and not a full-blown programming language, so is therefore essentially static in nature.

HTML 4.01 adopted many browser-specific element types and attributes, but at the same time began to try to “clean up” the standard by marking some of them as deprecated.

XHTML (eXtensible HTML) is a reformulation of HTML 4.0 in XML. It is a family of current and future DTDs and modules that reproduce, subset, and extend HTML. Being XML means that XHTML can be viewed, edited, and validated with standard XML tools.

HTML5 is a cooperation between two groups:

W3C (World Wide Web Consortium), whose major mission is to develop web standards, and

WHATWG (Web Hypertext Application Technology Working Group), whose focuses are primarily on the development of HTML and APIs (Application Programming Interfaces) needed for web applications.

In 2006, they decided to cooperate and create a new version of HTML. HTML5 is W3C Recommendation since October 28, 2014. Some rules for HTML5 were established:

New features should be based on HTML, CSS, DOM, and 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.

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 language="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/101/7/figure/tiger.gif" draggable="true" ondragstart="drag(event)" width="136" height="69"> </body> </html>

Review: HTML5

Result: