HTML 5
Introduction
HTML 5 is the fifth and current version of HTML.
It has improved the mark-up available for documents
FEAUTURES
It has introduced new multimedia features which support audio and
video controls by using <audio> and <video> tags.
There are new graphics elements including vector graphics and tags.
Enrich semantic content by including <header> <footer>, <article>,
<section> and <figure> are added.
Drag and Drop- The user can grab an object and drag it further
dropping it to a new location.
Geo-location services- It helps to locate the geographical location of a
client.
Web storage facility which provides web application methods to store
data on the web browser.
Uses SQL database to store data offline.
Allows drawing various shapes like triangle, rectangle, circle, etc.
Capable of handling incorrect syntax.
<VIDEO> TAG
The HTML <video> element is used to show a video on a web page.
The controls
attribute adds
video controls,
like play, pause,
and
[Link]
<AUDIO> TAG
The HTML <audio> element is used to play an audio file on a web page.
The controls
attribute adds
video controls,
like play, pause,
and
[Link]
YOUTUBE VIDEO
To play your video on a web page, do the following:
Upload the video to YouTube
Take a note of the video id
Define an <iframe> element in your web page
Let the src attribute point to the video URL
Use the width and height attributes to specify the dimension of the player
Add any other parameters to the URL (see below)
HTML 5 SEMANTIC ELEMENTS
A semantic element clearly describes its meaning to both the browser
and the developer.
<header>
<footer>
<nav>
<article>
<figure>
<aside>
<main>
<header>
The <header> element represents a container for introductory content or a
set of navigational links.
A <header> element typically contains:
one or more heading elements (<h1> - <h6>)
logo or icon
authorship information
<footer>
The <footer> element defines a footer for a document or section.
A <footer> element typically contains:
authorship information
copyright information
contact information
sitemap
back to top links
related documents
The <nav> element defines a set of navigation links.
The <aside> element defines some content aside from the content it
is placed in (like a sidebar).
<main> Specifies the main content of a document
The <figure> tag specifies self-contained content, like illustrations,
diagrams, photos, code listings, etc.
The <article> element specifies independent, self-contained content.
Forum posts
Blog posts
User comments
Product cards
Newspaper articles
HTML 5 CANVAS
The HTML <canvas> element is used to draw graphics, on the fly, via
JavaScript.
The <canvas> element is only a container for graphics. You must use
JavaScript to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and
adding images.
THE HTML5 <SVG> ELEMENT
The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and
graphic images.
HTML5 DRAG AND DROP API
Drag and drop is a very common feature. It is when you "grab" an object
and drag it to a different location.
In HTML, any element can be dragged and dropped.
HTML5 GEOLOCATION API
The HTML Geolocation API is used to locate a user's position.
Since this can compromise privacy, the position is not available unless
the user approves it.
WHAT IS HTML5 WEB STORAGE?
With web storage, web applications can store data locally within the
user's browser.
Before HTML5, application data had to be stored in cookies, included in
every server request. Web storage is more secure, and large amounts of
data can be stored locally, without affecting website performance.
Unlike cookies, the storage limit is far larger (at least 5MB) and
information is never transferred to the server.
Web storage is per origin (per domain and protocol). All pages, from one
origin, can store and access the same data.
