html

Table of Contents
1. How to implement File upload in html	4
2. What is new in HTML5 / new elements in HTML5?	5
3. Some recent developments, trends in web development?	8
4. What are some of the challenges you experienced with cross browser compatibilities?	8
5. What is the usage of canvas Element in HTML 5?	8
6. What is the difference between SVG and <Canvas>?	9
7.  Can you give an example of Canvas element how it can be used?	9
8.  What is Canvas?	9
9.  What are the New Media Elements in HTML5? is canvas element used in HTML5	9
10.  How to draw a line using canvas?	10
11.  How To Find Mouse Coordinates In HTML5 for different browsers	10
12. How to draw a circle on a canvas?	10
13.  How to draw text on a canvas?	11
14. What’s the difference between fillText() and strokeText()	11
15. What are the different types of gradients. How they can be created and filled?	11
16. How to draw an image on a canvas?	12
17. How to create an animation using HTML5 Canvas?	12
18. Which method can we use to repeat a specified element in the specified direction using HTML5 Canvas?	13
19. What are the different transformation methods used in HTML5 Canvas?	13
20.  What is the method that returns previously saved path state and attributes?	13
21. How to draw a curve on a canvas?	13
22. How to draw shapes on a canvas?	13
23. How to find context and Coordinates on a canvas?	14
24. What are the canvas elements/attributes?	14
25. What do you mean by Gradients in canvas? What are the different types of gradients?	14
26.  Script to draw a red rectangle in a canvas?	14
27.  Is there a mechanism for handling javascript concurrency in HTML5?	15
28.  What is the purpose of using webworker in HTML5?	15
28. Will Web workers degrade the performance of page?	15
29. How to check the Web workers feature is supported in browser ?	15
30. How do we start the worker ?	15
31. How the message passing takes place between Worker and parent page i.e to the Main Thread?	15
32. Is the data passed between main thread and worker thread shared?	15
33. What are the mechanism to stop the worker thread?	16
34. Is it suggested to use WebWorker for transfering large data?	16
35. What are the features accessible to web worker?	16
36. What are the features which are not accessible to web Worker ?	16
37. How is the Error handling done in the case of WebWorker?	16
38. What is the purpose of a websocket ?	16
39. What is the syntax for creating webSocket connection?	17
40. What is the sequence of event generated when a web Scoket connection is established?	17
41. What is meant by Offline mode of an application?	17
42. What are the two ways of Caching?	18
43. Is application Cache same as Web Storage?	18
44. What is Application Caching ?	18
45. What are the advantages of Application Caching?	18
46. How is application caching done?	19
47.  How is the manifest file referred in the html page?	19
48. What is ACM (Application Cache Manifest)?	19
49. What is the structure of ACM?	19
50. Can we override the caching restrictions imposed with the help of Cache manifests?	19
51. How can we access the cache?	19
51.  What are the different Cache States?	20
52.  How can we check the Cache state?	20
53. What is the mime-type of manifest?	20
54. What will happen if the manifest itself cant be retrieved?	20
55. What are the different sections in ACM ?	20
56. How can we trigger a cache refresh?	20
57. If we update the resources in server, will the cache update take place automatically?	20
58. What are the events that are fired during caching process?	21
59. What are the events generated in the case of Drag and Drop?	21
60. How will you make an object draggable ?	22
61.  What are the steps for making an object draggable?	22
62. What are the events which will be  triggered in the case of drop events?	22
63. Using Modernizr.draganddrop	23
64. What are the different dragging properties ?	23
65. How can we prevent the default behavior for drops?	23
66. How will you perform a dragging of file from a desktop to browser (Drag in)?	23
67. Is there any specific event object gets triggered in the case of data transfer?	24
68.  What are the different attributes of DataTransfer Object?	24
69. What does doctype mean?	25
70. What's new HTML 5 DocType and Charset?	25
71. What happens when failing to use doctype or using a wrong doctype?	25
72. What is Quirks mode?	25
73.  What is the difference between linking to an image, a website, and an email address?	26
74.  How to test the browser support for HTML5 for desktop?	26
75. What is pollyfill?	26
77.  How can we embed Video in HTML 5?	27
78. What are the new media elements in HTML 5 other than audio and video?	27
79. What are the new Form Elements introduced in HTML 5?	27
80. What are the deprecated Elements in HTML5 from HTML4?	28
81. List out advantages of HTML5	28
82. How many new input types you know in HTML5?(Few  expected)	28
84. List few new input attributes for form and input types introduced in HTML5?	31
85. How does autocomplete attribute work?	31
86. How does required attribute work?	31
87. How does list and data list attribute work?	31
88. How does form action attribute work?	32
89. What is form enctype attribute?	32
90. How does form method attribute?	32
91. How does Placeholder attribute work?	32
92. How to test the browser support for HTML5 for mobile?	33
93. What is the difference between the application model of HTML and HTML5	33
95. What is the use of Canvas Element in HTML5	33
96. Can you give an example of Canvas element how it can be used?	33
97.What are the New Media Elements in HTML5	34
98. What is the sessionStorage Object in html5 ? How you can create and access that?	34
99. What are new APIs added to HTML5 standard	34
100. What are some new HTML5 markup elements	34
101. What are the browsers support HTML5	35
102. What are the new form elements	35
103. How to do handling errors and Rejections in HTML5	35
104. How to use color command in HTML5	36
105. What are the new HTML5 form attributes?	36
106. How to use datalist in HTML5	36
107. What is SVG in HTML5?	37
108. What about Geolocation in HTML5	37
109. How to Displaying the Result in Map	37
110.  How to use date command in HTML5	38
111. How can we embed Audio in HTML 5	38
112. How can we embed Video in HTML 5	38
113. Difference between HTML5 Application cache and regular HTML browser cache	39
114. Name different types of graphic types	39
115. Why is HTML5 such a preferred language for mobile site	39
116. What are the input element in HTML5	39
117. What are the output elements in HTML5	40
118. How to embed SVG in HTML5	40
119. How to embed SVG circle in HTML5	41
120. How to embed SVG rectangle in HTML5	41
121. What are the standard attributes in HTML5	41
122. What are the different types of Session storage	43
123. What are the different Semantic elements in HTML5?	44








Interview Questions – HTML
1. How to implement File upload in html 

The Input FileUpload object represents an HTML <input> element with type="file".

var x = document.getElementById("myFile");

2. What is new in HTML5 / new elements in HTML5?

<article>  
A self-contained composition in a document that is independently distributable or reusable, e.g. a forum post, a magazine or newspaper article, or blog entry.

<aside>  
Defines content tangentially related to the content surrounding it, such as related reading links and glossaries, which may or not be nested within an article element.

<figcaption>  
Defines a caption for a <figure> element

<figure>  
Used in conjunction with the <figcaption> element to mark up diagrams, illustrations, photos, and code listings, etc.

<header>  
Not be confused with the <head> element, the <header> tag typically contains the section?s heading (an h1?h6 element), as well as other content, such as a navigation links, table of contents, a search form, or any relevant logos.

<footer>  
For content located at the very bottom of the web page or nearest section. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, etc. It in turn may contain entire sections, with appendices, indexes, license agreements, and other similar content.

<main>  
Delineates the main content of the body of a document or web app. As such, the main content area holds content that is directly related to or expands upon the central topic of the page. Moreover, it helps screen readers and other assistive technologies understand where the main page content begins.

<mark>  
Meant to bring the readers attention to a part of the text due to its contextual relevance.

<nav>  
Denotes a section with navigation links, either to other pages or to parts within the same page.

<section>  
Unlike the <div> tag, which is used for a myriad of purposes, not the least of which is formatting content, the <section> element demarcates a thematic grouping of content. Each section typically includes a heading element and associated content within DIVs and Paragraphs. Examples include introduction, blog entries, and contact information.

<details>  
Produces an expandable box to display additional information. The expanding/collapsing behaviour does not depend on scripting, so it should work even if JavaScript is disabled or not supported.

<summary>  
An optional element that summarizes the contents of the parent details element. As such, it may contain a description, caption, or legend.

<time>  
Contains both human-friendly contents, along with a machine-readable form of those contents in the datetime attribute. The kinds of content range from various kinds of dates, to times, time-zone offsets, and durations

Text-level Elements
<bdi>  
Defines a part of text that might be formatted in a different direction from other text

<wbr>  
Defines a possible line-break in text that is written as one long word.

New Form Elements
HTML5 introduces a number of new input types, attributes, and other elements to the HTML language.

<datalist>  
Defines pre-defined options for input controls. It works in a similar way to an autocomplete textbox.

<keygen>  
Defines a key-pair generator field (for forms). When the control's form is submitted, the private key is stored in the local keystore, and the public key is packaged and sent to the server.

<output>  
Defines the result of a calculation

<progress>  
Presents a progress bar that tracks the progress of a task.

Media Elements
As the Internet becomes a more immersive multi-media experience, browsers are now equipped to handle many media types without the need for additional plugins. A prime example is the <embed> element that has to an explosion in YouTube video sharing.

<audio>
Defines sound or music content

<embed>
Defines containers for external applications (usually a video player)

<source>
Defines sources for <video> and <audio>

<track>
Defines tracks for <video> and <audio>

<video>
Defines video or movie content

The HTML5 <!DOCTYPE> Declaration:

The <!DOCTYPE> declaration is not an HTML tag per se, but rather an instruction to the web browser about what version of HTML the page is written in. In HTML 4.01, the <!DOCTYPE> declaration referred to a DTD, because HTML 4.01 was based on SGML. Since HTML5 is no longer based on SGML, Web documents do not require a reference to a DTD. The <!DOCTYPE> declaration must be on the very first line of your HTML document, before the opening <HTML> tag.

3. Some recent developments, trends in web development?

Motion User Interface or Motion UI
New responsive design
Internet of Things (IoT) will have a huge impact
Browser based IDEs
Full-screen navigation design
Foundation for Apps

4. What are some of the challenges you experienced with cross browser compatibilities?
	



5. What is the usage of canvas Element in HTML 5? 

<canvas> is an element in HTML5 which we can use to draw graphics with the help of scripting (which is most probably JavaScript). 
This element behaves like a container for graphics and scripting will do rest of the things. We can draw images, graphs and a bit of animations etc. using <canvas> element.

<canvas id="canvas1" width="300" height="100">
</canvas>

6. What is the difference between SVG and <Canvas>?

<Canvas> is an element that manipulates two-dimensional (2D) pixels while Scalable Vector Graphics works in 2D and three-dimensional (3D) vectors. Essentially, <Canvas> is to SVG as Photoshop is to Illustrator.

7.  Can you give an example of Canvas element how it can be used?

<canvas id=“DGTCanvas” width=“500″ height=“400″>
</canvas>
<script type=“text/javascript”>
var DGTCanvas=document.getElementById(“DGTCanvas”);
var DGTText=DGTCanvas.getContext(“2d”);
DGTText.fillStyle=“#82345c”;
DGTText.fillRect(0,0,150,75);
</script>

8.  What is Canvas?

It is a Pixel based (resolutin dependent) API that enables you to dynamically generate and render charts, grphics and animation (without use of flash or silverLight). 

It is similar to tags like <div>,<a> and <table> tag, except that its contents are rendered with Javascript. It it also support fallback content means if browser that does not support the this element, you can provide an alternative image or some text what user could be enjoying.

9.  What are the New Media Elements in HTML5? is canvas element used in HTML5

<audio>, <video>, <source>, <embed>, <track>, yes we can use Canvas element in html5 like <canvas>

10.  How to draw a line using canvas?

In order to create a line using HTML5 Canvas, we can make use of the moveTo(), lineTo(), and stroke() methods. These are the basic methods which are necessary to draw a line. The other methods that can used to give a finishing touch to our line are lineWidth() and strokeStyle().

    window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    context.moveTo(100, 100);
    context.lineTo(300, 300);
    context.lineWidth = 8;
    context.strokeStyle = "#EB600F";
    context.stroke();
    };

11.  How To Find Mouse Coordinates In HTML5 for different browsers

To find the x and y coordinates of the mouse using the following two properties:

var mouseX = e.offsetX ;

var mouseY = e.offsetY ;

These properties work fine on every browser except Firefox, because the offsetX and offsetY event properties are not supported by Firefox. Use the Firefox DOM methods to get the position.

12. How to draw a circle on a canvas?

arc(x,y,r,start,stop)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

13.  How to draw text on a canvas?

To draw text on a canvas, the most important property and methods are:
•font - defines the font properties for text
•fillText(text,x,y) - Draws "filled" text on the canvas
•strokeText(text,x,y) - Draws text on the canvas (no fill)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

14. What’s the difference between fillText() and strokeText()


•fillText(text,x,y) - Draws "filled" text on the canvas
•strokeText(text,x,y) - Draws text on the canvas (no fill)


15. What are the different types of gradients. How they can be created and filled?

Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors.

There are two different types of gradients:
•createLinearGradient(x,y,x1,y1) - Creates a linear gradient
•createRadialGradient(x,y,r,x1,y1,r1) - Creates a radial/circular gradient

Once we have a gradient object, we must add two or more color stops.

The addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.

To use the gradient, set the fillStyle or strokeStyle property to the gradient, and then draw the shape, like a rectangle, text, or a line.

var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");

 // Create gradient
 var grd=ctx.createRadialGradient(75,50,5,90,60,100);
 grd.addColorStop(0,"red");
 grd.addColorStop(1,"white");

 // Fill with gradient
 ctx.fillStyle=grd;
 ctx.fillRect(10,10,150,80);

16. How to draw an image on a canvas?

To draw an image on a canvas, we will use the following method:
•drawImage(image,x,y)

var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
 var img=document.getElementById("scream");
 ctx.drawImage(img,10,10);



17. How to create an animation using HTML5 Canvas?

HTML5 canvas provides necessary methods to draw an image and erase it completely. We can take Javascript help to simulate good animation over a HTML5 canvas.

Following are the two important Javascript methods which would be used to animate an image on a canvas:

setInterval(callback, time);
 This method repeatedly executes the supplied code after a given time milliseconds.

setTimeout(callback, time);
 This method executes the supplied code only once after a given time milliseconds.

18. Which method can we use to repeat a specified element in the specified direction using HTML5 Canvas?

createPattern()

19. What are the different transformation methods used in HTML5 Canvas?

scale() --> Scales the current drawing bigger or smaller
rotate() -->  Rotates the current drawing
translate() -->  Remaps the (0,0) position on the canvas 
transform() --> Replaces the current transformation matrix for the drawing
setTransform() --> Resets the current transform to the identity matrix. Then runs transform()

20.  What is the method that returns previously saved path state and attributes?

restore()


21. How to draw a curve on a canvas?

arc() --> Creates an arc/curve (used to create circles, or parts of circles)
arcTo() --> Creates an arc/curve between two tangents
quadraticCurveTo() --> Creates a quadratic Bézier curve
bezierCurveTo() -->  Creates a cubic Bézier curve 

22. How to draw shapes on a canvas?

To draw straight lines on a canvas, we will use the following two methods:
•moveTo(x,y) defines the starting point of the line
•lineTo(x,y) defines the ending point of the line

To draw a circle on a canvas, we will use the following method:
•arc(x,y,r,start,stop)

To actually draw, we must use one of the "ink" methods, like stroke().

23. How to find context and Coordinates on a canvas?

The getContext("2d") object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, images, and more.

The canvas is a two-dimensional grid.

The upper-left corner of the canvas has coordinate (0,0)


24. What are the canvas elements/attributes?


Canvas consists of a drawable region defined in HTML code with height and width attributes. 

25. What do you mean by Gradients in canvas? What are the different types of gradients? 

Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors. There are two different types of gradients - LinearGradient and RadialGradient

26.  Script to draw a red rectangle in a canvas?

<script>
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
 ctx.fillStyle="#FF0000";
 ctx.fillRect(0,0,150,75);
 </script> 

27.  Is there a mechanism for handling javascript concurrency in HTML5?

Yes. Using Web Worker.

28.  What is the purpose of using webworker in HTML5?

Running computationally expensive tasks (scripts) in the background independently of any user interface scripts without affecting performance of page.

28. Will Web workers degrade the performance of page?

No

29. How to check the Web workers feature is supported in browser ?

Using typeof(Worker). This will return an object

30. How do we start the worker ?

Using postMessage

31. How the message passing takes place between Worker and parent page i.e to the Main Thread?

Using event model and postMessage

32. Is the data passed between main thread and worker thread shared? 

No, the data is not shared. A copy of the data is passed. Th object data is being serialised when give nto the worker thread and deserilised at the other end.

33. What are the mechanism to stop the worker thread?

worker.terminate from the main page where worker is the variable
self.close  from the javascript specifying the worker.

34. Is it suggested to use WebWorker for transfering large data?

Since the copy of the data is usually made in the case of web worker, if the data is large then making a copy will take more time. In such cases it is preferred to use Transferable Objects. In the case of Transferable objects the data is transferred from one context to another. In such cases the data in the original context is cleared and no longer accessible in the original context.

35. What are the features accessible to web worker?

All the feature are not accessible to Worker. Only a subset of javascript features are accessible.
 - navigator object 
 - location object
 - XmlHttpRequest
 - Application cache
 - importing external scripts using importScripts

36. What are the features which are not accessible to web Worker ?

The DOM, window object, document object, parent object.

37. How is the Error handling done in the case of WebWorker?

In the case of errror an ErrorEvent is generated which the developer need to handle using onError method. Errorevent data contains lineno, Filename and message property

38. What is the purpose of a websocket ?

To send realtime traffic form server to client and also from the client to server i.e bidirectional communication technology for web applications over a single TCP socket connection.

39. What is the syntax for creating webSocket connection?

var Socket = new WebSocket(url, [protocol] ); // url - web socket URL schema starting with ws

40. What is the sequence of event generated when a web Scoket connection is established?

1) open (EventHandler Socket.onopen) : This event occurs when socket connection is established.
2) message (EventHandler Socket.onmessage) : This event occurs when client receives data from server.
3)error ((EventHandler Socket.onerror) : This event occurs when there is any error in communication.
4)close (EventHandler Socket.onclose) : This event occurs when connection is closed.

41. What is meant by Offline mode of an application?
•	
•	You need to write the application in Javascript, and detect somehow whether the browser is in offline mode (simplest is to poll a server once in a while). (Edit: see comments for a better way to detect offline mode)
•	Make sure that your application consists of only static HTML, Js and CSS files (or set the caching policy manually in your script so that your browser will remember them in offline mode). Updates to the page are done through JS DOM manipulation, not through the server (a framework such as ExtJS http://www.extjs.com will help you here)
•	For storage, use a module such as PersistJS ( http://github.com/jeremydurham/persist-js ), which uses the local storage of the browser to keep track of data. When connection is restored, synchronize with the server.
•	You need to pre-cache images and other assets used, otherwse they will be unavailable in offline mode if you didn't use them before.
Again: the bulk of your app needs to be in javascript, a PHP/Ruby/Python framework will help you little if the server is unreachable. The server is probably kept as simple as possible, a REST-like AJAX API to store and load data.

42. What are the two ways of Caching? 

Data Caching and Application Caching

43. Is application Cache same as Web Storage?

No.
WebStorage is the possibility in HTML5 to store data on client side. These datas can be stored only for a particular session (SessionStorage) or for a long period (localStorage).

Whereas Application Cache is the HTML5-ability to store the whole web-app (pages, images, css, JavaScript) in the browser to make it available even if the client has no internet connection at all.

44. What is Application Caching ?

Application caching enables the web application to store its resources like HTML, CSS, Images, JavaScript pages etc. in the browser, so that the application can be made fully or partially accessible during offline or when the internet connection is not available.

45. What are the advantages of Application Caching?

Offline browsing - users can navigate your full site when they're offline
Speed - resources come straight from disk, no trip to the network.
Resilience - if your site goes down for "maintenance" your users will get the offline experience
Reduced Server load -will download only the changed files

46. How is application caching done?

With the help of manifest files. The manifest files specifies the list of resources that are to be cached in the browser.

47.  How is the manifest file referred in the html page?

By including the manifest attribute in the html tags in the page
<html manifest="developer.appcache">
 
</html>

48. What is ACM (Application Cache Manifest)?

ACM is a text file which is linked to manifest attribute in the html tag. 

49. What is the structure of ACM?

First line of manifest should start with keyword CACHE MANIFEST follwed by list of resources  to be cached.
FALLBACK Section specifies what to display when browser tries to access uncached file during offline mode.
NETWORK section specifies the resources that can be accessed only in online mode. These resources are never cached.
CACHE section specifies additional resources that needs to be cached.
SETTINGS specifies settings for appcache behaviour. Currently, the only available setting is cache mode

50. Can we override the caching restrictions imposed with the help of Cache manifests?

Yes

51. How can we access the cache?

Using  window.applicationCache object

51.  What are the different Cache States?

window.applicationCache.UNCACHED
 window.applicationCache.IDLE
 window.applicationCache.CHECKING
 window.applicationCache.DOWNLOADING
 window.applicationCache.UPDATEREADY
 window.applicationCache.OBSOLETE

52.  How can we check the Cache state?

With the help of event listeners. 

53. What is the mime-type of manifest?

text/cache-manifest

54. What will happen if the manifest itself cant be retrieved?

If the manifest file itself can't be retrieved, the cache will beignored and all cached data associated with it will be disregarded.

55. What are the different sections in ACM ?

CACHE, NETWORK, FALLBACK and SETTINGS




56. How can we trigger a cache refresh?

Either by manually clearing the assets or triggering an update.

57. If we update the resources in server, will the cache update take place automatically?

No, Updating the assets on your server will not trigger a cache update . Needs to modify the manifest file for triggering the cache update.

58. What are the events that are fired during caching process?

onchecking – the user agent is checking for updates, or attempting to download the manifest for the first time.
onnoupdate – no update to the manifest file.
ondownloading – the user agent has found an update, or attempting to download the manifest for the first time.
onprogress – the user agent is download the resources listed in the manifest.
oncached – the download is complete and the resources are cached.
onupdateready – the resources have been downloaded and they can be refreshed by calling swapCache
onobsolete – the manifest is either a 404 or 410 page, so the application cache gets deleted.
onerror – caused by a number of items. The manifest is a 404 or 410 page. The manifest could have changed while an update was being run.

59. What are the events generated in the case of Drag and Drop?

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. A listener for this event should indicate whether a drop is  allowed over this location. If there are no listeners, or the listeners perform no operations, then a drop is not allowed by default.

dragover: 
This event is fired as the mouse is moved over an element when a drag is occuring. Much of the time, the operation that occurs during a listener will be the same as the dragenter event.

dragleave:
This event is fired when the mouse leaves an element while a drag is occuring. Listeners should remove any highlighting or insertion markers used for drop feedback.

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. A listener would be responsible for retrieving the data being dragged and inserting it at the drop location.

dragend: 
Fires when the user releases the mouse button while dragging an object.

60. How will you make an object draggable ?

By setting draggable attribute of the object to true
<div id="boxA" draggable="true" 
        ondragstart="return dragStart(event)">
   <p>Drag Me</p>
</div>

61.  What are the steps for making an object draggable?

set the draggable attribute to true for that element.
Set an event listener for dragstart that stores the data being dragged.
The event listener dragstart will set the allowed effects (copy, move, link, or some combination).

62. What are the events which will be  triggered in the case of drop events?

1)dragenter event, which is used to determine whether or not the drop target is to accept the drop. If the drop is to be accepted, then this event has to be canceled.
2)dragover event, which is used to determine what feedback is to be shown to the user. If the event is canceled, then the feedback (typically the cursor) is updated based 
on the drop
3) Finally, the drop event, which allows the actual drop to be performed.

63. Using Modernizr.draganddrop

How will you detect the Drag and drop feature supported in a browser?

64. What are the different dragging properties ?

dataTransfer.effectAllowed
Restricts what 'type of drag' the user can perform on the element. It is used in the drag-and-drop processing model to initialize the dropEffect during the dragenter and dragover events. The property can be set to the following values: none, copy, copyLink, copyMove, link, linkMove, move, all, and uninitialized.
dataTransfer.dropEffect
Controls the feedback that the user is given during the dragenter and dragover events. When the user hovers over a target element, the browser's cursor will indicate what type of operation is going to take place (e.g. a copy, a move, etc.). The effect can take on one of the following values: none, copy, link, move.
e.dataTransfer.setDragImage(imgElement, x, y)

65. How can we prevent the default behavior for drops?

By calling e.stopPropagation().

66. How will you perform a dragging of file from a desktop to browser (Drag in)?

Dragging a file from the desktop is achieved by using the DnD events as other types of content. The main difference is in your drop handler. Instead of using 

dataTransfer.getData() to access the files, their data will be contained in the dataTransfer.files property


67. Is there any specific event object gets triggered in the case of data transfer?

Yes, The event.dataTransfer returns DataTransfer object. The DataTransfer object holds data about the drag and drop operation.

68.  What are the different attributes of DataTransfer Object?

dataTransfer.dropEffect [ = value ] - Returns the kind of operation that is currently selected.
This attribute can be set, to change the selected operation.The possible values are none, copy, link, and move.

dataTransfer.effectAllowed [ = value ]
Returns the kinds of operations that are to be allowed.This attribute can be set, to change the allowed operations.The possible values are none, copy, copyLink, copyMove, link, linkMove, move, all and uninitialized.

dataTransfer.types
Returns a DOMStringList listing the formats that were set in the dragstart event. In addition, if any files are being dragged, then one of the types will be the string 

"Files".

dataTransfer.clearData( [ format ] ) 
Removes the data of the specified formats. Removes all data if the argument is omitted.

dataTransfer.setData(format, data)
Adds the specified data.

data = dataTransfer.getData(format)
Returns the specified data. If there is no such data, returns the empty string.

dataTransfer.files
Returns a FileList of the files being dragged, if any.

dataTransfer.setDragImage(element, x, y) 
Uses the given element to update the drag feedback, replacing any previously specified feedback.

dataTransfer.addElement(element)
Adds the given element to the list of elements used to render the drag feedback.

69. What does doctype mean?

Doctype tells the browser which type of html is used on the webpage.Then browser use this doctype to determine how to render the page.

70. What's new HTML 5 DocType and Charset?

• As HTML 5 is now not a subset of SGML, its DocType is simplified as follows: <!doctype html> 
• HTML 5 uses UTF-8 encoding as follows: <meta charset="UTF-8">

71. What happens when failing to use doctype or using a wrong doctype?

Failing to use doctype or using a wrong doctype may load the page in quirks mode.


72. What is Quirks mode?

• Quriks mode also known as Compatibility mode.
• Modern browsers generally try to render HTML content according to the W3C recommendations. However, to provide compatibility with older web pages, and to provide additional "intuitive" functionality, all browsers support an alternative "quirks mode".
• Quriks mode is not a standard. The rendering of any page in quirks mode in different browsers may be different. 

73.  What is the difference between linking to an image, a website, and an email address?

• To link image we use image tag, specify image in quotes in source attribute.
• To link website we use anchor tag, specify link in hypertext reference attribute.  
• To link email we use anchortag, specify email in hypertext reference attribute whose value is prefixed with “mailto: brad@skilledup.com".
<img src=”HTMLrocks.jgp”></img>
<a href=”www.skilledup.com”>Skilled up</a>
<a href=” mailto: brad@skilledup.com”>Email Me</a>

74.  How to test the browser support for HTML5 for desktop?

• When request for html5test.com is sent from a browser, as response we get the current browser compatiblity with the HTML5 standards and specifications.
• To check support for other desktop browser send request to http://html5test.com/results/desktop.html
75. What is pollyfill?

• A polyfill basically is a browser fallback piece of code which makes the modern browser based functionality available in older browsers too.
• This also applies to new browsers which have not implemented the HTML5 feature yet.
• It means that HTML5 and CSS3 functionality like “placeholder”, “Canvas”, “video”, “transform” etc., can be used even on an old browser, and these are available at http://html5please.com/

76.  How can we embed Audio in HTML 5?

HTML 5 comes with a standard way of embedding audio files. Supported audio formats are MP3, Wav and Ogg.
<audio controls>
<source src="jamshed.mp3" type="audio/mpeg">
Your browser doesn't support audio embedding feature.
</audio>

77.  How can we embed Video in HTML 5?

HTML 5 defined standard way of embedding video files. Supported video formats are MP4, WebM and Ogg.
<video width="450" height="340" controls>
<source src="jamshed.mp4" type="video/mp4">
Your browser does'nt support video embedding feature.
</video>

78. What are the new media elements in HTML 5 other than audio and video?

HTML 5 has strong support for media. Other than audio and video tags, it comes with the following tags:
• <embed> acts as a container for external application. 
• <track> defines text track for media. 
• <source> is helpful for multiple media sources for audio and video.

79. What are the new Form Elements introduced in HTML 5? 

There are a number of new form elements that have been introduced in HTML 5 as follows:(few of these expected)
•datalist 
•datetime 
•output 
•keygen 
•date 
•month 
•week 
•time 
•number 
•range 
•email 
•url

80. What are the deprecated Elements in HTML5 from HTML4?

Elements that are deprecated from HTML 4 to HTML 5 are(few of these expected):
•frame 
•frameset 
•noframe 
•applet 
•big 
•center 
•basefront

81. List out advantages of HTML5

The top 5 advantages of HTML5 features:
1.  Mutuality
2.  Cleaner mark-up / Improved Code
3.  Improved Semantics
4.  Elegant forms and web apps
5.  Offline Application cache







82. How many new input types you know in HTML5?(Few  expected)

 




83. How many new markup elements you know in HTML5(Few exepected)

 












84. List few new input attributes for form and input types introduced in HTML5?

The list of new attributes are :
autocomplete
autofocus
form overrides
height and width
multiple
novalidate
pattern
placeholder
required

85. How does autocomplete attribute work?

• The autocomplete attribute helps users complete forms based on earlier input. Default state is set to on.
• The autocomplete state when set on a field overrides any autocomplete state set on the containing form element.
<input type="text" name="tracking-code" id="tracking-code" autocomplete="on">

86. How does required attribute work?
By adding it to a form field, the browser requires the user to enter data into that field before submitting the form. This replaces the basic form validation currently implemented with JavaScript.

87. How does list and data list attribute work?
• This works similar to autocomplete as you type.The list attribute enables the user to associate a list of options with a particular field& the value of the list attribute must be the same as the ID of a datalist element that resides in the same document.
• The datalist element is new in HTML5 and represents a predefined list of options for form controls.
<label>Your favorite fruit:
<datalist id="fruits">
  <option value="Blackberry">Blackberry</option>
  <option value="Blackcurrant">Blackcurrant</option>
  <option value="Blueberry">Blueberry</option>
  <!-- … -->
</datalist>
If other, please specify:
  <input type="text" name="fruit" list="fruits">
</label>

88. How does form action attribute work?
Form action specifies the file or application that will submit the form.It has the same effect as the action attribute on the form element and can only be used with a submit or image button (type="submit" or type="image").

89. What is form enctype attribute?

Formenctype details how the form data is encoded with the POST method type. It has the same effect as the enctype attribute on the form element and can only be used with a submit or image button (type="submit" or type="image"). Like <input type="submit" value="Submit" formenctype="application/x-www-form-urlencoded">      

90. How does form method attribute?

Formmethod specifies which HTTP method (GET, POST, PUT, DELETE) will be used to submit the form data. It has the same effect as the method attribute on the form element and can only be used with a submit or image button (type="submit" or type="image").

<input type="submit" value="Submit" formmethod="POST">

91. How does Placeholder attribute work?

• Placeholder attribute allows us to set placeholder text as we would currently do in HTML4 with the value attribute. It should only be used for short descriptions.
• The text is only displayed when the field is empty and hasn’t received focus. 
• Once the field receives focus (e.g., you click or tab to the field), and you begin to type, the text simply disappears. It’s very similar to the search box you see in Safari 

92. How to test the browser support for HTML5 for mobile?

• When request for html5test.com is sent from a mobile browser, as response we get the current browser compatiblity with the HTML5 standards and specifications.
• To check support for other mobile browsers send request to http://html5test.com/results/mobile.html

93. What is the difference between the application model of HTML and HTML5

There is no difference.
1. HTML5 is a continuum of HTML
 and just a souped up version of the original HTML. There has been no major paradigm shift.

95. What is the use of Canvas Element in HTML5
HTML5 Canvas element can be used to draw graphics images on a web page by using javascript

96. Can you give an example of Canvas element how it can be used?

<canvas id=“DGTCanvas” width=“500″ height=“400″>
</canvas>
<script type=“text/javascript”>
var DGTCanvas=document.getElementById(“DGTCanvas”);
var DGTText=DGTCanvas.getContext(“2d”);
DGTText.fillStyle=“#82345c”;
DGTText.fillRect(0,0,150,75);
</script>

97.What are the New Media Elements in HTML5

1.Audio-For multimedia content, sounds, music or other audio streams 2.Video-For video content, such as a movie clip or other video streams 3.Source-For media resources for media elements, defined inside video or audio
elements 4.Embed-For embedded content, such as a plug-in 5.
For text tracks used in mediaplayers

98. What is the sessionStorage Object in html5 ? How you can create and access that?
The HTML5 sessionStorage object stores the data for one session. 
The data is deleted when the user closes the browser window.<script type=“text/javascript”>
sessionStorage.name=“DGTECH”;
document.write(sessionStorage.name);
</script>
We can create and access a sessionStorage, created “name” as session.

99. What are new APIs added to HTML5 standard

1.Application Cache API
2. DataTransfer API
3. Command API
4. Constraint Validation API
5. Text Track API
6. MediaController API
7. History API

100. What are some new HTML5 markup elements

<article>, <aside>, <bdi>, <command>, <details>, <figure>, 
<figcaption>, <summary>, <header>, <footer>, <hgroup>, <mark>,
<meter>, <nav>, <progress>, <ruby>, <rt>, <section>, <time>, and <wpr>.



101. What are the browsers support 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).
102. What are the new form elements

           1.datalist- Specifies a list of pre-defined options for input controls
           2.keygen - Defines a key-pair generator field (for forms)
           3.output - Defines the result of a calculation.
103. How to do handling errors and Rejections in HTML5
The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user's location:function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }


104. How to use color command in HTML5

<input type="color" name="favcolor">

105. What are the new HTML5 form attributes?

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step

106. How to use datalist in HTML5

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>



107. What is SVG in HTML5?

SVG (Scalable Vector Graphics) is used to define vector based images on the webpage.
 Best thing about SVG graphics is that they don`t loose quality when you zoom them or resize them. 

108. What about Geolocation in HTML5 

It is used to locate user`s current position using getCurrentPosition(). Here is the sample.
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
  }
</script>

109. How to Displaying the Result in Map

To display the result in a map, you need access to a map service that can use latitude and longitude, like Google Maps:
Example
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";

document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";

110.  How to use date command in HTML5

<input type="date" name="bday">

111. How can we embed Audio in HTML 5

HTML 5 comes with a standard way of embedding audio files. Supported audio formats are
             MP3,Wav and Ogg.
     <audio controls>
     <source src="jamshed.mp3" type="audio/mpeg">
     Your browser doesn't support audio embedding feature.
      </audio>

112. How can we embed Video in HTML 5 

Same like audio, HTML 5 defined standard way of embedding video files. Supported video formats are MP4, WebM and Ogg.
     <video width="450" height="340" controls>
     <source src="jamshed.mp4" type="video/mp4">
     Your browser does'nt support video embedding feature.
     </video>


113. Difference between HTML5 Application cache and regular HTML browser cache

HTML5 Application cache can prefetch pages that have not been visited at all by user thus increasing site performance. But in regular HTML this is not available.

114. Name different types of graphic types

Raster graphics (pixels) and vector graphics (lines and curves).

115. Why is HTML5 such a preferred language for mobile site

Mobile browsers are typically designed with web-based apps in mind and typically provide the best HTML5 support, including support for video, audio, canvas, local storage, and other new features in that standard. In addition, you get some really great input field types, such as email, which tell touch-based devices which virtual keyboard to display

116. What are the input element in HTML5

1.DateTime-A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601 with the time zone set to UTC.

2.datetime-local-A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601, with no time zone information.

3 date-A date (year, month, day) encoded according to ISO 8601.
4.Month-month- A date consisting of a year and a month encoded according to ISO 8601.

4.week-A date consisting of a year and a week number encoded according to ISO 8601.

5.time- A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.

6.number-This accepts only numerical value. The step attribute specifies the precision, defaulting to 1.

7.range-The range type is used for input fields that should contain a value from a range of numbers.

8.email-This accepts only email value. This type is used for input fields that should contain an e-mail address. If you try to submit a simple text, it forces to enter only email address in email@example.com format.

9.url-This accepts only URL value. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in http://www.example.com format or in http://example.com format.
117. What are the output elements in HTML5

1.PlaceHolder-<input type="text" name="search" placeholder="search the web"/>
2.autofocus-<input type="text" name="search" autofocus/>
3.required-<input type="text" name="search" required/>
  
118. How to embed SVG in HTML5

HTML5 allows embeding SVG directly using <svg>...</svg> tag which has following simple syntax:

<svg xmlns="http://www.w3.org/2000/svg">
...    
</svg>
 
119. How to embed SVG circle in HTML5

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html>
 
120. How to embed SVG rectangle in HTML5

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Line</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="200" y2="100"
          style="stroke:red;stroke-width:2"/>
</svg>
</body>
</html>
 
121. What are the standard attributes in HTML5

1. accesskey- User Defined Specifies a keyboard shortcut to access an element. 
2. align- right, left, center Horizontally aligns tags 
3. background- URL Places an background image behind an element 
4. bgcolor -numeric, hexidecimal, RGB values Places a background color behind an element 
5. class- User Defined Classifies an element for use with Cascading Style Sheets. 
6. contenteditable true, false Specifies if the user can edit the element's content or not. 
7. contextmenu Menu id Specifies the context menu for an element. 
8. data-XXXX User Defined Custom attributes. Authors of a HTML document can define their own attributes. Must start with "data-". 
9. draggable- true,false, auto Specifies whether or not a user is allowed to drag an element. 
10. height- Numeric Value Specifies the height of tables, images, or table cells. 
11. hidden- hidden Specifies whether element should be visible or not. 
12. id- User Defined Names an element for use with Cascading Style Sheets. 
13. item- List of elements Used to group elements. 
14. itemprop- List of items Used to group items. 
15. spellcheck- true, false Specifies if the element must have it's spelling or grammar checked. 
16. style- CSS Style sheet Specifies an inline style for an element. 
17. subject -User define id Specifies the element's corresponding item. 
18. tabindex -Tab number Specifies the tab order of an element. 
19.title- User Defined "Pop-up" title for your elements. 
20. -valign- top, middle, bottom Vertically aligns tags within an HTML element. 
21. -width- Numeric Value Specifies the width of tables, images, or table cells. 





122. What are the different types of Session storage

1.Local Storage:
The Local Storage is designed for storage that spans multiple windows, and lasts beyond the current session. In particular, Web applications may wish to store megabytes of user data, such as entire user-authored documents or a user's mailbox, on the client side for performance reasons.
<!DOCTYPE HTML>
<html>
<body>

  <script type="text/javascript">
    if( localStorage.hits ){
       localStorage.hits = Number(localStorage.hits) +1;
    }else{
       localStorage.hits = 1;
    }
    document.write("Total Hits :" + localStorage.hits );
  </script>
  <p>Refresh the page to increase number of hits.</p>
  <p>Close the window and open it again and check the result.</p>

</body>
</html>

 2.Delete Web Storage:
Storing sensitive data on local machine could be dangerous and could leave a security hole.

The Session Storage Data would be deleted by the browsers immediately after the session gets terminated.

To clear a local storage setting you would need to call localStorage.remove('key'); where 'key' is the key of the value you want to remove. If you want to clear all settings, you need to call localStorage.clear() method.

<!DOCTYPE HTML>
<html>
<body>

  <script type="text/javascript">
    localStorage.clear();

    // Reset number of hits.
    if( localStorage.hits ){
       localStorage.hits = Number(localStorage.hits) +1;
    }else{
       localStorage.hits = 1;
    }
    document.write("Total Hits :" + localStorage.hits );
  </script>
  <p>Refreshing the page would not to increase hit counter.</p>
  <p>Close the window and open it again and check the result.</p>

</body>
</html>
123. What are the different Semantic elements in HTML5?

•<header>-The <header> element specifies a header for a document or section.
•<nav>-The <nav> element defines a set of navigation links
•<section>-The <section> element defines a section in a document
•<article>-The <article> element specifies independent, self-contained content.
•<aside>-The <aside> element defines some content aside from the content it is placed in (like a sidebar).
•<figcaption>-The <figcaption> tag defines a caption for a <figure> element.
•<figure>-The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc
•<footer>-The <footer> element specifies a footer for a document or section