ADVANTAGES OF HTML5 NEW FEATURES OF HTML5

New Semantic Elements − These are like

Better Consistency=The new HTML 5 will provide <header>, <footer>, and <section>.
a far better consistency in terms of HTML code Forms 2.0 − Improvements to HTML web forms
where new attributes have been introduced for
<input> tag.
Cleaner Code=HTML 5 will allow developers to Persistent Local Storage − To achieve without
resorting to third-party plugins.
make use of a cleaner code. WebSocket − A next-generation bidirectional
communication technology for web applications.
Client side database=HTML 5 will offer a new Server-Sent Events − HTML5 introduces events
which flow from web server to the web browsers
SQL-based database API to facilitate data and they are called Server-Sent Events (SSE).
storage locally i.e. client side. Canvas − This supports a two-dimensional
drawing surface that you can program with
JavaScript.
Enhanced Accessibility=HTML 5 new elements Audio & Video − You can embed audio or video on
your webpages without resorting to third-party
improve the accessibility by making it possible
plugins.
for assistive technologies to spread out the Geolocation − Now visitors can choose to share
their physical location with your web application.
features offered by them to the users.
Microdata − This lets you create your own
vocabularies beyond HTML5 and extend your
Geo-Location=Any HTML 5 compatible browser- web pages with custom semantics.
Drag and drop − Drag and drop the items from
based application can be directly used for finding one location to another location on the same
out a location with the new HTML 5 geo-location webpage.
APIs. Html5 Semantic Page-Layout Tags
HTML5 defines several semantic page-layout
Improved Semantics=The semantic values of all tags that describe the content they contain.
web pages will be improved due to the usage of These tags make it easier for search engines and
screen readers to read and organize your
new standardize elements of HTML 5 content.
By default, several page elements are defined as
a div, including panels, data repeaters, data
Interactivity=The greatest benefit of HTML 5 is
elements, content blocks, and custom code.
that the functionality is built into the browser. Using a page element’s HTML Tag property, you
can change the tag to a semantic HTML5 block
tags, such as:
Sharper focus on Web application
Requirements=HTML 5 is designed for making Article=A section containing an independent item
of content, such as a magazine article or a forum
search front-ends easier to construct. post.
Aside=A section containing content that’s only
Superior forms=New enhanced forms are superficially related to the main page content,
such as a sidebar or advertising.
introduced with up gradations in text inputs, Details=A section containing additional details
that the user can view or hide using an
search boxes and other fields providing better
interactive widget. It can also include a summary
controls for data validation and interaction on the section.
Header=A section containing an introduction, or
page.
a group of navigation elements.
Footer=A footer section for the page or parent
Thread-like Operations=‘Web workers’ is a tool section. It typically contains information about
the parent section and appears at the end of the
that enables faster thread-like processing with section.
coordination using message-passing. Nav=A section that contains navigation
links.Section A generic section of page.
Summary=A summary or caption section for a
details section.
WORKING WITH CANVAS MEDIA:AUDIO AND VIDEO
HTML5 Audio and Video are two new media
The HTML <canvas> element is used to draw elements used to add media content like, a
graphics, on the fly, via scripting (usually song, a movie etc. Both of these elements
JavaScript).The <canvas> element is only a are used to add media content on a
container for graphics. You must use a script webpage. Chrome 3+, Firefox 3.5+, safari 4+
to actually draw the graphics.Canvas has and IE 9+ supports both Audio and
several methods for drawing paths, boxes, Video tags.
circles, text, and adding images.
Now we don't need any third party plugin,
Canvas Coordinates like flash to play audio or video in our
website. Earlier <embed> tags was used to
The HTML canvas is a two-dimensional include a flash file. Also a plugin is required
grid.The upper-left corner of the canvas has to run flash file..
the coordinates (0,0)In the previous chapter,
you saw this method used: fillRect
<audio src="sound.mp3" controls></audio>
(0,0,150,75).This means: Start at the upper-left
corner (0,0) and draw a 150x75 pixels
<video src="video.mp4" controls></video>
rectangle.
Audio Attributes
Canvas - Gradients Src=to link Audio file with playerCompulsory
Controls=To show play/pause buttons,
Gradients can be used to fill rectangles, circles, timeline and volume controller of the player.
lines, text, etc. Shapes on the canvas are not Autoplay=To play audio automatically.
limited to solid colors.There are two different types Loop=To play audio continuously even after it
of gradients: ends.
Muted=boolean attribute to mute audio.
1.createLinearGradient(x,y,x1,y1) - creates a linear controlsList =To disable download button in
gradient.2.createRadialGradient(x,y,r,x1,y1,r1) - chrome 55 onwards
creates a radial/circular gradient
Attributes in Video Tag
Text on the Canvas src=to link Video file with playerCompulsory
controls=To show play /pause buttons,
timeline, volume controller and full screen
To draw text on a canvas, the most important buttons on video player.
property and methods are: autoplay=To play video on page load.
loop =To play video continuously even after
font - defines the font properties for the it ends.
textfillText(text,x,y) - draws "filled" text on muted =To mute video.
the canvasstrokeText(text,x,y) - draws text width =Defines width of video player.
on the canvas var canvas height=Defines height of video player.
controlsList=To disable download button in
Example=Set font to 30px "Arial" and write a
chrome 55 onwards
filled text on the canvas:
poster=shows an image( jpg or png) on page
loading. Will not work if autoplay is on
var canvas =
document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.font = "30px Arial";

ctx.fillText("Hello World", 10, 50);