Frequently asked - HTML5 Interview Questions and Answers - Part 01
1. What is HTML5? And, what are the new features?
HTML is a markup language designed for processing, defining, presenting and formatting the text. The HTML5 is the latest version and has features like:
- Local Storage
- New form elements like date, time, url, range, color
- Canvas for 2D drawing
- Media elements like audio and video
- New semantic elements like,
nav,header,footer,sectionandarticle - Local storage and Session storage instead of cookies.
2. What are the new form elements in HTML5?
datalist - It specifies a list of options for input controls.
keygen - This tag defines a key-pair generator field.
output - It defines the result of a calculation.
3. What are all the new semantic elements you have used and what is their use?
article - This tag defines an article.
aside - It defines content other than the page content.
dialog - It defines a dialog box.
figure - This tag specifies content like illustrations, diagrams, photos, code listings etc.
figcaption - It is used to provide a caption for a figure element.
footer - This tag defines a footer for a document or section.
progress - This tag exhibits the progress of a task.
section - It defines a section in a document.
4. What is SVG?
SVG is the abbreviation for Scalable Vector Graphics and is recommended by W3C for creating vector graphics with support for interactivity and animation. It follows XML format. SVG graphics do not lose its quality when they are zoomed or resized.
5. What is Canvas?
Canvas is a new feature in HTML5. It provides some space or a container in the document where we can draw graphics using JavaScript. For example, it can be used to draw graphs, make photo compositions, create animations, or even do real-time video processing or rendering.
6. What is the difference between Canvas and SVG?
SVG is vector-graphics where Canvas is pixel graphics.
SVG is resolution-independent, it will not lose its quality when resized or zoomed. But Canvas is resolution-dependent. The quality will be affected when it is zoomed or resized.
SVG is written in XML format. Canvas is drawn with JavaScript.
Canvas is suitable for games while SVG is not
SVG can be modified through CSS and Script. But in Canvas, only through JavaScript.
7. What is <!DOCTYPE>? and is it mandatory?
Yes, <!DOCTYPE> is mandatory. It is used to instruct the browser about the version of our HTML document. In older versions we must include the version of the HTML we are using. In HTML5, it is very much simplified which is just <!DOCTYPE> in HTML5.
8. What is Quirk mode in HTML5? Or, what if we missed the <!DOCTYPE> element in html5?
If we omitted or not included the <!DOCTYPE> element in our document, it will went to Quirk mode. In this mode, the handling of the HTML elements is left to the browser. So the display of our contents will vary from browser to broswer and in older versions. So it is always safe to include the <!DOCTYPE> in our document.
9. What is Web workers?
A Web worker is a JavaScript code that runs in the background without affecting the page. It is used for performing computationally heavy tasks such as accessing Database or functions that require heavy memory.
Normally if some script is executing in an HTML page, the page remains unresponsive until the scripts execution stops. But an HTML5 web worker is a script (i.e. JavaScript) that keeps executing in background. At the same time user can interact with the page and will not feel any performance degradation.
HTML5 web worker normally exists in external files and used for long-running CPU intensive tasks but without affecting the User Interface or other scripts.
10. What are the limitations of HTML5 Web Worker?
HTML5 Web worker seems to be very handy in many scenarios (especially for CPU intensive tasks) but it has certain limitations. Few JavaScript objects are not accessible to HTML5 web worker as:
- parent object
- window object
- document object
11. How can we link an Email address in a web page like we do for website?
we can use mailto: in the href for email. like <a href="mailto:mail@email.com">Email Me</a>.
12. What is datalist in HTML5?
Datalist is a new form feature in HTML5 that provides autocomplete feature in an input box.
<input list="technologies">
<datalist id="technologies">
<option value="HTML5">
<option value="CSS3">
<option value="JavaScript">
<option value="Jquery">
</datalist>
13. What is Local storage and Session storage? And, what are their differences?
Both are used to store data in the user machine instead of cookies. The difference lies in their life spawn.
There is no expiration time for Local storage. It will be stored in the browser until it is deleted by the browser or it is programmatically changed by JavaScript.
Session storage is valid until the browser is open. Once the browser is closed the Session storage is cleaned up.
Local storage is good for storing non-sensitive data and Session storage is good for storing login token like that which should be removed once the browser closes.
14. What is the difference between Cookies and Local or Session storage?
Cookies can be accessible from both client and server side, whereas Local or Session storage cannot be accessible from server. Storage is limited to only 4095 bytes per cookie. In Local or Session storage, it is 5MB per domain. Cookies have expiration attached to it. It will be deleted, after the expiration. In Local storage, it is up to the browser to clean up the memory or the script to remove it programmatically. The Session storage is deleted once the browser window closed.
15. How can we add and remove data from local storage?
Data is added to local storage as “key” and “value” pair. Below sample code shows country data “India” added with key value “country”.
localStorage.setItem("country "India");
To retrieve data from local storage we need to use getItem providing the key name.
var country = localStorage.getItem("country");
If you want to store and retrieve a JavaScript object in localStorage, we can use JSON.stringify and JSON.parse:
var country = {
name: "India"
code: 91
};
//To store, change the object to string...
localStorage.setItem("country JSON.stringify(country));
// change back to object when retrieve
var localCountry = JSON.parse(localStorage.getItem("country");
To check the total items in localStorage use localStorage.length and to clear all the items in localStorage use localStorage.clear().
16. What is WebSQL?
It is also one of the new feature in HTML5. WebSQL is a structured relational database at the client browser side. It is a local RDBMS in the browser where we can fire SQL queries.
17. What is Application cache?
It is used to provide offline browsing of our app to the user. We should include a manifest file in our app to define how our app should be cached by the browser. The basic syntax is as follows:
CACHE MANIFEST
# version 1.0
CACHE :
index.html
sytle.css`
18. What is the Geolocation API and why would you use it?
The HTML5 Geolocation API allows users to share their location with a website. This is a useful feature that asks a user permission to share their latitude and longitude with the app to receive the benefits of location-aware features, such as the ability to present the landing page of the business closest to the user’s location.
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);`
It will prompt the user for permission, and if the user accepts it will return an object with coordinates object. Otherwise it will run the error function.
19. What is Web Forms 2.0? Briefly describe some of the new features.
Web Forms 2.0 extends the form features of HTML4 to include a greater degree of semantic markup. Some of these key new features are described below.
- New type attributes were added to the
<input>element, including"datetime," "month," "week," "time,"and"url"among other useful inputs. Coders can now achieve greater control over the types of information that can be input into a web form without the hassle of writing additional code. - The
<output>element was added to simplify representing the result of a calculation or script. - HTML5 added a new
"placeholder"attribute that can be used in<input>and<textarea>elements to hint to the user what can be entered into the field. - The
"required"attribute was introduced to alleviate the need for client-side validation to handle cases where a user has neglected to fill in a mandatory entry field within a web form.
20. What is Semantic HTML?
Semantic HTML is an element which express its meaning. In Semantic HTML, tags like <b> for bold, and <i>> for italic should not be used, reason being they just represent formatting, and provide no indication of meaning or structure. The semantically correct thing to do is use
<strong>Bold text</strong>
<em>Italic text</em>
These tags will have the same bold and italic effects, while demonstrating meaning and structure (emphasis in this case).
Some of the semantic tags are:
<footer>,
<header>,
<nav>,
<section>,
<article>,
<aside>,
<figure>,
<figcaption>