a MUST HAVE HTML5 Interview Questions and Answers - Part 1

HTML is a markup language that is used to structure and present various contents that can be rendered in a web browser. HTML5 is the latest Version/Standard of HTML – Hypertext Markup Language. In previous versions, additional plugins were used to render rich web contents but HTML5 facilitates us to render rich contents without the need for any additional plugin.
HTML5 comes with lots of new features and those are very important to prepare for a HTML5 Interview.For an Overview of the New Features in HTML5, please follow this link. Also, in one of the previous posts, we discussed in detail about Top 10 HTML5 Interview Questions. Here we will continue this series of HTML5 Interview Questions with detailed answers but will not repeat what we already have covered in previous post. So, I’ll strongly recommend to go through the other post for 10 Most Important HTML5 Interview Questions.

HTML5 Interview Questions List – Part 1

What makes HTML5 different from HTML?
What are the new Structuring elements in HTML5?
What is the usage of new HTML5 datalist element?
What is output element in HTML5?
What are the data- attributes in HTML5?
What is SVG?
What’s the difference between SVG and Canvas?
Can you please provide an example of using <canvas> element in HTML5?
What specific methods are used to draw a line on a Canvas?
How to draw an image on a Canvas in HTML5?

What makes HTML5 different from HTML?

As we discussed above that HTML5 renders rich web contents without using any additional plugins as compared to previous HTML versions/standards. HTML5 comes with a lot new things as follows:

New multimedia elements that supports for embedding audio, video and much more.
Support for interactive graphics.
New Form elements introduced in HTML5 including datalist, datetime, output, keygen, date, month, week, time, number, range, email, url etc.
Elements deprecated in HTML5 are frame, frameset, noframe, applet, big, center etc.
New APIs (Media API, Text Track API, Application Cache, User Interaction, Data Transfer API, Command API etc.) provided.
HTML5 supports on different plateform like PC, TV , Mobile devices etc.
Supporting web applications for offline data storage.

Note: Interviewer can further ask to elaborate above given new exciting features like How to embed audio, video, interactive graphics or data storage etc.? Please follow the link to HTML5 Interview Questions with Detailed Answers here.
Back to top

What are the new Structuring elements in HTML5?

Website layouts are evolving for years. Most of the websites have a lot in common with respect to structuring elements, for example, these have navigation menus, headers, footers, side bars, tabbed panels etc. In order to implement these structuring parts, we normally use <div> and <span> elements using Id and class attributes as <div id=”header”> or <div id=”footer”>. That all works fine but we end up having lots of CSS and JavaScript code.
As a result of number of Surveys and Studies done online, HTML5 introduced a number of in-built web page structuring elements as header, footer, nav etc. So, instead of <div id=”header”>, HTML5 has <header> element that really simplifies overall web page structure. Following is the list of available structuring elements in HTML5.

<header>
<footer>
<nav>
<article>
<section>
<time>
<aside>
<hgroup>
<figure>
<figcaption>

All these are self-explanatory but if you want to get details about above, please follow W3C documentation here.
Back to top

What is the usage of new HTML5 datalist element?

Auto-complete feature in a text box is very handy in many scenarios and new HTML5 datalist element provides this feature. HTML5 datalist element contains a pre-defined list of values for a textbox. Let’s see datalist element in action with the help of following example. Consider we have textbox for entering your favorite browser name and datalist that contains list of values.

<input list=”browsers”>

<datalist id=”browsers”>

<option value=”Chrome”>

<option value=”Internet Explorer”>

<option value=”Firefox”>

<option value=”Opera”>

</datalist>

What is output element in HTML5?

Output element in HTML5 defines the result of a calculation. According to WHATWG HTML specification “The output element represents the result of a calculation“.

For example, if we have two different input elements and wanted to display input values result (sum or difference) in a label, we can use an output element as in below given code.

<form onsubmit=”return false” oninput=”result.value = parseInt(x.value) – parseInt(y.value)”>
<input name=”x” type=”number” step=”any”>

–
<input name=”y” type=”number” step=”any”>

=
<output name=”result”></output>
</form>

What are the data- attributes in HTML5?

data- attributes in HTML5 facilitates us to embed custom data to an element. Consider a scenario where we have some sensitive or private data related to a particular page or application without relevant attributes or elements, data- attributes can be used to serve the purpose.

There are few constraints in using data- attribute

starts with “data-“
at least one character after “data-“
no upper case character in attribute name
attribute value must be a string

Consider the following simple HTML code:

<ul>
<li data-profession=”Scientist”>Salman</li>
<li data-profession=”Doctor”>Rehan</li>
<li data-profession=”Engineer”>Nauman</li>
<li data-profession=”IT Professional”>Zeeshan</li>
</ul>

We can easily use JavaScript to manipulate data- attribute.

Now onward in this post, we will continue exploring HTML5 Interview Questions related to Graphics.
Back to top

What is SVG?

SVG – Scalable Vector Graphics is a vector image format based on W3C SVG specification. It’s used to draw two-dimensional graphics that are:

more lightweight as compared to other image formats like jpeg and gif etc.
XML-based
support for animation
maintain better quality even if re-sized
faster rendering

In HTML5, we can easily embed SVG element in a Web Page.

<body>

<svg id=”mysvgcircle” height=”200″ xmlns=”http://www.w3.org/2000/svg”>

<circle id=”acircle” cx=”50″ cy=”50″ r=”50″ fill=”green” />

</svg>

</body>

What’s the difference between SVG and Canvas?

Although both SVG (Scalable Vector Graphics) and Canvas can be used to draw and render graphics as part of HTML page but you must understand the following before choosing any one of them.

SVG is vector-based image format. If we draw something using SVG can be manipulated and rendered again. On the other hand, Canvas manipulates pixels. So, it’s not possible to access pixels and manipulate them.
As SVG is defined in an XML, it’s possible to attach an event handler to SVG element. But we can’t attach an event to canvas because of the same above reason i.e. it just draws pixels and no manipulation possible.
SVG is independent of the resolution as compared to Canvas that is totally resolution dependent.
As SVG facilitates manipulation, so it’s slow as compared to canvas. Canvas being fast considered to be the better choice for games.

Can you please provide an example of using <canvas> element in HTML5?

As we understand that <canvas> element is new to HTML 5 and can be used to draw graphics by using scripting language i.e. JavaScript. Here is an example of using <canvas> element in HTML 5:

<canvas id=”myDrawingArea” width=”300″ height=”150″ style=”border:1px solid #000000;”>
Canvas not supported.
</canvas>

<script>

var mycanvas = document.getElementById(“myDrawingArea”);
var ctx = mycanvas.getContext(“2d”);
ctx.fillStyle=”#873389″;
ctx.fillRect(50,25,200,100);

</script>

It will draw a rectangle almost in the middle of HTML5 canvas area as see below:
Back to top

What specific methods are used to draw a line on a Canvas?

In order to draw a straight line on a Canvas in HTML5, following methods are used:

moveTo(x,y) – co-ordinates of the starting point for the line
lineTo(x,y) – co-ordinates of the ending point for the line
stroke() – line is actually drawn.

How to draw an image on a Canvas in HTML5??

In order to draw an image on a Canvas in HTML5, drawImage() method is used. It has following three different overloads:

context.drawImage(image, cx, cy)

where cx = Canvas X, Canvas Y

context.drawImage(image, ix, iy, iw, ih)

where ix = Image X, iy = Image Y, iw = Image Width, ih = Image Height

context.drawImage(image, ix, iy, iw, ih, cx, cy, cw, ch)

where ix = Image X, iy = Image Y, iw = Image Width, ih = Image Height
and cx = Canvas X, cy = Canvas Y, cw = Canvas Width, ch = Canvas Height

var mycanvas = document.getElementById(“myDrawingArea”);
var ctx = mycanvas.getContext(“2d”); var img = new Image();
img.onload = function ()
{
ctx.drawImage(img, 0, 0);
}
img.src = “images/web.png”;

Back to top

Hopefully, above list of Interview Questions about HTML5 will be helpful for the readers. We will keep exploring HTML5 Interview Questions and Answers with more practical examples and code snippets here on this Web Development blog. Keep in touch 🙂

Previous << Top 10 HTML5 Interview Questions | Next >>> a MUST HAVE HTML5 Interview Questions – Part 2

Other Related Articles:

a MUST HAVE HTML5 Interview Questions and Answers – Part 1