HTML 5 interview Questions And Answers

1. What is the difference between HTML and HTML5 ?

Ans: HTML5 is nothing more then upgraded version of HTML where in HTML5 supports the innovative features such as Video, Audio/mp3, date select function , placeholder , Canvas, 2D/3D Graphics, Local SQL Database added some nwe tags <header></header>, <footer></footer>, <artical></artical>, <section></section>,<nav></nav>, <time></time> etc..


2. What are the different new form element types in HTML 5?

Ans: There are some important new form elements introduced in HTML 5:-
   Ex:Color.
 Date
 Datetime-local
 Email
 Time
 Url
 Range
 Telephone
 Number
 Search

3. WHAT are some other advantages of HTML5?

 a) Cleaner markup than earlier versions of HTML
 b) Additional semantics of new elements like <header>, <nav>, and <time>
 c) New form input types such as 
   Ex:Color.
 Date
 Datetime-local
 Email
 Time
 Url
 Range
 Telephone
 Number
 Search

4. What is the use of Canvas Element in HTML5? 

Ans: HTML5 Canvas element can be used to draw graphics images on a web page by using javascript.
Ex:<canvas id=“myCanvas” width=“500″ height=“400″></canvas>
 <script type=“text/javascript”>
 var myCanvas=document.getElementById(“myCanvas”);
 var myText=myCanvas.getContext(“2d”);
 myText.fillStyle=“#82345c”;
 myText.fillRect(0,0,150,75);
 </script>

5. If I do not put <! DOCTYPE html> will HTML 5 work?

Ans: No, browser will not be able to identify that it’s a HTML document and HTML 5 tags will not function properly.

6. Which browsers support HTML 5?

Ans: Almost all browsers i.e. Safari, Chrome, Firefox, Opera, Internet Explorer support HTML 5.


7. What is SVG?

Ans: SVG stands for scalable vector graphics. It’s a text based graphic language which draws images using text, lines, dots etc. This makes it lightweight and renders faster.
Ex: <svg id="svgelem" height="[object SVGAnimatedLength]" xmlns="http://www.w3.org/2000/svg">
 <line style="stroke: rgb(255, 0, 0); stroke-width: 2px;" y2="[object SVGAnimatedLength]" x2="[object SVGAnimatedLength]" y1="[object SVGAnimatedLength]" x1="[object SVGAnimatedLength]">
 </line>

8. What is the major improvement with HTML5 in reference to Flash?

Ans:  Flash is not supported by major mobile devices such as iPad, iPhone and universal android applications. Those mobile devices have lack of support for installing flash plugins. HTML5 is supported by all the devices, apps and browser including Apple and Android products. Compared to Flash, HTML5 is very secured and protected. That eliminates major concerns that we have seen with Flash.

9. What is the sessionStorage Object in html5 ? How you can create and access that?

Ans: The HTML5 sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window. We can create and access a sessionStorage, created “name” as session
Ex: <script type=“text/javascript”>
 sessionStorage.name=“bujji”;
 document.write(sessionStorage.name);
 </script>

10. What is HTML5 Web Storage? Explain localStorage and sessionStorage.?

Ans: With HTML5, web pages can store data locally within the user’s browser.
 Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for.

 The data is stored in name/value pairs, and a web page can only access data stored by itself. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

 The difference between localStorage and sessionStorage involves the lifetime and scope of the storage.
 Data stored through localStorage is permanent: it does not expire and remains stored on the user’s computer until a web app deletes it or the user asks the browser to delete it. 

SessionStorage has the same lifetime as the top-level window or browser tab in which the script that stored it is running. When the window or tab is permanently closed, any data stored through sessionStorage is deleted.

 Both forms of storage are scoped to the document origin so that documents with different origins will never share the stored objects. But sessionStorage is also scoped on a per-window basis. If a user has two browser tabs displaying documents from the same origin, those two tabs have separate sessionStorage data: the scripts running in one tab cannot read or overwrite the data written by scripts in the other tab, even if both tabs are visiting exactly the same page and are running exactly the same scripts.

11. What are the Video And Audio tags?

Ans:    <video src="http://www.example.com/amazing_video.mp4" width="640" height="360" controls></video>
    another way:
    <video width="640" height="360" controls>
    <source src="http://www.example.com/amazing_video.mp4">
    </video>

12. What are some of the key new features in HTML5?

Ans: Key new features of HTML5 include:
 Improved support for embedding graphics, audio, and video content via the new <canvas>, <audio>, and <video> tags.
 Extensions to the JavaScript API such as geolocation and drag-and-drop as well for storage and caching
 Introduction of “web workers”.
 Several new semantic tags were also added to complement the structural logic of modern web applications. These include the <main>, <nav>, <article>, <section>, <header>, <footer>, and <aside> tags.
 New form controls, such as <calendar>, <date>, <time>, <email>, <url>, and <search>.

13. What are “web workers”?

Ans: Web workers at long last bring multi-threading to JavaScript.
A web worker is a script that runs in the background (i.e., in another thread) without the page needing to wait for it to complete. The user can continue to interact with the page while the web worker runs in the background. Workers utilize thread-like message passing to achieve parallelism.