Table Of ContentHTML5
HTML5
About the Tutorial
HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a
programming language, but rather a markup language. In this tutorial, we will discuss the
features of HTML5 and how to use it in practice.
Audience
This tutorial has been designed for beginners in HTML5 to make them understand the basic-
to-advanced concepts of the subject.
Prerequisites
Before starting this tutorial, you should have a basic understanding of HTML and its tags.
Disclaimer & Copyright
Copyright 2016 by Tutorials Point (I) Pvt. Ltd.
All the content and graphics published in this e-book are the property of Tutorials Point (I)
Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute, or republish
any contents or a part of contents of this e-book in any manner without written consent of
the publisher.
We strive to update the contents of our website and tutorials as timely and as precisely as
possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt.
Ltd. provides no guarantee regarding the accuracy, timeliness, or completeness of our website
or its contents including this tutorial. If you discover any errors on our website or in this
tutorial, please notify us at [email protected]
HTML5
Execute HTML5 Online
For most of the examples given in this tutorial you will find Try it option, so just make use of
this option to execute your HTML5 programs at the spot and enjoy your learning.
Try following example using Try it option available at the top right corner of the below sample
code box −
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorials Point</title>
</head>
<body>
<header role="banner">
<h1>HTML5 Document Structure Example</h1>
<p>This page should be tried in safari, chrome or Mozila.</p>
</header>
<footer>
<p>Created by <a href="http://tutorialspoint.com/">Tutorials
Point</a></p>
</footer>
</body>
</html>
HTML5
Table of Contents
About the Tutorial ................................................................................................................................... 1
Audience ................................................................................................................................................. 1
Prerequisites ........................................................................................................................................... 1
Execute HTML5 Online ............................................................................................................................ 2
Table of Contents .................................................................................................................................... 3
1. HTML5 − OVERVIEW ............................................................................................................ 9
Browser Support ..................................................................................................................................... 9
New Features .......................................................................................................................................... 9
Backward Compatibility ........................................................................................................................ 10
2. HTML5 − SYNTAX ............................................................................................................... 11
The DOCTYPE ........................................................................................................................................ 11
Character Encoding ............................................................................................................................... 11
The <script> tag ..................................................................................................................................... 11
The <link> tag ........................................................................................................................................ 12
HTML5 Elements ................................................................................................................................... 12
HTML5 Attributes .................................................................................................................................. 12
HTML5 Document ................................................................................................................................. 13
3. HTML5 − ATTRIBUTES ........................................................................................................ 16
Standard Attributes ............................................................................................................................... 16
Custom Attributes ................................................................................................................................. 17
4. HTML5 − EVENTS ............................................................................................................... 18
5. HTML5 − WEB FORMS 2.0 ................................................................................................. 21
HTML5
The <input> element in HTML4 ............................................................................................................. 21
The <input> element in HTML5 ............................................................................................................. 22
HTML5 - datetime ................................................................................................................................. 23
HTML5 - datetime local ......................................................................................................................... 24
HTML5 – date ........................................................................................................................................ 24
HTML5 – month..................................................................................................................................... 25
HTML5 - week ....................................................................................................................................... 26
HTML5 – time ........................................................................................................................................ 27
HTML5 – number ................................................................................................................................... 27
HTML5 – range ...................................................................................................................................... 28
HTML5 - email ....................................................................................................................................... 29
HTML5 – URL ......................................................................................................................................... 30
The <output> element ........................................................................................................................... 30
The placeholder attribute...................................................................................................................... 32
The autofocus attribute ........................................................................................................................ 32
The required attribute ........................................................................................................................... 33
6. HTML5 − SVG ..................................................................................................................... 35
Viewing SVG Files .................................................................................................................................. 35
Embedding SVG in HTML5 ..................................................................................................................... 35
HTML5 − SVG Circle ............................................................................................................................... 36
HTML5 − SVG Rectangle ........................................................................................................................ 36
HTML5 − SVG Line ................................................................................................................................. 37
HTML5 − SVG Ellipse .............................................................................................................................. 38
HTML5 − SVG Polygon ........................................................................................................................... 39
HTML5 − SVG Polyline ........................................................................................................................... 40
HTML5
HTML5 − SVG Gradients ........................................................................................................................ 40
HTML5 − SVG Star ................................................................................................................................. 42
7. HTML5 − MATHML ............................................................................................................ 44
MathML Examples ................................................................................................................................ 44
Using MathML Characters ..................................................................................................................... 45
Matrix Presentation Examples .............................................................................................................. 47
8. HTML5 − WEB STORAGE .................................................................................................... 49
Session Storage ..................................................................................................................................... 49
Local Storage ......................................................................................................................................... 50
Delete Web Storage .............................................................................................................................. 51
9. HTML5 − WEB SQL DATABASE ........................................................................................... 54
The Core Methods ................................................................................................................................. 54
Opening Database ................................................................................................................................. 54
Executing queries .................................................................................................................................. 55
INSERT Operation .................................................................................................................................. 55
READ Operation .................................................................................................................................... 55
Final Example ........................................................................................................................................ 56
10. HTML5 − SERVER SENT EVENTS ......................................................................................... 58
Web Application for SSE ........................................................................................................................ 58
Server Side Script for SSE....................................................................................................................... 59
Handle Server-Sent Events .................................................................................................................... 60
11. HTML5 − WEBSOCKETS ..................................................................................................... 61
WebSocket Attributes ........................................................................................................................... 61
HTML5
WebSocket Events ................................................................................................................................. 62
WebSocket Methods ............................................................................................................................. 62
WebSocket Example .............................................................................................................................. 62
Client Side HTML & JavaScript Code ...................................................................................................... 62
Install pywebsocket .............................................................................................................................. 64
Start the Server ..................................................................................................................................... 64
12. HTML5 − CANVAS .............................................................................................................. 65
The Rendering Context .......................................................................................................................... 66
Browser Support ................................................................................................................................... 66
HTML5 Canvas Examples ....................................................................................................................... 66
HTML5 Canvas - Drawing Rectangles ..................................................................................................... 67
HTML5 Canvas - Drawing Paths ............................................................................................................. 69
HTML5 Canvas - Drawing Lines .............................................................................................................. 72
HTML5 Canvas - Drawing Bezier Curves ................................................................................................. 76
HTML5 Canvas - Drawing Quadratic Curves ........................................................................................... 78
HTML5 Canvas - Using Images ............................................................................................................... 81
HTML5 Canvas - Create Gradients ......................................................................................................... 83
HTML5 Canvas - Styles and Colors ......................................................................................................... 88
HTML5 Canvas - Text and Fonts ............................................................................................................. 92
HTML5 Canvas - Pattern and Shadow .................................................................................................... 94
HTML5 Canvas - Save and Restore States .............................................................................................. 98
HTML5 Canvas - Translation ................................................................................................................ 101
HTML5 Canvas - Rotation .................................................................................................................... 104
HTML5 Canvas - Scaling ....................................................................................................................... 106
HTML5 Canvas - Transforms ................................................................................................................ 109
HTML5
HTML5 Canvas - Composition .............................................................................................................. 112
HTML5 Canvas - Animations ................................................................................................................ 116
13. HTML5 − AUDIO & VIDEO ................................................................................................ 119
Embedding Video ................................................................................................................................ 119
Video Attribute Specification .............................................................................................................. 120
Embedding Audio ................................................................................................................................ 121
Audio Attribute Specification .............................................................................................................. 122
Handling Media Events........................................................................................................................ 122
Configuring Servers for Media Type .................................................................................................... 124
14. HTML5 − GEOLOCATION .................................................................................................. 125
Geolocation Methods .......................................................................................................................... 125
Geolocation getCurrentPosition() API ................................................................................................. 126
Geolocation watchPosition() API ......................................................................................................... 128
Geolocation clearWatch() API ............................................................................................................. 130
Location Properties ............................................................................................................................. 132
Handling Errors ................................................................................................................................... 133
Position Options .................................................................................................................................. 134
15. HTML5 − MICRODATA ..................................................................................................... 136
Example .............................................................................................................................................. 136
Global Attributes ................................................................................................................................. 137
Properties Datatypes........................................................................................................................... 137
Microdata API support ........................................................................................................................ 138
Defining Microdata Vocabulary ........................................................................................................... 138
16. HTML5 − DRAG & DROP .................................................................................................. 140
HTML5
Drag and Drop Events .......................................................................................................................... 140
The DataTransfer Object: .................................................................................................................... 141
Drag and Drop Process ........................................................................................................................ 142
17. HTML5 − WEB WORKERS ................................................................................................. 146
What is Web Workers?........................................................................................................................ 147
How Web Workers Work? ................................................................................................................... 148
Stopping Web Workers ....................................................................................................................... 149
Handling Errors ................................................................................................................................... 149
Checking for Browser Support ............................................................................................................. 150
18. HTML5 – INDEXEDDB ...................................................................................................... 152
19. HTML5 − WEB MESSAGING ............................................................................................. 160
20. HTML5 − CORS ................................................................................................................ 163
21. HTML5 − WEB RTC........................................................................................................... 167
1. HTML5 − OVERVIEW HTML5
HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0,
and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World
Wide Web.
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web
Hypertext Application Technology Working Group (WHATWG).
The new standard incorporates features like video playback and drag-and-drop that have
been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft
Silverlight, and Google Gears.
Browser Support
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support
many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5
functionality.
The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all
have excellent support for HTML5.
New Features
HTML5 introduces a number of new elements and attributes that can help you in building
modern websites. Here is a set of some of the most prominent features introduced in HTML5.
New Semantic Elements: These are like <header>, <footer>, and <section>.
Forms 2.0: Improvements to HTML web forms where new attributes have been
introduced for <input> tag.
Persistent Local Storage: To achieve without resorting to third-party plugins.
WebSocket : A next-generation bidirectional communication technology for web
applications.
Server-Sent Events: HTML5 introduces events which flow from web server to the
web browsers and they are called Server-Sent Events (SSE).
Canvas: This supports a two-dimensional drawing surface that you can program with
JavaScript.
Audio & Video: You can embed audio or video on your webpages without resorting
to third-party plugins.
Description:HTML5 is the latest and most enhanced version of HTML. This tutorial has been designed for beginners in HTML5 to make them understand the.
