New to HTML5

Xiao Ling /  / CodeProject, HTML5, Tech Frontier / ,

What is HTML5

HTML5 is a markup language based on HTML 4 and XHTML 1. It’s goal is to support the latest multimedia and be much more readable and understandable by humans and devices. Also, it is dedicated to reducing the dependency on RIA (Rich Internet Application) such as Flash, Silverlight, JavaFX and so forth, providing more handy APIs for strengthening Internet applications. A generic definition of HTML5 is “HTML5 + CSS3 + JS”.

Why HTML5

  • Standard
  • Cross-platform
  • Auto-adapt to the web page
  • Update in real-time
  • No plugin needed
  • Open and free
  • Friendly to search engines

What can HTML5 do

For experiencing what HTML5 can do, here are some amazing HTML5 web pages:

http://spielzeugz.de/html5/liquid-particles.html

http://ghost-hack.com/post/jsexperiments/tunneler/tunneler.html

http://playbiolab.com/

http://bellard.org/jslinux/index.html

Features of HTML5

Semantics

HTML5 defines some new HTML elements, which makes document description much more precise and readable.

semantics

Here are some useful HTML5 elements:

<article> <header> <aside> <hgroup> <figure> <figure> <figcaption> <section> <footer> <time>.

Deprecated elements: <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <s> <isindex> <noframes> <frameset> <strike> <tt> <u> and <xmp>

Connectivity

WebSocket

WebSocket provides for full-duplex communication, which makes more possible interaction between client and server, facilitating live content and the creation of real-time games.

websocket

 

Notifications

Website can push notifications to the desktop via the following code.

if (window.webkitNotifications.checkPermission() == 0) {
    var title = 'HTML5 notification',
        text = 'Can you see HTML5 notification?';
    window.webkitNotifications.createNotification('', title, text).show(); 
}

Multimedia

In HTML5, inserting a video or audio is as convenient as inserting an image.

HTML5 video

<audio src="sound.mp3" controls></audio>
<video src="movie.webm" autoplay controls></video>

3D Graphics Effects

Canvas

Dynamically draw something on the web page.

<canvas id="canvas" width="300" height="300"></canvas>
<script>
  var ctx = document.getElementById("canvas").getContext("2d");
  ctx.fillRect(20, 25, 150, 100);

  ctx.beginPath();
  ctx.arc(220, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
  ctx.lineWidth = 15;
  ctx.lineCap = 'round';
  ctx.strokeStyle = 'rgba(255, 127, 0, 0.5)';
  ctx.stroke();
</script>

WebGL

Without needing a plugin, WebGL provides some APIs to render 2D and 3D graphics in the web browser. This website helps you check whether your browser supports WebGL. Here are some amazing WebGL samples.

HTML5 vs Flash

HTML5:

  • No plugin for web browser.
  • Complex
  • Low popularity so far
  • Cross-platform
  • Lacks an engine
  • Free development tools.

Flash:

  • Smooth and stunning
  • Easy to learn
  • High popularity
  • High battery cost
  • Not open
  • Paid development tools

For more specifications, refer to Wikipedia: Comparison of HTML5 and Flash

Please feel free to contact kgao@dynamsoft.com.