HTML5 Interview questions

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

What were some of the key goals and motivations for the HTML5 specification?

HTML5 was designed to replace both HTML 4, XHTML, and the HTML DOM Level 2.

Major goals of the HTML specification were to:

·         Deliver rich content (graphics, movies, etc.) without the need for additional plugins (e.g., Flash).

·         Provide better semantic support for web page structure through the introduction of new structural element tags.

·         Provide a stricter parsing standard to simplify error handling, ensure more consistent cross-browser behavior, and simplify backward compatibility with documents written to older standards.

·         Provide better cross-platform support (i.e., to work well whether running on a PC, Tablet, or Smartphone).

What are some of the key new features in HTML5?

Key new features of HTML5 include:

·         Improved support for embedding graphics, audio, and video content via the new <canvas>, <audio>, and <video> tags.

·         Extensions to the JavaScript API such as geolocation and drag-and-drop as well for storage and caching.

·         Introduction of “web workers”.

·         Several new semantic tags were also added to complement the structural logic of modern web applications. These include the <main>, <nav>, <article>, <section>, <header>, <footer>, and <aside> tags.

·         New form controls, such as <calendar>, <date>, <time>, <email>, <url>, and <search>.

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.

What is datalist in HTML 5?

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

Below is the HTML code for DataList feature:-

<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

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.

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

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

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

<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 the difference between Canvas and SVG graphics?

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

<canvas height=""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.

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.

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

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

·         SVG is good for creating graphics like CAD software’s where once something is drawn the user wants to manipulate it.

·         This is slow as it needs to remember the co-ordinates for later manipulations.

·         We can have event handler associated with the drawing object.

·         Resolution independent.

Canvas

·         Canvas is like draw and forget. Once something is drawn you cannot access that pixel and manipulate it. ·         Canvas is good for draw and forget scenarios like animation and games. ·         This is faster as there is no intention of remembering things later. ·         Here we cannot associate event handlers with drawing objects as we do not have reference of them. ·         Resolution dependent.

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

HTML 5 code Rectangle code using SVG.

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

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  onload="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);

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.

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

Below is the complete code for the same.

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

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

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

.box {

    width: 200px;

    border: 10px solid #99c;

    padding: 20px;

    margin: 50px;

} 

Can you explain some text effects in CSS 3?

Shadow text effect

text-shadow: 5px 5px 5px #FF0000;

Word wrap effect

{word-wrap:break-word;}

What are web workers and why do we need them ?

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

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.

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

This can further lead to browser getting freezed and unresponsive with an error.

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

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

·         Data accessible both at client side and server side. Cookie data is sent to the server side with every request.

·         4095 bytes per cookie.

·         Cookies have expiration attached to it. So after that expiration the cookie and the cookie data get’s deleted.

Local storage

·         Data is accessible only at the local browser side. Server cannot access local storage until deliberately sent to the server via POST or GET.

·         5 MB per domain.

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

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

}); 

So how do we implement application cache in HTML 5 ?

With application cache it is easy to make an offline version of a web application, by creating a cache manifest file.

HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.

Application cache gives an application three advantages:

·         Offline browsing - users can use the application when they're offline

·         Speed - cached resources load faster

·         Reduced server load - the browser will only download updated/changed resources from the server

What is fallback in Application cache?

Fallback is the html document (and any supporting css and js files) to be served if there is no offline version found and you are not connected to the internet.

What is CSS3 box-sizing Property

The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.

Difference between Transitional and Strict doctype.

Strict : This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.

Transitional : This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.

What are the New Media Elements in HTML5?

<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
For embedded content, such as a plug-in
<track> For text tracks used in mediaplayers

WHAT ARE THE NEW APIS PROVIDED BY THE HTML 5 STANDARD? GIVE A BRIEF DESCRIPTION OF EACH?

The canvas element: Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of the canvas include building graphs, animations, games, and image composition.
• Timed media playback
• Offline storage database
• Document editing
• Drag-and-drop
• Cross-document messaging
• Browser history management
• MIME type and protocol handler registration

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>

 List out CSS3 modules 

Below are the listed major modules
• Selectors
• Box Model
• Backgrounds and Borders
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface

What new features added in CSS3 for Borders and how Browser Support it?

ollowing border futures added
• border-radius
• box-shadow
• border-image

What are pseudo classes and what are they used for?

Pseudo classes are similar to classes, but are not explicitly defined in the markup, and are used to add additional effects to selected HTML elements such as link colors, hover actions, etc.

Pseudo classes are defined by first listing the selector, followed by a colon and then pseudo-class element. E.g.,  a:link{ color: blue }, or a:visited { color: red }

Pseudo-class syntax:

selector:pseudo-class {property:value;}

Syntax for using a pseudo class within a CSS class:

selector.class:pseudo-class {property:value;}

:link, :visited, :hover, :active, :first_line are all examples of pseudo classes, used to call a specific action on an element, such as the changing of a link color after it has been visited.

How to restore the default property value using CSS?

In short, there’s no easy way to restore to default values to whatever a browser uses . The closest option is to use the ‘initial’ property value, which will restore it to the default CSS values, rather than the browser’s default styles.