HTML5



21. Is HTML5 backward compatible with old browsers?  

Yes! HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. New features build on existing features and allow you to provide fallback content for older browsers.

It is suggested to detect support for individual HTML5 features using a few lines of JavaScript.



22. What is the purpose of HTML5 versus XHTML?  

HTML5 is the next version of HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. Its aim to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight etc.



23. What is the difference between local storage and cookies?  

Cookies Local storage
Client side / Server side. Data accessible both at client side and server side. Cookie data is sent to the server side with every request. Data is accessible only at the local browser side. Server cannot access local storage until deliberately sent to the server via POST or GET.
Size 4095 bytes per cookie. 5 MB per domain.
Expiration Cookies have expiration attached to it. So after that expiration the cookie and the cookie data get's deleted. There is no expiration data. Either the end user needs to delete it from the browser or programmatically using JavaScript we need to remove the same.



24. What are the drawbacks of cookies?  

Cookies have following drawbacks-

Cookies are included with every HTTP request, thereby slowing down your web application by transmitting the same data.
Cookies are included with every HTTP request, thereby sending data unencrypted over the internet.
Cookies are limited to about 4 KB of data . Not enough to store required data.




25. What purpose does HTML5 serve?  

HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight, Apache Pivot, and Sun JavaFX.



26. What is the difference between HTMl5 Application cache and regular HTML browser cache?  

HTML5 specification allows browsers to prefetch some or all of a website assets such as HTML files, images, CSS, JavaScript, and so on, while the client is connected. It is not necessary for the user to have accessed this content previously, for fetching this content. In other words, application cache can prefetch pages that have not been visited at all and are thereby unavailable in the regular browser cache. Prefetching files can speed up the site's performance, though you are of course using bandwidth to download those files initially.



27. WHAT ARE THE DIFFERENT TYPES OF STORAGE IN HTML5?  

HTML5 offers two new objects for storing data on the client:

LocalStorage - stores data with no time limit
1. <script type="text/javascript">
2. localStorage.lastname="ZAG";
3. document.write(localStorage.lastname);
4. </script>

SessionStorage - stores data for one session.The data is deleted when the user closes the browser window.
1. <script type="text/javascript"> 2. sessionStorage.lastname="ZAG"; 3. document.write(sessionStorage.lastname); 4. </script>



28. Describe the difference between cookies, sessionStorage, and localStorage?  

Cookies are small text files that websites place in a browser for tracking or login purposes. Meanwhile, localStorage and sessionStorage are new objects, both of which are storage specifications but vary in scope and duration. Of the two, localStorage is permanent and website-specific whereas sessionStorage only lasts as long as the duration of the longest open tab.



29. What is the concept of Application Cache in HTML5? What are its advantages?  

The Application Cache concept introduced by HTML5 means that a web application is cached, and accessible without an internet connection.

There are three advantages of Application Cache:

1. Offline browsing - Users can use the application when they're offline
2. Speed - Cached resources load faster
3. Reduced server load - The browser will only download updated/changed resources from the server



30. What is a Manifest file?  

A Manifest file is a simple text file that tells the browser what to cache and what not to cache.

There are three sections of a Manifest file:

1) CACHE MANIFEST - Files listed here are cached after they are downloaded for the first time.
2) NETWORK - Files listed here require a connection to the server, and are never cached.
3) FALLBACK - Files listed here specify fallback pages if a page is inaccessible.



31. What is Server Side Events in HTML5?  

Along with HTML5, WHATWG Web Applications 1.0 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE). Using SSE you can push DOM events continously from your web server to the visitor's browser.

The event streaming approach opens a persistent connection to the server, sending data to the client when new information is available, eliminating the need for continuous polling.

Server-sent events standardizes how we stream data from the server to the client.



32. How to utilize a server-sent event in HTML5?  

To use Server-Sent Events in a web application, you would need to add an < eventsource > element to the document.

The src attribute of < eventsource > element should point to an URL which should provide a persistent HTTP connection that sends a data stream containing the events.

The URL would point to a PHP, PERL or any Python script which would take care of sending event data consistently.



33. What are the steps of server side scripts for SSE?  

server side script should send Content-type header specifying the type text/event-stream as follows-

          print "Content-Type: text/event-stream\n\n"; 

After setting Content-Type, server side script would send an Event - tag followed by event name. Following example would send Server-Time as event name terminated by a new line character.
          print "Event: server-time\n"; 

Final step is to send event data using Data - tag which would be followed by integer of string value terminated by a new line character as follows-
          $time = localtime();
          print "Data: $time\n"; 



34. What are web sockets?  

Web Sockets is a next-generation bidirectional communication technology for web applications which operates over a single socket and is exposed via a JavaScript interface in HTML 5 compliant browsers.

Once you get a Web Socket connection with the web server, you can send data from browser to server by calling a send() method, and receive data from server to browser by an onmessage event handler.

Following is the API which creates a new WebSocket object.

var Socket = new WebSocket(url, [protocal] );
Here first argument, url, specifies the URL to which to connect. The second attribute, protocol is optional, and if present, specifies a sub-protocol that the server must support for the connection to be successful.



35. What is the purpose of Socket.readyState atribute of WebSocket?  

The readonly attribute readyState represents the state of the connection. It can have the following values:

i. A value of 0 indicates that the connection has not yet been established.

ii. A value of 1 indicates that the connection is established and communication is possible.

iii. A value of 2 indicates that the connection is going through the closing handshake.

iv. A value of 3 indicates that the connection has been closed or could not be opened.



36. What is a Web Worker?  

1. A web worker is a JavaScript which runs in the background. It exists in external files.

2. It is independent of other scripts and does not affect the performance of the page.

3. Web workers are usually used for CPU intensive tasks.



37. WHAT ARE THE NEW APIS PROVIDED BY THE HTML5 STANDARD? GIVE A BRIEF DESCRIPTION OF EACH?  

The canvas element: Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of the canvas include building graphs, animations, games, and image composition.

• Timed media playback
• Offline storage database
• Document editing
• Drag-and-drop
• Cross-document messaging
• Browser history management
• MIME type and protocol handler registration



38. What is the purpose of 'audio' tag in HTML5?  

HTML5 supports < audio > tag which is used to embed sound content in an HTML or XHTML document. The current HTML5 draft specification does not specify which audio formats browsers should support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav.

You can use < source > tag to specify media along with media type and many other attributes. An audio element allows multiple source elements and browser will use the first recognized format.



39. What are the new attributes provided in HTML5 for <form>?  

The new attributes provided in HTML5 for <form> are:

1) autocomplete
- It specifies if a form or input field should have autocomplete as on or off.
- If autocomplete is on, the browser is able to fill the values based on the values filled by the user earlier.
- autocomplete works for following input types: text, search, url, tel, email, password, datepickers, range, and color.

2) novalidate
- This is a boolean attribute.
- When present, it signifies that the form-data should not be validated when submitted.



40. WHAT IS THE STATUS OF THE DEVELOPMENT OF THE HTML5 STANDARD?  

HTML5 is being developed as the next major revision of HTML (HyperText Markup Language), the core markup language of the World Wide Web. The Web Hypertext Application Technology Working Group (WHATWG) started work on the specification in June 2004 under the name Web Applications 1.0.[1] As of March 2010[update], the specification is in the Draft Standard state at the WHATWG, and in Working Draft state at the W3C.



.Net Interview Question

PHP Interview Question

Java Interview Question

AngularJS Interview Questions