This presentation introduces some new features of HTML5 taking web development to the next level

1. ….for the future web
A presentation by
SREEJITH.S

2. Contents
 Introduction To HTML5
 New elements of HTML5
 New attributes
2D/3D graphics
 Video and audio
HTML 5 SVG

3. Introduction To HTML5
• Html 5 is the Next Version Of Hypertext
Markup Language(HTML 4)
• The previous version of HTML, HTML 4.01,
came in 1999
• HTML5 is a suite of tools for:
– Markup (HTML 5)
– Presentation (CSS 3)
– Interaction (DOM, Ajax, APIs)

4. Benefits of HTML5

5. New features of HTML5
• The <canvas> element for 2D drawing
• The <video> and <audio> elements for media
playback
• Support for local storage
• New content-specific elements, like <article>,
<footer>, <header>, <nav>, <section>
• New form controls, like calendar, date, time,
email, url, search

6. <canvas> element
• Used to draw graphics, on the fly, via scripting
(usually JavaScript)

7. HTML5 video
• Until now, there has not been a standard for
showing a video/movie on a web page.
• HTML5 defines a new element which specifies
a standard way to embed a video/movie on a
web page: the <video> element.
Browser Support

8. HTML5 audio
• Until now, there has not been a standard for
playing audio files on a web page.
• HTML5 defines a new element which specifies
a standard way to embed an audio file on a
web page: the <audio> element.
Browser Support

9. HTML 5 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

10. DIFFERENCE BETWEEN CANVAS AND SVG
• SVG is a language for describing 2D graphics in
XML.
• Canvas draws 2D graphics, on the fly (with a
JavaScript).
• SVG is XML based, which means that every
element is available within the SVG DOM. You
can attach JavaScript event handlers for an
element.

11. HTML5 Form Elements
• <input type="color" name="favcolor" />
• <input type="date" name="bday" />

12. <input type="datetime" name="bdaytime" />
<input type="email" name="usremail" />

13. • <input type="month" name="bdaymonth" />
• <input type="text" x-webkit-speech />
•

14. • <input type="range" name="points" min="1"
max="10" />
• <input type="search"
name="googlesearch" />
• <input type="time" name="usr_time" />

15. Removed elements
•
•
•
•
•
•
•
•
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>

16. Removed elements
•
•
•
•
<frameset>
<noframes>
<strike>
<tt>

17. So long and thanks for all the attention 
THANK YOU.!!!