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 HTML5, doctype 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.
</audio>
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.
</video>
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">
</canvas>
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:
datalist
datetime
output
keygen
date
month
week
time
number
range
email
url
8. What are the deprecated Elements in HTML5 from HTML4?
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 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">
.....
</html>
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″>
</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>
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
elements
<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”>
sessionStorage.name=“mySessionStorage”;
document.write(sessionStorage.name);
</script>
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">
localStorage.name="myLocalStorage";
document.write(localStorage.name);
</script>
<script type="text/javascript">
localStorage.address="The Professionals Point.";
document.write(localStorage.address);
</script>
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.
<hgroup>
<h1>Hello</h1>
<h2>How r u?</h2>
</hgroup>
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
