HTML5 Tutorial Examples
HTML5 Introduction Examples
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Introduction Examples</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 Tutorials Root</p>
</footer>
</body>
</html>
Output
HTML5 color input type examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Color Input Type examples</title>
</head>
<body>
<form>
<label>
Select Color: <input type="color" name="mycolor">
</label>
</form>
</body>
</html>
Output
HTML5 date input type examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Date Input Type examples</title>
</head>
<body>
<form>
<label>
Select Date: <input type="date" name="mydate">
</label>
</form>
</body>
</html>
Output
HTML5 datetime input type examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Datetime Input Type examples</title>
</head>
<body>
<form>
<label>
Date & Time: <input type="datetime" name="mydatetime">
</label>
</form>
</body>
</html>
Output
HTML5 datetime-local input type examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Datetime-local Input Type examples</title>
</head>
<body>
<form>
<label>
Local Date & Time: <input type="datetime-local" name="mylocaldatetime">
</label>
</form>
</body>
</html>
Output
HTML5 email input type examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Email Input Type examples</title>
<style type="text/css">
input[type="email"]:valid {
outline: 2px solid blue;
}
input[type="email"]:invalid {
outline: 2px solid black;
}
</style>
</head>
<body>
<form>
<label>
Email Address: <input type="email" name="mycolor" required>
</label>
</form>
</body>
</html>
Output
HTML5 month input type examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 month input type examples</title>
</head>
<body>
<form>
<label>
Select Month: <input type="month" name="mymonth">
</label>
</form>
</body>
</html>
Output
HTML5 number input type examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 number input type examples</title>
<style type="text/css">
input[type="number"]:valid {
outline: 2px solid yellow;
}
input[type="number"]:invalid {
outline: 2px solid red;
}
</style>
</head>
<body>
<form>
<label>
Select Number: <input type="number" value="1"
min="1" max="10" step="0.5" name="mynumber">
</label>
</form>
<p><strong>Note</strong>: If you try to enter
the number out of the range (1-10).</p>
</body>
</html>
Output
HTML5 range input type examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 range input type examples</title>
</head>
<body>
<form>
<label>
Select Number: <input type="range" value="1"
min="1" max="10" step="0.5" name="mynumber">
</label>
</form>
</body>
</html>
Output
HTML5 search input type examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 search input type examples</title>
</head>
<body>
<form>
<label>
Search Website: <input type="search" name="mysearch">
</label>
</form>
</body>
</html>
Output
HTML5 tel input type examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 tel input type examples</title>
</head>
<body>
<form>
<label>
Telephone Number: <input type="tel" name="mytelephone" required>
</label>
</form>
</body>
</html>
Output
HTML5 time input type examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Time Input Type examples</title>
</head>
<body>
<form>
<label>
Select Time: <input type="time" name="mytime">
</label>
</form>
</body>
</html>
Output
HTML5 url input type examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 URL Input Type examples</title>
<style type="text/css">
input[type="url"]:valid {
outline: 2px solid blue;
}
input[type="url"]:invalid {
outline: 2px solid red;
}
</style>
</head>
<body>
<form>
<label>
Website URL: <input type="url" name="mywebsite" required>
</label>
</form>
<p><strong>Note</strong>: Enter URL in the form
like https://www.google.com</p>
</body>
</html>
Output
HTML5 week input type examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Week Input Type examples</title>
</head>
<body>
<form>
<label>
Select Week: <input type="week" name="myweek">
</label>
</form>
</body>
</html>
Output
HTML5 canvas into HTML documents examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas into HTML documents examples</title>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// draw stuff here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300"
height="250"></canvas>
</body>
</html>
Output
Draw a line onto the canvas examples
<!DOCTYPE html>
<html>
<head>
<title>Drawing a Line on Canvas</title>
<style type="text/css">
canvas {
border: 1px solid red;
}
</style>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(50, 150);
context.lineTo(250, 50);
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Output
Draw an arc onto the canvas examples
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Drawing an Arc on Canvas</title>
<style type="text/css">
canvas {
border: 1px solid #000;
}
</style>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Output
Draw a rectangle onto the canvas examples
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Drawing a Rectangle on Canvas</title>
<style type="text/css">
canvas {
border: 1px solid red;
}
</style>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(50, 50, 200, 100);
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Output
Draw a circle onto the canvas examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drawing a Circle on Canvas</title>
<style type="text/css">
canvas {
border: 2px solid #000;
}
</style>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Output
Set the stroke color and width on canvas examples
<!DOCTYPE html>
<html>
<head>
<title>Set the stroke color and width on canvas examples</title>
<style type="text/css">
canvas {
border: 2px solid yellow;
}
</style>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.lineWidth = 5;
context.strokeStyle = "orange";
context.moveTo(50, 150);
context.lineTo(250, 50);
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Output
Set the cap style for the stroke on canvas examples
<!DOCTYPE html>
<html>
<head>
<title>Set the cap style for the stroke on canvas examples</title>
<style type="text/css">
canvas {
border: 1px solid #000;
}
</style>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.lineWidth = 10;
context.strokeStyle = "orange";
context.lineCap = "round";
context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Output
Fill color inside a rectangle shape on canvas examples
<!DOCTYPE html>
<html>
<head>
<title>Example of Fill Color inside a Rectangle</title>
<style type="text/css">
canvas {
border: 2px solid red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(50, 50, 200, 100);
context.fillStyle = "#FB8B89";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Output
Fill color inside a circular shape on canvas examples
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example of Fill Color inside a Circle</title>
<style type="text/css">
canvas {
border: 2px solid #000;
}
</style>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
context.fillStyle = "#FB8B89";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Output
Fill linear gradient inside canvas shapes examples
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example of Fill Linear Gradient inside Canvas Shapes</title>
<style type="text/css">
canvas {
border: 1px solid #000;
}
</style>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(50, 50, 200, 100);
var grd = context.createLinearGradient(0, 0, canvas.width,
canvas.height);
grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd;
context.fill();
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Output
Fill radial gradient inside canvas shapes examples
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example of Fill Radial Gradient inside Canvas Shapes</title>
<style type="text/css">
canvas {
border: 2px solid red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(150, 100, 10, 160, 110, 100);
grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd;
context.fill();
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Output
HTML5 SVG into HTML documents examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 SVG into HTML documents examples</title>
</head>
<body>
<svg width="300" height="200">
<text x="10" y="20" style="font-size:14px;">
Your browser support SVG.
</text>
Sorry, your browser does not support SVG.
</svg>
</body>
</html>
Output
HTML5 a line using SVG examples
<!DOCTYPE html>
<html>
<head>
<title>Create a Line with HTML5 SVG examples</title>
<style type="text/css">
svg {
border: 2px solid #000;
}
</style>
</head>
<body>
<svg width="300" height="200">
<line x1="50" y1="50" x2="250" y2="150"
style="stroke:blue; stroke-width:3;" />
</svg>
</body>
</html>
Output
HTML5 a rectangle using SVG examples
<!DOCTYPE html>
<html>
<head>
<title>Create a Rectangle with HTML5 SVG examples</title>
<style type="text/css">
svg {
border: 2px solid red;
}
</style>
</head>
<body>
<svg width="300" height="200">
<rect x="50" y="50" width="200"
height="100" style="fill:orange; stroke:black; stroke-width:3;" />
</svg>
</body>
</html>
Output
HTML5 a circle using SVG examples
<!DOCTYPE html>
<html>
<head>
<title>Create a Circle with HTML5 SVG examples</title>
<style type="text/css">
svg {
border: 1px solid blue;
}
</style>
</head>
<body>
<svg width="300" height="200">
<circle cx="150" cy="100" r="70"
style="fill:lime; stroke:blue; stroke-width:3;" />
</svg>
</body>
</html>
Output
Rende text on web pages using SVG examples
<!DOCTYPE html>
<html>
<head>
<title>Rende text on web pages using SVG examples</title>
<style type="text/css">
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg width="400" height="200">
<text x="20" y="30" style="fill:purple; font-size:22px;">
Welcome to Our Website Tutorialsroot!
</text>
<text x="20" y="30" dx="0" dy="20" style="fill:navy; font-size:14px;">
Here you will find of all useful information.
</text>
</svg>
</body>
</html>
Output
Rotate and Render text with SVG examples
<!DOCTYPE html>
<html>
<head>
<title>Rotate and Render text with SVG examples</title>
<style type="text/css">
svg {
border: 1px solid red;
}
</style>
</head>
<body>
<svg width="400" height="250">
<text x="30" y="15" style="fill:purple;
font-size:22px; transform:rotate(30deg);">
<tspan style="fill:purple; font-size:22px;">
Welcome to Our Website Tutorialsroot!
</tspan>
<tspan dx="-230" dy="20"
style="fill:navy; font-size:14px;">
Here you will find of all useful information.
</tspan>
</text>
</svg>
</body>
</html>
Output
HTML5 audio in HTML documents examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 audio Element examples</title>
</head>
<body>
<audio controls="controls" src="/examples/audio/birds.mp3">
Your browser does not support the HTML5 audio element.
</audio>
</body>
</html>
Output
Audio Element with Alternative Sources examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 audio Element examples</title>
</head>
<body>
<audio controls="controls">
<source src="/examples/audio/birds.mp3" type="audio/mpeg">
<source src="/examples/audio/birds.ogg" type="audio/ogg">
Your browser does not support the HTML5 audio element.
</audio>
</body>
</html>
Output
Linking the audio files examples
<!DOCTYPE html>
<html>
<head>
<title>Linking the audio files examples</title>
</head>
<body>
<p><a href="audio/sea.mp3">Track 1</a></p>
<p><a href="audio/wind.mp3">Track 2</a></p>
</body>
</html>
Output
Insert audio in HTML documents using the object element examples
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Inserting Audio Using object Element</title>
</head>
<body>
<object data="audio/sea.mp3" width="200px" height="50px"></object>
<object data="audio/sea.ogg" width="200px" height="50px"></object>
</body>
</html>
Output
HTML5 video in HTML documents examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 video in HTML documents examples</title>
</head>
<body>
<video controls="controls" src="video/shuttle.mp4">
Your browser does not support the HTML5 Video element.
</video>
</body>
</html>
Output
Aternative sources for video element examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 video element examples</title>
</head>
<body>
<video controls="controls">
<source src="video/shuttle.mp4" type="video/mp4">
<source src="video/shuttle.ogv" type="video/ogg">
Your browser does not support the HTML5 Video element.
</video>
</body>
</html>
Output
Insert video in HTML documents using the object element examples
<!DOCTYPE html>
<html>
<head>
<title>nserting Video Using object Element</title>
</head>
<body>
<object data="video/blur.swf" width="400px"
height="200px"></object>
</body>
</html>
Output
Storing data with HTML5 local storage examples
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML5 Local Storage</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
if(localStorage){
$(document).ready(function(){
$(".save").click(function(){
var firstName = $("#firstName").val();
localStorage.setItem("first_name", firstName);
alert("Your first name is saved.");
});
$(".access").click(function(){
alert("Hi, " + localStorage.getItem("first_name"));
});
});
} else{
alert("Sorry, your browser do not support local storage.");
}
</script>
</head>
<body>
<form>
<label>First Name: <input type="text" id="firstName"></label>
<button type="button" class="save">Save Name</button>
<button type="button" class="access">Get Name</button>
</form>
</body>
</html>
Output
Storing data with HTML5 session storage examples
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML5 Session Storage</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
if(localStorage){
$(document).ready(function(){
$(".save").click(function(){
var lastName = $("#lastName").val();
sessionStorage.setItem("last_name", lastName);
alert("Your last name is saved.");
});
$(".access").click(function(){
alert("Hi, " + localStorage.getItem("first_name")
+ " " + sessionStorage.getItem("last_name"));
});
});
} else{
alert("Sorry, your browser do not support local storage.");
}
</script>
</head>
<body>
<form>
<label>Last Name: <input type="text" id="lastName"></label>
<button type="button" class="save">Save Name</button>
<button type="button" class="access">Get Name</button>
</form>
</body>
</html>
Output
JavaScript works in the background with HTML5 web worker examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Web Worker examples</title>
<script type="text/javascript">
if(window.Worker){
var worker;
worker = new Worker("js/ker.js");
worker.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
} else{
alert("Sorry, your browser do not support web worker.");
}
</script>
</head>
<body>
<div id="result">
</div>
</body>
</html>
Output
Terminating a running web worker examples
<!DOCTYPE html>
<html>
<head>
<title>Terminating a running web worker examples</title>
<script type="text/javascript">
var worker;
function startWorker(){
worker = new Worker("js/ker.js");
worker.onmessage = update;
worker.postMessage("start");
}
function update(event){
document.getElementById("result").innerHTML = event.data;
}
function stopWorker(){
worker.terminate();
}
</script>
</head>
<body>
<h1>Web Worker Demo</h1>
<button onclick="startWorker();" type="button">Start web worker</button>
<button type="button" onclick="stopWorker();">Stop web worker</button>
<div id="result">
</div>
</body>
</html>
Output
HTML5 Geolocation examples
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Geolocation examples</title>
<script type="text/javascript">
function showPosition(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
var positionInfo = "Your current position is (" +
"Latitude: " + position.coords.latitude + ",
" + "Longitude: " + position.coords.longitude + ")";
document.getElementById("result").innerHTML = positionInfo;
});
} else{
alert("Sorry, your browser does not support HTML5 geolocation.");
}
}
</script>
</head>
<body>
<div id="result">
</div>
<button type="button" onclick="showPosition();">Show Position</button>
</body>
</html>
Output
Show location on Google map in image format examples
<!DOCTYPE html>
<html>
<head>
<title>Example of Showing Geolocation on Google Map</title>
<script type="text/javascript">
function showPosition(){
navigator.geolocation.getCurrentPosition(showMap);
}
function showMap(position){
var latlong = position.coords.latitude + "," + position.coords.longitude;
var mapLink = "https://maps.googleapis.com/maps/api/staticmap?center="+latlong+"&zoom=16&size=400x300&output=embed";
// Create and insert Google map
document.getElementById("embedMap").innerHTML = "<img alt='Map Holder' src='"+ mapLink +"'>";
}
</script>
</head>
<body>
<button type="button" onclick="showPosition();">Show My Position on Google Map</button>
<div id="embedMap">
</div>
</body>
</html>
Output