HTML5 Interview Questions

What is the relationship between SGML,HTML , XML and HTML?

SGML (Standard generalized markup language) is a standard which tells how to specify document markup. It’s only a
Meta language which describes how a document markup should be.

HTML is a markup language which is described using SGML.

So by SGML they created DTD (Document Type Defination) which the HTML refers and needs to adhere to the same.
So you will always find “DOCTYPE” attribute at the top of HTML page which defines which DTD is used for parsing
purpose.

Now parsing SGML was a pain so they created XML to make things better. XML uses SGML. For example in SGML
you have to start and end tags but in XML you can have closing tags which close automatically (“”).

XHTML was created from XML which was used in HTML 4.0. So for example in SGML derived HTML “
” is not valid but in XHTML it’s valid. You can refer XML DTD as shown in the below code snippet.

In short SGML is the parent of every one. Older HTML utilizes SGML and HTML 4.0 uses XHTML which derived from
XML.

What is HTML 5?
HTML 5 is a new standard for HTML whose main target is to deliver everything without need to any additional
plugins like flash, Silverlight etc. It has everything from animations, videos, rich GUI etc.
HTML5 is cooperation output between World Wide Web Consortium (W3C) and the Web Hypertext Application
Technology Working Group (WHATWG).
In HTML 5 we do not need DTD why?
HTML 5 does not use SGML or XHTML it’s completely a new thing so you do not need to refer DTD. For HTML 5 you
just need to put the below doctype code which makes the browser identify that this is a HTML 5 document.

<! DOCTYPE html>

If I do not put <! DOCTYPE html> will HTML 5 work?

No, browser will not be able to identify that it’s a HTML document and HTML 5 tags will not function properly.

Which browsers support HTML 5?

Almost all browsers i.e. Safari, Chrome, Firefox, Opera, Internet Explorer support HTML 5.

How is the page structure of HTML 5 different from HTML 4 or previous

HTML?
A typical web page has headers, footers, navigation, central area and side bars. Now if we want to represent the
same in HTML 4 with proper names to the HTML section we would probably use a DIV tag.
But in HTML 5 they have made it more clear by creating element names for those sections which makes your HTML
more readable.

Below are more details of the HTML 5 elements which form the page structure.

 <header>: Represents header data of HTML.

 <footer>: Footer section of the page.
 <nav>: Navigation elements in the page.
 <article>: Self-contained content.
 <section>: Used inside article to define sections or group content in to sections.
 <aside>: Represent side bar contents of a page.

What is datalist in HTML 5?

Datalist element in HTML 5 helps to provide autocomplete feature in a textbox as shown below.

<input list="Country">
<datalist id="Country">
<option value="India">
<option value="Italy">
<option value="Iran">
<option value="Israel">
<option value="Indonesia">
</datalist>
What are the different new form element types in HTML 5?
There are 10 important new form elements introduced in HTML 5:-

1. Color.
2. Date
3. Datetime-local
4. Email
5. Time
6. Url
7. Range
8. Telephone
9. Number
10. Search

If you want to show color picker dialog box.

<input type="color" name="favcolor">

If you want to show calendar dialog box

<input type="date" name="bday">

If you want to show calendar with local time.

<input type="datetime-local" name="bdaytime">

If you want to create a HTML text with email validation we can set the type as “email”.

<input type="email" name="email">

For URL validation set the type as “url” as shown in the below HTML code.

<input type="url" name="sitename">

If you want to display textbox with number range you can set type to number.

<input type="number" name="quantity" min="1" max="5">

If you want to display a range control you can use type as range.

<input type="range" min="0" max="10" step="2" value="6">

Want to make text box as search engine box

<input type="search" name="googleengine">

What to only take time input.

<input type="time" name="usr_time">

If you want to make text box to accept telephone numbers.

<input type="tel" name="mytel">

What is output element in HTML 5?

Output element is needed when you need calculation from two inputs to be summarized in to a label. For instance
you have two textboxes( see the below figure) and you want to add numbers from these textboxes and send them
to a label.

<form onsubmit="return false" öninput="o.value = parseInt(a.value) + parseInt(b.value)">

<input name="a" type="number"> +
<input name="b" type="number"> =
<output name="o" />
</form>

What is SVG?
SVG stands for scalable vector graphics. It’s a text based graphic language which draws images using text, lines, dots
etc. This makes it lightweight and renders faster.

What is canvas in HTML 5?

Canvas is an HTML area on which you can draw graphics.
What is the difference between Canvas and SVG graphics?

SVG Canvas
Here’s it’s like draw and remember. In other Canvas is like draw and forget. Once something is drawn you
words any shape drawn by using SVG can be cannot access that pixel and manipulate it.
remembered and manipulated and browser can
render it again.
SVG is good for creating graphics like CAD Canvas is good for draw and forget scenarios like animation and
software’s where once something is drawn the games.
user wants to manipulate it.
This is slow as it needs to remember the co- This is faster as there is no intention of remembering things later.
ordinates for later manipulations.
We can have event handler associated with the Here we cannot associate event handlers with drawing objects as
drawing object. we do not have reference of them.
Resolution independent. Resolution dependent.

What are selectors in CSS?

Selectors help to select an element to which you want to apply a style. For example below is a simple style called as
‘intro” which applies red color to background of a HTML element.

<style>
.intro
{
background-color:red;
}
</style>

What is the use of column layout in CSS?

CSS column layout helps you to divide your text in to columns. For example consider the below magazine news
which is one big text but we need to divide the same in to 3 columns with a border in between. That’s where HTML 5
column layout comes to help.
To implement column layout we need to specify the following:-

 How many columns we want to divide the text in to ?

To specify number of columns we need to us column-count. “webkit” and “moz-column” are needed for chrome and
firefox respectively.

-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

 How much gap we want to give between those columns ?

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:20px;

 Do you want to draw a line between those columns , if yes how much thick ?

-moz-column-rule:4px outset #ff00ff; /* Firefox */

-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:6px outset #ff00ff;

<style>
.magazine
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:20px;

-moz-column-rule:4px outset #ff00ff; /* Firefox */

-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:6px outset #ff00ff;
}
</style>

<div class="magazine">

Your text goes here which you want to divide in to 3 columns.

</div>
Can you explain CSS box model?

CSS box model is a rectangular space around a HTML element which defines border, padding and margin.

Border: - This defines the maximum area in which the element will be contained. We can make the border visible,
invisible, define height and width etc.

Padding: - This defines the spacing between border and element.

Margin: - This defines the spacing between border and any neighboring elements.

Can you explain some text effects in CSS 3?

Shadow text effect

.specialtext
{
text-shadow: 5px 5px 5px #FF0000;
}

Word wrap effect

<style>
.breakword
{word-wrap:break-word;}
</style>

What are web workers and why do we need them ?

Let’s say the above for loop code is executed on a HTML button click. Now this method execution is synchronous. In
other words the complete browser will wait until the for loop completes. This can further lead to browser getting
freezed and unresponsive with an error message as shown in the screen below.

So if we can move this heavy for loop in a JavaScript file and run it asynchronously that means the browser does
need to wait for the loop then we can have a more responsive browser. That’s what web worker are for.

Web worker helps to execute JavaScript file asynchronously.

What are the restrictions of Web Worker thread?
Web worker threads cannot modify HTML elements, global variables and some window properties like
Window.Location. You are free to use javascript data types, XMLHttpRequest calls etc.

So how do we create a worker thread in JavaScript?

To create a worker thread we need to pass the JavaScript file name and create the worker object.

var worker = new Worker("MyHeavyProcess.js");

To send message to the worker object we need to use “PostMessage” , below is the code for the same.

worker.postMessage();

When the worker thread sends data we get it in the “OnMessage” event on the callers end.

worker.onmessage = function (e)

{
document.getElementById("txt1").value = e.data;
};

The heavy loop is in the “MyHeavyProcess.js” javascriptfile , below is the code for the same.When the JavaScript file
wants to send message he uses “postmessage” and any message sent from the caller is received in the “onmessage”
event.

var x =0
self.onmessage = function (e) {
for (i = 0; i < 1000000000; i++)
{

x = i + x;

}
self.postMessage(x);

};

How to terminate a web worker?

w.terminate();
Why do we need HTML 5 server-sent events?
One of the common requirements in web world is getting updates from the server. Take example of a stock ticker
application where the browser has to take regular updates from the server for the recent stock value.

Now to implement this kind of requirement developers normally write some kind of PULL code which goes to the
server and fetches data in certain interval. Now PULL solution is good but it makes the network chatty with lot of
calls and also it adds load on the server.

So rather than PULL it would be great if we can have some kind of PUSH solution. In simple words when the server
has updates it will send updates to the browser client. That can be achieved by using “SERVER SENT EVENTS”.

So the first thing the browser needs to do is connect to the server source which will send updates. Let’s say we have
page “stock.aspx” which sends stock updates. So to connect to the page we need to use attach to the event source
object as shown in the below code.

var source = new EventSource("stock.aspx");

We also need to attach the function where we will receive messages when server sends update. For than we need to
attach function to the “onmessage” event as shown in the below code.

source.onmessage = function (event) {

document.getElementById("result").innerHTML += event.data + "<br>";
};

Now from the server side we need to send events. Below are some lists of important events with command that
needs to be sent from the server side.

Event Command
Send data to the client. data : hello
Tell client to retry in 10 seconds retry : 10000
Raise a specific event with data event : successdata : You are logged in.
So for example if we want to send data below is the ASP.NET code for the same. Please note the content type is set
to text/event.

Response.ContentType="text/event-stream";
Response.Expires=-1;
Response.Write("data: " + DateTime.Now.ToString());
Response.Flush();

To retry after 10 second below is the command.

Response.Write("retry: 10000");

If you want to attach an event we need to use the “addEventListener” event as shown in the below code.

source.addEventListener('message', function(e) {
console.log(e.data);
}, false);

From the server side the below message will trigger the “message” function of javascript.

event: message
data : hello

What is local storage concept in HTML 5?

Many times we would like to store information about the user locally in the computer. For example let’s say user has
half-filled a long form and suddenly the internet connection breaks off. So the user would like you to store this
information locally and when the internet comes back.He would like to get that information and send it to the server
for storage.

Modern browsers have storage called as “Local storage” in which you can store this information.

How can we add and remove data from local storage?

Data is added to local storage using “key” and “value”. Below sample code shows country data “India” added with
key value “Key001”.

localStorage.setItem(“Key001”,”India”);

To retrieve data from local storage we need to use “getItem” providing the key name.

var country = localStorage.getItem(“Key001”);

You can also store JavaScript object’s in the local storage using the below code.
var country = {};
country.name = “India”;
country.code = “I001”;
localStorage.setItem(“I001”, country);
var country1 = localStorage.getItem(“I001”);

If you want to store in JSON format you can use “JSON.stringify” function as shown in the below code.

localStorage.setItem(“I001”,JSON.stringify(country));

What is the lifetime of local storage?

Local storage does not have a life time it will stay until either the user clear it from the browser or you remove it
using JavaScript code.

What is the difference between local storage and cookies?

Cookies Local storage
Client side Data accessible both at client side and Data is accessible only at the local browser side.
/ Server server side. Cookie data is sent to the Server cannot access local storage until deliberately
side. server side with every request. sent to the server via POST or GET.
Size 4095 bytes per cookie. 5 MB per domain.
Expiration Cookies have expiration attached to it. There is no expiration data. Either the end user needs
So after that expiration the cookie and to delete it from the browser or programmatically
the cookie data get’s deleted. using JavaScript we need to remove the same.

What is session storage and how can you create one?

Session storage is same like local storage but the data is valid for a session. In simple words the data is deleted as
soon as you close the browser.

To create a session storage you need to use “sessionStorage.variablename” . In the below code we have a created a
variable called as “clickcount”.

If you refresh the browser the count increases. But if you close the browser and start again the “clickcount” variable
starts from zero.

if(sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount = 0;
}
What is difference between session storage and local storage?
Local storage data persists forever but session storage is valid until the browser is open, as soon as the browser
closes the session variable resets.

What is WebSQL?
WebSQL is a structured relational database at the client browser side. It’s a local RDBMS inside the browser on which
you can fire SQL queries.

Is WebSQL a part of HTML 5 specification?

No, many people label it as HTML 5 but it’s not part of HTML 5 specification. The specification is based around
SQLite.

So how can we use WebSQL?

The first step we need to do is open the database by using “OpenDatabase” function as shown below. The first
argument is the name of the database, the next is the version, then a simple textual title and finally the size of the
database.

var db=openDatabase('dbCustomer','1.0','Customer app’, 2 * 1024 * 1024);

To execute SQL we then need to use “transaction” function and call “executeSql” function to fire SQL.

db.transaction(function (tx)
{
tx.executeSql('CREATE TABLE IF NOT EXISTS tblCust(id unique, customername)');
tx.executeSql('INSERT INTO tblcust (id, customername) VALUES(1, "shiv")');
tx.executeSql('INSERT INTO tblcust (id, customername) VALUES (2, "raju")');
}

In case you are firing “select” query you will get data is “results” collection which we can loop and display in the
HTML UI.

db.transaction(function (tx)
{
tx.executeSql('SELECT * FROM tblcust', [], function (tx, results) {
for (i = 0; i < len; i++)
{
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#customer).innerHTML += msg;
}
}, null);
});
What is application cache in HTML5?
One of the most demanded things by end user is offline browsing. In other words if internet connection is not
available page should come from browser cache i.e. offline and application cache helps you to achieve the same.

Application cache helps you to specify which files should be cached and not cached.

What are some new HTML5 markup elements?

o There are many: <article>, <aside>, <bdi>, <command>, <details>, <figure>, <figcaption>,
<summary>, <header>, <footer>, <hgroup>, <mark>, <meter>, <nav>, <progress>, <ruby>, <rt>,
<section>, <time>, and <wpr>.

What elements have disappeared?

o As mentioned above, <frame> and <frameset> have been eliminated. Other elements that are no
longer supported include: <noframe>, <applet>, <bigcenter> and <basefront>.

What are the new media-related elements in HTML5?

o HTML5 has strong support for media. There are now special <audio> and <video> tags. There are
additional A/V support tags as well: <embed> is a container for 3rd party applications. <track> is for
adding text tracks to media. <source> is useful for A/V media from multiple sources.

What are the new image elements in HTML5?

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

What are some of the major new API’s that come standard with HTML5?
o To name a few: Media API, Text Track API, Application Cache API, User Interaction, Data Transfer API,
Command API, Constraint Validation API, and the History API.

How to add video and audio in HTML5

The canvas element is used to draw graphics images on a web page by using javascript like below
Like below we can add video in html5
1. <video width=“320″ height=“240″ controls=“controls”>
2. <source src=“mysong.mp4″ type=“video/mp4″ />
3. <source src=“mysong.ogg” type=“video/ogg” />
4. </video>

And audio like this

1. <audio controls=“controls”>
2. <source src=“mysong.ogg” type=“audio/ogg” />
3. <source src=“mysong.mp3″ type=“audio/mpeg” />
4. </audio>

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>