HTML5 interview questions and answers for experienced with example

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

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

Hide   Copy Code

<!--!doctype-->

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.

Hide   Copy Code

<!--!doctype--><!--!doctype-->

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

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.

Below is the HTML code for DataList feature:-

Hide   Copy Code

<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

Let’s understand these elements step by step.

If you want to show color picker dialog box.

Hide   Copy Code

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

If you want to show calendar dialog box.

Hide   Copy Code

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

If you want to show calendar with local time.

Hide   Copy Code

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

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

Hide   Copy Code

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

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

Hide   Copy Code

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

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

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

Hide   Copy Code

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

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

Hide   Copy Code

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

Want to make text box as search engine box.

Hide   Copy Code

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

What to only take time input.

Hide   Copy Code

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

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

Hide   Copy Code

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

Below goes the code of how to use output element with HTML 5.

Hide   Copy Code

<form onsubmit="return false"  &ouml;ninput="o.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" type="number"> +
<input name="b" type="number"> =
<output name="o" />
</form>

You can also replace “parseInt” with “valueAsNumber” for simplicity. You can also use “for” in the output element for more readability.

Hide   Copy Code

<output name="o" for="a b"></output>  

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.

Can we see a simple example of SVG using HTML 5?

Let’s say we want to display the below simple line using HTML 5 SVG.

Below is how the code of HTML 5. You can see the SVG tag which encloses the polygon tag for displaying the star image.

Hide   Copy Code

<svg id="svgelem" height="[object SVGAnimatedLength]" xmlns="http://www.w3.org/2000/svg">
<line style="stroke: rgb(255, 0, 0); stroke-width: 2px;" y2="[object SVGAnimatedLength]" x2="[object SVGAnimatedLength]" y1="[object SVGAnimatedLength]" x1="[object SVGAnimatedLength]">
</line>

What is canvas in HTML 5?

Canvas is an HTML area on which you can draw graphics.

""500"" id=""mycanvas"" solid="" style=""border:1px"width=""600""></canvas>

Get access to canvas area

To draw on the canvas area we need to first get reference of the context section. Below is the code for canvas section.

Hide   Copy Code

var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d"); 

Draw the graphic

Now once you have access to the context object we can start drawing on the context. So first call the “move” method and start from a point , use line method and draw the line and then apply stroke over it.

Hide   Copy Code

<a name="WhatisthedifferencebetweenCanvasandSVGgraphics">What is the difference between Canvas and SVG graphics? </a>

Note: - If you see the previous two questions both canvas and SVG can draw graphics on the browser. So in this question interviewer wants to know when will you use what.

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

How to draw rectangle using Canvas and SVG using HTML 5?

HTML 5 code Rectangle code using SVG.

Hide   Copy Code

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect style="fill: rgb(0, 0, 255); stroke-width: 1px; stroke: rgb(0, 0, 0);" height="[object SVGAnimatedLength]" width="[object SVGAnimatedLength]">
</rect>

HTML 5 Rectangle code using canvas.

Hide   Shrink    Copy Code

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle fill="red" stroke-width="2" stroke="black" r="[object SVGAnimatedLength]" cy="[object SVGAnimatedLength]" cx="[object SVGAnimatedLength]">

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();

<!DOCTYPE html>
<html>
<body  &ouml;nload="DrawMe();">
<svg height="[object SVGAnimatedLength]" width="[object SVGAnimatedLength]">
<circle id="circle1" cx="[object SVGAnimatedLength]" cy="[object SVGAnimatedLength]" r="[object SVGAnimatedLength]" style="stroke: none; fill: rgb(255, 0, 0);">

</body>
<script>

 var timerFunction = setInterval(DrawMe, 20);
alert("ddd");

function DrawMe()
{
var circle = document.getElementById("circle1");
var x = circle.getAttribute("cx");
var newX = 2 + parseInt(x);
if(newX > 500) 
{
            newX = 20;
}
        circle.setAttribute("cx", newX);

}
</script>
</html></circle>

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.

Hide   Copy Code

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

To apply the above “intro” style to div we can use the “class” selector as shown in the below figure.

Hide   Copy Code

<div class="intro">
<p>My name is Shivprasad koirala.</p>
<p>I write interview questions.</p>
</div> 

How can you apply CSS style using ID value?

So let’s say you have a HTML paragraph tag with id “mytext” as shown in the below snippet.

Hide   Copy Code

<p id="mytext">This is HTML interview questions.</p> 

You can create a style using “#” selector with the “id” name and apply the CSS value to the paragraph tag. So to apply style to “mytext” element we can use “#mytext” as shown in the below CSS code.

Hide   Copy Code

<style>
#mytext
{
background-color:yellow;
}
</style> 

Quick revision of some important selectors.

Set all paragraph tags back ground color to yellow.

Hide   Copy Code

P,h1
{ 
background-color:yellow;
} 

Sets all paragraph tags inside div tag to yellow background.

Hide   Copy Code

div p
{ 
background-color:yellow;
} 

Sets all paragraph tags following div tags to yellow background.

Hide   Copy Code

div+p
{ 
background-color:yellow;
} 

Sets all attribute with “target” to yellow background.

Hide   Copy Code

a[target]
{ 
background-color:yellow;
}

<a href="http://www.questpond.com">ASP.NET interview questions</a>
<a href="http://www.questpond.com" target="_blank">c# interview questions</a>
<a href="http://www.questpond.org" target="_top">.NET interview questions with answers</a> 

Set all elements to yellow background when control gets focus.

Hide   Copy Code

input:focus
{ 
background-color:yellow;
} 

Set hyperlinks according to action on links.

Hide   Copy Code

a:link    {color:green;}
a:visited {color:green;}
a:hover   {color:red;}
a:active  {color:yellow;} 

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.

Hide   Copy Code

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

Hide   Copy Code

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

Hide   Copy Code

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

Below is the complete code for the same.

Hide   Copy Code

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

You can then apply the style to the text by using the class attribute.

Hide   Copy Code

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

For instance below is a simple CSS code which defines a box with border , padding and margin values.

Hide   Copy Code

.box {
    width: 200px;
    border: 10px solid #99c;
    padding: 20px;
    margin: 50px;
} 

Now if we apply the above CSS to a DIV tag as shown in the below code , your output would be as shown in the figure below. I have created two test “Some text” and “Some other text” so that we can see how margin property functions.

Hide   Copy Code

<div align="middle" class="box">
Some text
</div>

Some other text 

Can you explain some text effects in CSS 3?

Here the interviewer is expecting you to answer one of two text effects by CSS.Below are two effects which are worth noting.
Shadow text effect

Hide   Copy Code

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

Word wrap effect

Hide   Copy Code

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

What are web workers and why do we need them ?

Consider the below heavy for loop code which runs above million times.

Hide   Copy Code

function  SomeHeavyFunction()
{
for (i = 0; i < 10000000000000; i++)
{
x = i + x;
}
} 

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.

Hide   Copy Code

<input type="button" onclick="SomeHeavyFunction();" />  

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

Hide   Copy Code

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

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

Hide   Copy Code

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

You can also store JavaScript object’s in the local storage using the below code.

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

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

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.

Hide   Copy Code

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.

Hide   Copy Code

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.

Hide   Copy Code

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);
}); 

1.0 CACHE : Login.aspx

• All manifest file starts with CACHE MANIFEST statement.
• #( hash tag) helps to provide the version of the cache file.
• CACHE command specifies which files needs to be cached.
• The content type of the manifest file should be “text/cache-manifest”.

Below is how cache manifest has been provided using ASP.NET C#.

Hide   Copy Code

Response.ContentType = "text/cache-manifest";
Response.Write("CACHE MANIFEST \n");
Response.Write("# 2012-02-21 v1.0.0 \n");
Response.Write("CACHE : \n");
Response.Write("Login.aspx \n");
Response.Flush();
Response.End(); 

One the cache manifest file is created the next thing is to provide the link of the manifest file in the HTML page as shown below.

Hide   Copy Code

<html manifest="cache.aspx"> 

When the above file runs first time it gets added in the browser application cache and in case server goes down the page is served from the application cache.

What is fallback in Application cache?

Hide   Copy Code

<a name="WhatisfallbackinApplicati>FALLBACK:
/home/ /homeoffline.html </a></pre>

<h2><a name=" whatisfallbackinapplicati=""></a>

Question: What is file extension of HTML5?
.html


Question: What is initilize date of Html5?
28 October 2014


Question: What are the new features in HTML5?
Following are new features in HTML5
Local storage.
New form controls like calendar, date, time, email, URL and search etc.
canvas element is provided for 2D drawing.
video and audio elements for media playback.
New elements are provided. For e.g. article, header, footer, nav, section.


Question: What are the various elements provided by HTML 5 for media content?
audio - It defines sound content.
video - It defines a video. 
source - This tag defines the source of video and audio.
embed - It provides a container for an external application. 
track - It defines text tracks for videoand audio.


Question: What are the new Form elements made available 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.


Question: What are the various tags provided for better structuring in HTML5?
article - This tag defines an article. 
aside - It defines content other than the page content.
bdi - This tag isolates a part of text for formatting. 
command - It defines a command button to be invoked by the user. 
details - It defines additional details that can be viewed . 
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. 
header - This tag is used to define a header for a document . 
hgroup - When there are multiple levels in a heading, it groups a set of h1 to h6 elements. 
mark - It defines highlighted text. 
meter - It defines a scalar measurement within a known range. 
nav - It defines links for navigation. 
progress - This tag exhibits the progress of a task. 
ruby - It defines a ruby annotation for East Asian typography. 
rt - It defines an explanation/pronunciation of characters for East Asian typography.
rp - This tag tells the system what to display in browsers that do not support ruby annotations. 
section - It defines a section in a document. 
summary - It provides a visible heading for a details element. 
time - This tag defines a date/time. 
wbr - This tag defines a line-break.


Question: 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


Question: 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 canvas tag. 
By default, It has no border. To get a border style attribute can be used.


Question: Differentiate between Canvas and SVG?
Canvas is resolution dependent while SVG is not. 
Canvas does not provide any support for event handlers while SVG does provide the support for event handlers. 
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.


Question: HTML 5 provides drag and drop facility. How do you make an image draggable?

<img draggable="true" />

Question: What is HTML5 Web Storage?
It store the data locally in the user's browser


Question: Differentiate between session Storage and local Storage objects?
Session Storage object stores the data only for one session while local Storage object stores the data without an expiry date.


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


Question: What is a Web Worker?
A web worker is a JavaScript which runs in the background.


Question: 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. Its aim to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight etc.


Question: WHAT are some other advantages of HTML5?
Cleaner markup than earlier versions of HTML
Additional semantics of new elements like header, nav, and time


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