Thursday, 29 August 2013

HTML5 Interview Questions and Answers for Web Designers and Developers

HTML5 Interview Questions and Answers for Web Designers and Developers

Below is the list of HTML5 basic interview questions and answers. These HTML5 interview questions and answers are meant for freshers as well as for experienced web designers and developers. So, If you going for an interview on HTML5,  I suggest you to must give a look at following HTML5 interview questions. These HTML5 interview questions are based on basic introduction to HTML5, why we need HTML5doctype of HTML5, media elements in HTML5, embedding audio and video to HTM5, canvas element in HTML5, types of storage in HTML5 like localStorage and sessionStorage, new Form elements in HTML5, deprecated elements in HTML5, HTML5 APIs etc. So lets have a look on following basic HTML5 interview questions and answers.

1. What's new HTML5 DocType and Charset?

As HTML5 is now not a subset of SGML, its DocType is simplified as follows:

<!doctype html>

And HTML5 uses UTF-8 encoding as follows:

<meta charset="UTF-8">

2. How can we embed Audio in HTML5?

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.

3. How can we embed Video in HTML5?

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.

4. What are the new media elements in HTML5 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.

5. What is the usage of canvas element in HTML5?

<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.

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

6. What are the different types of storage in HTML5?

HTML5 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?

There are a number of new form elements that have been introduced in HTML 5 as follows:


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

Elements that are deprecated from HTML 4 to HTML 5 are:


9. What are the new APIs provided by HTML5 standard?

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
and many more....

10. What is the difference between HTML 5 Application Cache and regular HTML Browser Cache?

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:

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

As compared with traditional browser caching, it's not compulsory for the user to visit website contents to be cached.

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

<canvas id=“myCanvas” width=“500″ height=“400″>
<script type=“text/javascript”>
var myCanvas=document.getElementById(“myCanvas”);
var myText=myCanvas.getContext(“2d”);

12. 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. 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 the difference between HTML and HTML5?

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 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 and attributes that will (and in Opera’s case, do) take the hassle out of scripting forms.

15. What is the  <!DOCTYPE>? Is it mandatory to use in HTML5?

The <!DOCTYPE> is an instruction to the web browser about what version of HTML the page is written in. The <!DOCTYPE> tag does not have an end tag. It is not case sensitive.

The <!DOCTYPE> declaration must be the very first thing in HTML5 document, before the <html> tag.  As In HTML 4.01, all <! DOCTYPE > declarations require a reference to a Document Type Definition (DTD), because HTML 4.01 was based on Standard Generalized Markup Language (SGML). WHERE AS HTML5 is not based on SGML, and therefore does not require a reference to a Document Type Definition (DTD).

16. What are the New Media Elements in HTML5?

New Media Elements in HTML5 are :

<audio> For multimedia content, sounds, music or other audio streams
<video> For video content, such as a movie clip or other video streams
<source> For media resources for media elements, defined inside video or audio
<embed> For embedded content, such as a plug-in
<track> For text tracks used in mediaplayers

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

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.

18. 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. We can create and access a sessionStorage, created “name” as session

<script type=“text/javascript”>“mySessionStorage”;

19.  What is the use of localStorage in HTML5?

Before HTML5 LocalStores was done with cookies. Cookies are not very good for large amounts of data, because they are passed on by every request to the server, so it was very slow and in-effective. 

In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website's performance.and The data is stored in different areas for different websites, and a website can only access data stored by itself.

And for creating localstores just need to call localStorage object like below we are storing name and address

<script type="text/javascript">"myLocalStorage";
<script type="text/javascript">
localStorage.address="The Professionals Point.";

20. How many new Markup Elements you know in HTML5?

Following are the new markup elements introduced in HTML5:

<article> Specifies independent, self-contained content, could be a news-article, blog post, forum post, or other articles which can be distributed independently from the rest of the site.

<aside> For content aside from the content it is placed in. The aside content should be related to the surrounding content

<bdi> For text that should not be bound to the text-direction of its parent elements

<command> A button, or a radiobutton, or a checkbox

<details> For describing details about a document, or parts of a document

<summary> A caption, or summary, inside the details element

<figure> For grouping a section of stand-alone content, could be a video

<figcaption> The caption of the figure section

<footer> For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information

<header> For an introduction of a document or section, could include navigation

<hgroup> For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings

<mark> For text that should be highlighted

<meter> For a measurement, used only if the maximum and minimum values are known

<nav> For a section of navigation

<progress> The state of a work in progress

<ruby> For ruby annotation (Chinese notes or characters)

<rt> For explanation of the ruby annotation

<rp> What to show browsers that do not support the ruby element

<section> For a section in a document. Such as chapters, headers, footers, or any other sections of the document

<time> For defining a time or a date, or both

<wbr> Word break. For defining a line-break opportunity.

21.  Do you know New Input Type Attribute in HTML5?

Yes, we can use below new input type Attribute in HTML5:

tel The input is of type telephone number
search The input field is a search field
url a URL
email One or more email addresses
datetime A date and/or time
date A date
month A month
week A week
time The input value is of type time
datetime-local A local date/time
number A number
range A number in a given range
color A hexadecimal color, like #82345c
placeholder Specifies a short hint that describes the expected value of an input field

22. What does a <hgroup> tag do?

The <hgroup> tag is used to group heading elements. The <hgroup> element is used to group a set of <h1> to <h6> elements.

<h2>How r u?</h2>

23. Which video formats are used for the video element?

Internet Explorer 9+: MP4
Chrome 6+: MP4, WebM, Ogg
Firefox 3.6+ : WebM, Ogg
Safari 5+ : MP4,
Opera 10.6+ : WebM,Ogg


  1. Good collection of questions with appropriate answers.

    HTML5 Training in chennai

  2. This is very helpful questions with appropriate answers.

  3. HTML5 is the next generation and fifth version of HTML technology for content-rich website development.HTML5 is the latest addition to the World Wide Web.Our experience in HTML5 Web Development empowers us to take up challenging project and deliver promising results with utmost perfection.

  4. This is really nice. Thanks for your information.

  5. thank you really it is very helpful

  6. Really this HTML5 interview Questions is help full for new candidates. Currently i am doing job change in HTML5. I learned these questions before into interview with Cognizant Solution. Thanks i got few questions from this article. Nice one. I am sharing few more interview questions here for HTML5 Developers

  7. Thanks for sharing your information.this is very useful information

    Freelance Web Designing in Hyderabad

  8. Excellent information useful information to everyone to attend interviews. Here you can get some good experience of working with Web Design

  9. Nice information about website designing and development!!! this is very useful for develop my career and i will refer this blog my students also.
    Web Designing Training in Chennai

  10. First 10 questions are copied straight away from my blog post Top 10 HTML5 Interview Questions and later from somewhere else from internet.

    Naresh didn't even change a single word.

  11. Thanks for your detailed information. You need to have attractive and informative elements in your website to impress visitors on the first site. Infographic will help you to deliver information in attractive way. PHP Course in Chennai

  12. Hi, Thanks for sharing this valuable blog. I did HTML5 course at reputed HTML5 Training Institutes in Chennai. This is reslly useful for me to make a bright future in designing field.

  13. Your blog is really awesome. Thanks for sharing this blog. If anyone want to get Best PHP Training in Chennai, please visit Fita academy located at Chennai, Velachery.

  14. Thanks for splitting your comprehension with us. It’s really useful to me & I hope it helps the people who in need of this vital information.
    PHP Training in Chennai|PHP Course in Chennai

  15. Thanks for splitting your comprehension with us. It’s really useful to me & I hope it helps the people who in need of this vital information.
    PHP Training in Chennai|PHP Course in Chennai

  16. Thanks for sharing your view to our knowledge’s, its helps me plenty keep sharing…Web design training in Chennai


  17. Thanks for sharing this valuable post to my knowledge great pleasure to be here sas training in Chennai has great scope in IT industry. It’s an application suite that can change, manage & retrieve data from the variety of origin & perform statistical analytic on it, if anyone looking for best sas training in Chennai get into FITA…
    sas course in Chennai | sas institutes in Chennai

  18. This comment has been removed by the author.

  19. Java Training

    Hi I am Martina lives in Chennai. I am a technology freak. Recently I did Java Course in Chennai at a leading Java Training Institutes in Chennai. This is really helpful for me to make a bright career in IT industry.

    Java Training in Chennai | Java Training in Velachery

  20. SEO Training in Chennai

    Thanks for sharing this information. SEO is one of the digital marketing techniques which is used to increase website traffic and organic search results. If anyone wants to get SEO Course in Chennai visit FITA Academy located at Chennai. Rated as No.1 SEO Training institute in Chennai.

    SEO Training in Chennai | SEO Training Institute in Chennai

  21. Thanks for splitting your comprehension with us. PHP- It’s an open source server-side scripting language particularly designed for web development but even it’s used as a universal programming language. Make our website as user friendly and responsive, it helps you to get more visibility &familiarity in online.
    JAVA Training in Chennai | PHP Training Chennai

  22. Aticle gives a great information about Html5.Now i ready to face any problems in html5. Thanks for giving worthful information.
    css3 Training in chennai | css3 Training chennai | css3 course in chennai | css3 course chennai

  23. Your posts is really helpful for me.Thanks for your wonderful post. I am very happy to read your post.very nice !!!html5 Training in chennai | html5 Training chennai | html5 course in chennai | html5 course chennai

  24. Thanks for sharing this valuable information to our vision. You have posted a trust worthy blog keep sharing. Web desigining Training in chennai | Web desigining Training chennai | Web desigining course in chennai | Web desigining course chennai

  25. I am following your blog from the beginning, it was so distinct & I had a chance to collect conglomeration of information that helps me a lot to improvise myself. I hope this will help many readers who are in need of this vital piece of information. Thanks for sharing & keep your blog updated.
    PHP Training Institute in Chennai
    PHP Training | Best PHP Training in Chennai | PHP Institutes in Chennai

  26. I feel satisfied to read your blog, you have been delivering a useful & unique information to our vision even you have explained the concept as deep clean without having any uncertainty, keep blogging.
    Web design training in chennai

  27. Pretty article! I found some useful information in your blog, it was awesome to read, thanks for sharing this great content to my vision, keep sharing.
    PHP Training in Chennai | PHP Training Chennai

  28. Thank you for the interview question and answer page. very useful for freshers.
    HTML5 Training in T Nagar

  29. Thanks for sharing informative article on wordpress. Being a most advanced CMS tool, wordpress help you to create sophisticated website with ease. Wordpress Training in Chennai

  30. Thanks of sharing this post…Python is the fastest growing language that helps to get your dream job in a best way, so if you wants to become a expertise in python get some training on that language.
    Python Training in Chennai|Python Training|Python Training Institutes in Chennai

  31. Thank you for postining good information about SEO.
    SaiSantoshTechnologies Offers search engine optimization and marketing services, text link brokering, directory submission service, and list of free
    internet based SEO tools.

    seo training in hyderabad

    seo training in hyderabad

  32. I am reading your post from the beginning, it was so interesting to read & I feel thanks to you for posting such a good blog, keep updates regularly
    sas online training

  33. HTML5 is the 5th revision of basic HTML. Compare HTML4 HTML5 comes with many new features. Some of the Key features are Canvas, Media Elements, Form Elements, many tags, Application Cache, Local & Session Storage. Are you a UI Developer? In this week-end going to attained a walk-in. Read all possible HTML5 interview questions with Answers