HTML5 Interview Questions & Answers
Best HTML5 Interview Questions and Answers
Dear Readers, Welcome to HTML5 Interview Questions and Answers have been designed specially to get you acquainted with the nature of questions you may encounter during your Job interview for the subject of HTML5. These HTML5 Questions are very important for campus placement test and job interviews. As per my experience good interviewers hardly plan to ask any particular questions during your Job interview and these model questions are asked in the online technical test and interview of many IT companies.
1. What are the new features provided in HTML5?
Some of the new features provided in HTML5 are:
•It provides support for local storage
•New form controls, like calendar, date, time, email, url, search
•<canvas> element is provided to facilitate 2D drawing
•The <video> and <audio> elements are provided for media playback
•New content-specific elements are provided. For e.g. <article>, <header>, <footer>, <nav>, <section>
2. Tell us something about the new <canvas> element.
- The new <canvas> element provided by HTML 5 aids in 2D drawing.
- It uses the tag <canvas>.
- This tag helps in drawing graphics through scripting usually JavaScript.
3. What are the various elements provided by HTML 5 for media content?
<audio> and <video> elements are provided by HTML5 for media playback.
The tags used are:
a.) <audio> - It defines sound content.
b.) <video> - It defines a video or a movie.
c.) <source> - This tag defines the multiple media resources for <video> and <audio>.
d.) <embed> - It provides a container for an external application or interactive content.
e.) <track> - It defines text tracks for <video> and <audio>.
4. What are the new Form elements made available in HTML5?
The new Form elements in HTML5 provide for a better functionality. The tags provided to carry out these functions are:
a.) <datalist> - It specifies a list of options for input controls. These options are pre-defined.
b.) <keygen> - This tag defines a key-pair generator field.
c.) <output> - It defines the result of a calculation.
5. What are the various tags provided for better structuring in HTML5?
The various tags provided for better structuring in HTML 5 are:
a.) <article> - This tag defines an article.
b.) <aside> - It defines content other than the page content.
c.) <bdi> - This tag isolates a part of text for formatting in a different direction from other text.
d.) <command> - It defines a command button to be invoked by the user.
e.) <details> - It defines additional details that can be viewed or hidden by the user.
f.) <dialog> - It defines a dialog box.
g.) <figure> - This tag specifies content like illustrations, diagrams, photos, code listings, etc.
h.) <figcaption> - It is used to provide a caption for a <figure> element
i.) <footer> - This tag defines a footer for a document or section
j.) <header> - This tag is used to define a header for a document or section
k.) <hgroup> - When there are multiple levels in a heading, it groups a set of <h1> to <h6> elements.
l.) <mark> - It defines highlighted text.
m.)<meter> - It defines a scalar measurement within a known range.
n.) <nav> - It defines links for navigation
o.) <progress> - This tag exhibits the progress of a task
p.) <ruby> - It defines a ruby annotation for East Asian typography
q.) <rt> - It defines an explanation/pronunciation of characters for East Asian typography
r.) <rp> - This tag tells the system what to display in browsers that do not support ruby annotations.
s.) <section> - It defines a section in a document
t.) <summary> - It provides a visible heading for a <details> element
u.) <time> - This tag defines a date/time
v.) <wbr> - This tag defines a line-break
6. Which elements of HTML 4.01 are no more a part of HTML5?
Following elements of HTML 4.01 are no more a part of HTML 5:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
7. What is SVG?
•SVG is the abbreviation for Scalable Vector Graphics and is recommended by W3C.
•It is used to define vector-based graphics for the Web
•The graphics are defined in XML format
•An important quality of SVG graphics is that their quality is maintained even when they are zoomed or resized.
•All the element and attributes of SVG files can be animated
8. What are the advantages of SVG over other image format like JPEG or GIF?
Following are the main advantages of using SVG over other image formats:
- It is possible to scale the SVG images.
- They can be created and edited with any text editor
- The print quality of these image is high at any resolution.
- It is possible to zoom the SVG images without any degradation in the quality.
- SVG images can be searched, indexed, scripted, and compressed
9. Differentiate between Canvas and SVG.
The table below shows some important differences between Canvas and SVG:
- Canvas is resolution dependent while SVG is not.
- Canvas does not provide any support for event handlers while SVG does.
- Canvas is suitable for graphic-intensive games while SVG is not suitable for gaming.
- Canvas is suitable for small rendering areas while SVG is suitable for large rendering areas like Google maps.
10. What is a Canvas? What is the default border size of a canvas?
Canvas is a rectangular area on a HTML page, specified with the tag <canvas>.
By default, a canvas has no border. To get a border on the canvas, a style attribute is required to be used.
11. Which methods are used to draw a straight line on a Canvas?
Following methods are used to draw a straight line on a Canvas:
- moveTo(x,y) – It defines the starting co-ordinates of the line
- lineTo(x,y) – It defines the ending co-ordinates of the line
- The actual line is drawn with the help of a method like stroke()
12. What are gradients in Canvas used for? What are their different types?
Gradients in canvas are used to fill rectangles, circles, lines etc.
The gradients in Canvas are of two types:
- createLinearGradient(x,y,x1,y1) – It creates a linear gradient
- createRadialGradient(x,y,r,x1,y1,r1) – It creates a radial/circular gradient
13. Which method is used to draw an image on the canvas?
drawImage(image,x,y) method is used to draw an image on the canvas.
14. HTML 5 provides drag and drop facility. How do you make an image draggable?
To make an image draggable, the draggable attribute is set to true:
<img draggable="true">
15. Can HTML 5 get the geographical position of a user?
- Yes, HTML 5 can get the location of a user with the use of Geolocation API.
- Use getCurrentPosition() method to get the user’s current position.
16. What are the audio tags provided by HTML 5?
HTML 5 provides following audio tags:
<audio> - Defines sound content
<source> - Defines multiple media resources for media elements, such as <video> and <audio>
17. What are the new input types provided by HTML 5 for forms?
Following are the important, new input types for forms provided by HTML 5:
- color – used for fields that should contain colour.
- date – allows the user to select a date
- datetime - allows the user to select a date and time (with time zone)
- datetime-local - allows the user to select a date and time (without time zone)
- email - used for input fields that should contain an e-mail address
- month - allows the user to select a month and year.
- number - used for input fields that should contain a numeric value. Restrictions on type of numbers accepted can be set.
- range - used for input fields that should contain a value from a range of numbers. Restrictions on type of numbers accepted can be set here as well.
- search - used for search fields
- tel - defines a field for entering a telephone number
- time - allows the user to select a time
- url - used for input fields that should contain a URL address
- week - allows the user to select a week and year
18. What is HTML5 Web Storage?
With HTML5, it is possible for the web pages to store the data locally in the user's browser. This web storage is much faster and secured than the cookies. Also, a larger amount of data can be stored without causing any adverse effect to the performance of the website.
The data here is not included with every server request. It is used ONLY when it is asked for. It is only that particular web page that can access the data stored by itself.
19. Differentiate between localStorage and sessionStorage objects.
- localStorage object stores the data without an expiry date while sessionStorage object stores the data only for one session.
- With localStorage object, data will not be deleted when the browser window is closed while the data is deleted when the browser window closes with sessionStorage objects.
20. 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
21. 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:
i.) CACHE MANIFEST - Files listed here are cached after they are downloaded for the first time.
ii.) NETWORK - Files listed here require a connection to the server, and are never cached
iii.) FALLBACK - Files listed here specify fallback pages if a page is inaccessible
22. What is a Web Worker?
- A web worker is a JavaScript which runs in the background. It exists in external files.
- It is independent of other scripts and does not affect the performance of the page.
- Web workers are usually used for CPU intensive tasks.
23. Which JavaScript objects are not accessible to web worker?
Following JavaScript objects are not accessible to web worker:
•The window object
•The document object
•The parent object
24. What are the new attributes provided in HTML5 for <form>?
The new attributes provided in HTML5 for <form> are:
a.) 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.
b.) novalidate
- This is a boolean attribute.
- When present, it signifies that the form-data should not be validated when submitted.
25. What are the new attributes provided in HTML5 for <input>?
Following are the new attributes provided in HTML5 for <input>
a.) autofocus:
- This is a Boolean attribute.
- When present, it means that an <input> element should automatically get focus when the page is loaded.
b.) form:
- This attribute specifies one or more forms an <input> element belongs to.
c.) formaction:
- This attribute specifies the URL of a file that will process the input control when the form is submitted.
- This attribute is used with type="submit" and type="image".
- It overrides the action attribute of the <form> element.
d.) formenctype:
- This attribute specifies how the form-data should be encoded when submitting it to the server.
- It is used with type="submit" and type="image".
- It overrides the enctype attribute of the <form> element.
e.) formmethod
- It defines the HTTP method for sending form-data to the action URL.
- It is used with type="submit" and type="image".
- It overrides the method attribute of the <form> element.
f.) formnovalidate
- It is a boolean attribute.
- It specifies that the <input> element should not be validated when submitted.
- It is used with type="submit"
- It overrides the novalidate attribute of the <form> element.
g.) formtarget
- It specifies a name or a keyword that indicates where to display the response that is received after submitting the form.
- It is used with type="submit" and type="image".
h.) height and width
- It specifies the height and width of an <input> element.
- It is used only with <input type="image">
i.) list
- It refers to a <datalist> element which contains pre-defined options for an <input> element.
j.) min and max
- It specifies the minimum and maximum value for an <input> element.
- It works with the following input types: number, range, date, datetime, datetime-local, month, time and week.
k.) Multiple
- It is a boolean attribute.
- It specifies that the user is allowed to enter more than one value in the <input> element.
- It works with the following input types: email, and file.
l.) pattern
- It specifies a regular expression that the <input> element's value is checked against.
- It works with the following input types: text, search, url, tel, email, and password.
m.) placeholder
- It specifies a short hint that describes the expected value of an input field.
- It works with the following input types: text, search, url, tel, email, and password.
n.) required
- It is a boolean attribute.
- It specifies that an input field must be filled out before submitting the form.
o.) step
- It specifies the legal number intervals for an <input> element.
- It works with the following input types: number, range, date, datetime, datetime-local, month, time and week.
26. What’s new HTML 5 DocType and Charset?
As HTML 5 is now not subset of SGML so its DocType is simplified as follows:
<!doctype html>
And HTML 5 uses UTF-8 encoding as follows:
<meta charset=”UTF-8?>
27. How can we embed Audio in HTML 5?
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 does’nt support audio embedding feature.
</audio>
28. How can we embed Video in HTML 5?
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>
29. What are the new media element in HTML 5 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.
30. What are the different types of storage in HTML 5?
HTML 5 has the capability to store data locally. Previously it was done with the help of cookies.
Exciting thing about this storage is that its 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.
31. What are the new Form Elements introduced in HTML 5?
There are a number of new form elements has been introduced in HTML 5 as follows:
datalist
datetime
output
keygen
date
month
week
time
number
range
url
32. 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
33. What are the new APIs provided by HTML 5 standard?
HTML 5 standard comes with a number of new APIs. Few of it 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….
34. What is the difference between HTML 5 Application Cache and regular HTML Browser Cache?
One of the key feature 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, Its not compulsory for the user to visit website
contents to be cached.
35. What is the use of Canvas Element in HTML5?
HTML5 Canvas element can be used to draw graphics images on a web page by using javascript.
36. 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.
37. 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.
38. 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.
39. 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=“DGTECH”;
document.write(sessionStorage.name);
</script>
40. What are the new image elements in HTML5?
Canvas and WebGL. <Canvas> is a new element that acts as a container for graphical elements like images and graphics. Coupled with JavaScript, it supports 2D graphics. WebGL stands for Web Graphics Language, a free cross-platform API that is used for generating 3D graphics in web browsers.
41. What is the difference between HTML5 interaction in Sencha and Twitter/Bootstrap?
Sencha and Twitter/Bootstrap are both HTML development frameworks that integrate HTML5, CSS3, and JavaScript. The major difference is that in Sencha, the three languages are all comingled together in code, whereas in Bootstrap, HTML and CSS and decoupled.
42. What purpose do Work Workers serve and what are some of their benefits?
Web Workers are background scripts that do not interfere with the user interface or user interactions on a webpage, allowing HTML to render uninterrupted while JavaScript works in the background.
43. 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.
44. What are some new input attributes in HTML5?
There are many new form elements including: datalist, datetime, output, keygen, date, month, week, time, number, range, email, and url.
45. What is the difference between SVG and <Canvas>?
<Canvas> is an element that manipulates two-dimensional (2D) pixels while Scalable Vector Graphics works in 2D and three-dimensional (3D) vectors. Essentially, <Canvas> is to SVG as Photoshop is to Illustrator.
46. What are some new HTML5 markup elements?
There are many: <article>, <aside>, <bdi>, <command>, <details>, <figure>, <figcaption>, <summary>, <header>, <footer>, <hgroup>, <mark>, <meter>, <nav>, <progress>, <ruby>, <rt>, <section>, <time>, and <wpr>.
47. What is the difference between the application model of HTML and HTML5?
Trick question, there is no difference. HTML5 is a continuum of HTML and just a souped up version of the original HTML. There has been no major paradigm shift.
48. What is the difference between <div> and <frame>?
A <div> is a generic container element for grouping and styling, whereas a <frame> creates divisions within a web page and should be used within the <frameset> tag. The use of <frame> and <frameset> are no longer popular and are now being replaced with the more flexible <iframe>, which has become popular for embedding foreign elements (ie. Youtube videos) into a page.
49. My hyperlink or image is not displaying correctly, what is wrong with it?
It could be any number of things, but the most common mistakes are leaving out a tag bracket or quote missing for href, src, or alt text may be the issue. You should also verify the link itself.
50. What are the limitations when serving XHTML pages?
Perhaps the biggest issue is the poor browser support XHTML currently enjoys. Internet Explorer and a number of other user agents cannot parse XHTML as XML. Thus, it is not the extensible language it was promised to be. There are many other issues. Take your pick.