Sunday 7 July 2013

HTML5 Interview Questions


The following are the frequently asked HTML5 Interview questions :

1. What is new HTML5 DocType and charset ?
Ans: HTML5 is not a subset of SGML, it's DocType is simplified as follows:

<!doctype html>

HTML5 uses UTF-8 encoding as shown below :

<meta charset="UTF-8">

2. How to append audio file in HTML5 ?
Ans: HTML 5 comes with a standard way of embedding audio files. Supported audio formats are MP3, Wav and Ogg.

 eg:

 <audio controls>
<source src="20Fingers2Brains.mp3" type="audio/mpeg">
Your browser doesn't support audio embedding feature.
</audio>
3. How to append video in HTML5 ?
Ans: HTML 5 defined standard way of embedding video files. Supported video formats are MP4, WebM and Ogg.

 eg:

 <video width="450" height="340" controls>
<source src="20Fingers2Brains.mp4" type="video/mp4">
Your browser does'nt support video embedding feature.
</video>
4. What are the new media elements introduced in HTML5 other than audio and video ? 
Ans: 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. 

5. What is use of canvas element in HTML5 ? Ans: <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 rest of the things will be done by scripting. We can draw images, graphs and a bit of animations etc. using <canvas> element. eg: <canvas id="canvas1" width="300" height="100"> </canvas>

6. What are the different types of storage in HTML5 ?
Ans: HTML 5 has the capability to store data locally. Previously, it was done with the help of cookies. The exciting thing about this storage is that it's fast as well as secure.

There are two different objects which can be used to store data:
  • localStorage object stores data for a longer period of time even if the browser is closed.
  • sessionStorage object stores data for a specific session.
7. What are the new Form elements introduced in HTML5 ?
Ans: There are a number of new form elements that have been introduced in HTML 5 as follows:
  • datalist
  • datetime
  • output
  • keygen
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url

8. What are the deprecated Elements in HTML5 from HTML4?
Ans: Elements that are deprecated from HTML 4 to HTML 5 are:
  • frame
  • frameset
  • noframe
  • applet
  • big
  • center
  • basefront

9.  What are the new APIs provided by HTML 5 standard?

Ans: HTML 5 standard comes with a number of new APIs. Few of them are as follows:

  • Media API
  • Text Track API
  • Application Cache API
  • User Interaction
  • Data Transfer API
  • Command API
  • Constraint Validation API
  • History API

10. What is the difference between HTML 5 Application Cache and regular HTML Browser Cache?                                                        Ans: One of the key features of HTML 5 is "Application Cache" that enables us to make an offline version of a web application. It allows to fetch few or all of website contents such as HTML files, CSS, images, JavaScript, etc. locally. This feature speeds up the site performance. This is achieved with the help of a manifest file defined as follows:

eg:

<!doctype html>
<html manifest="example.appcache">
.....
</html>

 11. What are the void elements in HTML5 ?
Ans: area, base, br, col, command, embed, hr, img, input,keygen, link, meta, param, source, track, wbr.

12. What is the purpose of HTML5 versus XHTML?
Ans: HTML5 is the next version of 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. Instead of using those plugins, it enables browser to serve elements such as video and audio without any additional requirements on the client machine.

13. What is 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 so that no need to do external plugin like Flash player or other library elemenents.
14. What are advantages of using HTML5 ?
Ans: Following are the few advantages of using 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 and attributes that will (and in Opera’s case, do) take the hassle out of scripting forms.
15. 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.
16. How to store data on client in HTML5?
Ans : we can store data using HTML5 Web Storage.

1.LocalStorage 

<script type="text/javascript">
localStorage.name="Raj";
document.write(localStorage.name);
</script>

2.SessionStorage
<script type="text/javascript">
sessionStorage.email="test@gmail.com";
document.write(sessionStorage.email);
</script>                                                                    

17. What does <hgroup> tag do?
Ans: hgroup tag groups together the heading elements i.e. h1-h6.
eg:
<hgroup>
<h1>Hello</h1>
<h2>How r u?</h2>
</hgroup>

18. What are the HTML5 tags and how to use them ?
Ans: Refer following link for HTML5 tags :

1 comment: