HTML 5

HTML5
Devesh chamola
devesh.softprodigy@gmail.com

What is HTML5?
HTML5 is the new standard for HTML.
The previous version of HTML was – HTML 4.01.
HTML5 is designed to deliver almost everything you want to do online without
requiring additional plugins. It does everything from animation to apps, music to
movies, and can also be used to build complicated applications that run in your
browser.
HTML5 is also cross-platform (it does not care whether you are using a tablet or a
smartphone, a notebook, notebook or a Smart TV).

Differences Between HTML4 & HTML5
1. HTML5 is a work in progress
2. Simplified Syntax
3. The New <canvas> Element for 2D drawings
4. New content-specific elements, like <article>,<header>,<footer>,<nav>,<section>
5. New <menu> and <figure> Elements
6. New <audio> and <video> Elements
7. New form controls, like calendar, date, time, email, url, search

Browser Support for HTML5
HTML5 is not yet an official standard, and no browsers have full HTML5 support.
But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue
to add new HTML5 features to their latest versions.

The HTML5 <!DOCTYPE>
In HTML5 there is only one <!DOCTYPE> declaration, and it is very simple:
<!DOCTYPE>

Minimum HTML5 Document
Below is a simple HTML5 document, with the minimum of required tags:
<!DOCTYPE>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<html>
<body>
Content of the document......
</body>
</html>

NEW HTML5 New Elements
The most interesting new HTML5 elements are:
New semantic elements like <header>, <footer>, <article>, and
<section>.
New attributes of form elements like number, date, time, calendar, and
range.
New graphic elements: <svg> and <canvas>.
New multimedia elements: <audio> and <video>.

New Semantic Elements in HTML5
● <article>
● <aside>
● <details>
● <figcaption>
● <figure>
● <footer>
● <header>
● <main>
● <mark>
● <nav>
● <section>
● <summary>
● <time>

Video Media
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>

Audio Media
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>

Playing a YouTube Video in HTML
<iframe width="420" height="345"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

HTML5 Canvas
The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting
(usually JavaScript).
The <canvas> element is only a container for graphics. You must use a script to
actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding
images.

HTML5 Canvas CODE
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>

HTML5 Inline SVG
SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web
SVG defines the graphics in XML format
SVG graphics do NOT lose any quality if they are zoomed or resized
Every element and every attribute in SVG files can be animated
SVG is a W3C recommendation

HTML5 Inline SVG CODE
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
Sorry, your browser does not support inline SVG.
</svg>

HTML5 Google Maps
<div id="map" style="width:400px;height:400px;background:yellow"></div>
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>

HTML 5

More Related Content

HTML 5