This document provides an overview of HTML5, including its new elements, features for media, graphics, and APIs. It discusses the doctype declaration, elements like <header> and <nav>, new input types, audio/video support, geolocation API, drag and drop, local storage, and SVG/Canvas graphics. Both advantages and disadvantages of HTML5's backwards compatibility are mentioned.

1. U . S A I A N J A N I
11 P 6 1 A 1 2 4 0
1

2. CONTENTS
• Introduction
• Why HTML5?
– Doctype declaration
– New elements
– New features in the media
– New application programming interfaces(API’S)
– New features in the graphics
• Disadvantages
• Conclusion
2

3. INTRODUCTION
• HTML5 WHATWG First Public Draft2008
• HTML5 WHATWG Living Standard 2012
• HTML5 W3C Final Recommendation 2014
3

4. WHY HTML5?
• Doctype declaration
• New elements
• New features in the media
• New features in the graphics
• New application programming interfaces(API’S)
4

5. DOCTYPE DECLARATION
5

6. NEW ELEMENTS
• <header>
• <footer>
• <article>
• <section>
• <aside>
• <nav>
• <main>
6

7. 7

8. • <summary>
• <details>
• <dialog>
• <figure>
• <figcaption>
• <mark>
• <meter>
• <progress>
• <wbr>
8

9. METER TAG
Attribute Meaning
Form One or more form
High High value
Low Low value
Min Minimum possible value
Max Maximum possible value
Optimum Optimum value
Value Actual value
9

10. NEW INPUT TYPES
Color
Date
Datetime
Datetime-local
Month
Email
Number
Range
Search
Tel
Time
URL
Week
NEW INPUT ATTRIBUTES
Autocomplete
Autofocus
Form
Formaction
Formenctype
Formmethod
Formnovalidate
Formtarget
Height and width
Min and max
Multiple
Pattern (regexp)
Placeholder
Required
Step
10

11. EXISTING NEW
<acronym> <abbr>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>
<frameset>
<noframes>
<strike> <s>,<del>
<tt> CSS
11

12. 12

13. ADDING NEW ELEMENTS
13

14. GLOBAL ATTRIBUTES
• Accesskey
• Translate
• Style
• Class
• Dir
• Draggable
• Dropzone
• Hidden
• Id
• Data-*
14

15. • Tabindex
• Contextmenu
• Contenteditable
• Title
15

16. NEW FEATURES IN MEDIA
• VIDEO
• AUDIO
• PLUG INS
• YOU TUBE
16

17. VIDEO
• Supported without any plug-ins.
• Previously Adobe Flash Player.
• Supported formats :WebM,Ogg,MP4
17

18. ATTRIBUTE MEANING
autoplay Played automatically
autobuffer Buffers automatically
controls Adds play,pause,volume
Height and width Dimensions
loop Automatic replay
preload Loaded at a page
poster URL of the image to show
src Source of the video
18

19. AUDIO
• Supported formats: MP3,Wav,Ogg .
19

20. HTML PLUG IN
Computer programs that extend the standard functionality of a web
browser.
<object> and <embed>.
20

21. YOUTUBE VIDEOS
<iframe>
<object>
<embed>
21

22. NEW APPLICATION PROGRAMMING
INTERFACES(API’S)
• GeoLocation
• Drag / Drop
• Local Storage
• Web Workers
• SSE
22

23. GEOLOCATION
METHOD PURPOSE
getCurrentPosition() Gets the position
watchPosition() Constant updates about the
location
clearWatch() Cancels ongoing watchPosition
call
23

24. PROPERTY DESCRIPTION
coords.latitude The latitude as a decimal number
coords.longitude The longitude as a decimal number
coords.accuracy The accuracy of position
coords.altitude The altitude in meters above the mean sea level
coords.altitudeAccuracy The altitude accuracy of position
coords.heading The heading as degrees clockwise from North
coords.speed The speed in meters per second
timestamp The date/time of the response
24

25. 25

26. ERROR HANDLING
Property Type Description
code Number Contains a numeric code
for the error.
message String Contains a human-
readable description of
the error.
26

27. Code Constant Description
0 UNKNOWN_ERROR The method failed to retrieve
the location of the device due
to an unknown error.
1 PERMISSION_DENIED The method failed to retrieve
the location of the device
because the application does
not have permission to use
the Location Service.
2 POSITION_UNAVAILABLE The location of the device
could not be determined.
3 TIMEOUT The method was unable to
retrieve the location
information within the
specified maximum timeout
interval.
27

28. 28

29. DRAG AND DROP
Events Description
dragstart Fires when the user starts dragging of
the object.
dragenter Fired when the mouse is first moved over
the target element while a drag is
occuring.
dragover This event is fired as the mouse is moved
over an element when a drag is occuring.
dragleave This event is fired when the mouse
leaves an element while a drag is
occuring..
drag Fires every time the mouse is moved
while the object is being dragged.
drop The drop event is fired on the element
where the drop was occured at the end of
the drag operation
dragend Fires when the user releases the mouse
button while dragging an object. 29

30. DATA TRANSFER OBJECT
30

31. WEB STORAGE
• LOCAL STORAGE
Stored as strings always.
• SESSION STORAGE
31

32. WEB WORKERS
32

33. SSE(Server Sent Events)
• Automatic updates from the server.
Examples: Facebook/Twitter updates, stock price updates, news feeds,
sport results, etc.
Event Meaning
onmessage When a message is received
onerror When an error occurs
onopen When a connection to the server is
opened
33

34. 34

35. SVG(SCALABLE VECTOR GRAPHICS)
35

36. NEW FEATURES IN GRAPHICS
• SVG(Scalable Vector Graphics)
• Canvas
36

37. CANVAS
37

38. ADVANTAGES AND DISADVANATGES
• Browsers need to support the language.
38

39. THANK
YOU
39

40. QUERIES
40