HTML Definition

Stands for "Hyper-Text Markup Language." This is the language that Web pages are written in. Also known as hypertext documents, Web pages must conform to the rules of HTML in order to be displayed correctly in a Web browser. The HTML syntax is based on a list of tags that describe the page's format and what is displayed on the Web page.

What is HTML5

HTML5 is a W3C specification that defines the fifth major revision of the Hypertext Markup Language (HTML). One of the major changes in HTML5 is in respect to how HTML addresses Web applications. Other new features in HTML5 include specific functions for embedding graphics, audio, video, interactive documents and other features.

Video and Audio

HTML5 defines two new elements called <video> and <audio> for embedding video and audio in your web pages. Also HTML5 has the addition of display controls. Embedding video used to be impossible without third-party plugins such as Adobe Flash® and Apple QuickTime®. <video> element does not apply to Youtube as they are embedded via iframe as displayed below:

Canvas

HTML5 defines the <canvas> element as “a resolution-dependent bitmap canvas that can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. HTML5 defines a set of functions (“the canvas API”) for drawing shapes, defining paths, creating gradients, and applying transformations.

Here is a simple web drawing application using HTML5 canvas and its partner JavaScript. Feel free to colour in the duck!

Drawing application created by william Malone: http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

Local Storage

HTML5 storage provides a way for web sites to store information on your computer and retrieve it later. The concept is similar to cookies, but it’s designed for larger quantities of information. Cookies are limited in size, and your browser sends them back to the web server every time it requests a new page (which takes extra time and precious bandwidth). HTML5 storage stays on your computer, and web sites can access it with JavaScript after the page is loaded.

Semantic Elements

The <header> and <footer> tags are two of the new semantic tags available. These two tags do not get you anything above and beyond for the actual display. But they will reap long-term rewards for your search engine efforts, since the search engines will be able to tell the difference between "content" and things that are important to the user but that aren't the actual content.

The <article> and <section> tags are two more semantic tags that will boost your search engine visibility. Articles can be composed of multiple sections, and a section can have multiple articles. An article represents a full block of content, and a section is a piece of a bigger whole. For example, if you are looking at a blog, the front page might have a section for the listing of all the posts, and each post would be an article with a section for the actual post and another for comments.

The <datalist> tag acts like a combo box, where the system provides a pre-made list of suggestions, but users are free to type in their own input as well. There are tons of possible uses for this, such as a search box pre-populated with items based on the user's history. This is another one of those things that currently requires a bunch of JavaScript (or JavaScript libraries) to handle but that can be done natively with HTML5.

Geolocation

Geolocation is the art of figuring out where you are in the world and (optionally) sharing that information with people you trust. There is more than one way to figure out where you are — your IP address, your wireless network connection, which cell tower your phone is talking to, or dedicated GPS hardware that calculates latitude and longitude from information sent by satellites in the sky.

Web Workers

Web Workers provide a standard way for browsers to run JavaScript in the background. With web workers, you can spawn multiple “threads” that all run at the same time, more or less. (Think of how your computer can run multiple applications at the same time, and you’re most of the way there.) These “background threads” can do complex mathematical calculations, make network requests, or access local storage while the main web page responds to the user scrolling, clicking, or typing.

References:
  • http://diveintohtml5.info/detect.html
  • http://techterms.com/definition/html
  • http://www.webopedia.com/TERM/H/HTML5.html
  • http://diveintohtml5.info/detect.html#video-formats
  • http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/
  • http://diveintohtml5.info/detect.html#video-formats
  • http://www.techrepublic.com/blog/10-things/10-new-html5-tags-you-need-to-know-about/
  • http://diveintohtml5.info/detect.html