Scribd
Upload
21 views

Html5 Interview Quesions-1

Html5 Interview Quesions

Uploaded by

RAVINDER B
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

Html5 Interview Quesions-1

Html5 Interview Quesions

Uploaded by

RAVINDER B
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

HTML5 Interview Questions and Answers

1) Which browsers support HTML5?

The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support
many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5
functionality. And the mobile web browsers which come pre-installed on iPhones, iPads, and
Android phones all have excellent support for HTML5.

2) Name two new tags included in the HTML 5?

<aside>

Defines content tangentially related to the content surrounding it, such as related reading links
and glossaries, which may or not be nested within an article element.

<figcaption>

Defines a caption for a <figure> element.

3) Difference between HTML4 and HTML5?

HTML4 HTML5
DOCTYPE declaration is tool lengthy and refers
DOCTYPE declaration is simple online.
to the external resource
No multimedia supporting tags. And third-party Dedicated tags for multimedia like <audio>
plugins are used. and <video>
Applet tag that was used to display the browsers Object tag was added to display applet type
was removed items
The new tag <abbr> was introduced in place
Acroynmn tag has been removed
of the acronym tag
HTML5 is not compatible with all the
It is compatible with all most all web browsers
browsers

4) List a few input type attributes that are new in HTML5?


An input tag can take some attributes based on the requirement. It creates a textbox that takes
text/number/special characters into it.

 Datetime: Gives a datetime accepted textbox.


 Placeholder: Places an editable text in the textbox.
 Number: Takes only numbers and no text and special characters.
 Tel: Takes inputs like a telephone number.
 Email: Takes text with email format.

5) What are the new FORM elements which are available in HTML5?

HTML5 has the following new form elements:

 <datalist>
 <keygen>
 <output>

6) Explain the two web storage's in HTML5?

There are two types of web storage's are present. They are as follows:

1) Local Storage
2) Session Storage

7) List the API’s available in HTML5?

The available API’s in HTML is as follows:

 DOM Level 1
 DOM Level 2 Core
 DOM Level 2 HTML
 DOM Level 3

8) What is the minimum number of HTML5 tags that are required to create a
Web page?

Minimum 3 HTML5 tags are required to create a Web page, such as (<HEAD>, <BODY>,
<HTML>).
9) How do you write a copyright symbol on a web browser page?

In order to write a copyright symbol, we need to type © or © in an HTML5 file.

10) What is the use of MathML Element in HTML5?

The word MathML (Mathematical Markup Language) is a markup language, that is used to show
the scientific and mathematical expression on the web. And it is a form of XML to describe the
Math notation.

Example

<!doctype html>
<html>
<head>
<meta charset = “UTF-8”>
<title> MathMl Example </title>
</head>
<body>
<math xmlns=<a
href="http://www.w3.org/1998/Math/MathML">http://www.w3.org/1998/Math/MathML<
/a>”>
<mrow>
<mrow>
<msup>
<mi> a </mi>
<mn> 2 </mn>
</msup>
<mo> + </mo>
<mrow>
<mn> 2 </mn>
<mo> </mo>
<mi> b </mi>
</mrow>
<mo> + </mo>
<mn> 5 </mn>
</mrow>
<mo> = </mo>
<mn> 0 </mn>
</mrow>
</math>
</body>
</html>
11) Why do we use HTML5?

HTML5 supports animation, drawing, audio, video, etc and it easily embeds a video on the web
page. It does not require any additional software like Flash for watching videos.

 Legacy and cross-browser support


 Better interactions
 Smarter storage
 Cleaner code

12) Explain Microdata in HTML5?

Using Microdata, the metadata is nested within existing content on web pages. Search engines
extract the microdata from a web page to provide a good browsing experience.

13) List some of the formatting elements in HTML5?

HTML5 holds some new and old formatting elements, all together here is the list:

 Marked text
 Emphasized text
 Subscripts
 Superscripts
 Small text
 Deleted text
 Inserted text

14) Explain HTML5 Graphics?

HTML5 supports two types of graphics i.e. Canvas and SVG.

Canvas

<canvas> element is used to design graphics on the web page. And it has several methods
available for drawing circles, boxes, adding images and text.

<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{border:2px solid pink;}
</style>
</head>
<body>
<canvas id = “mycanvas” width = “150” height = “150”></canvas>
</body>
</html>

SVG

<svg> Scalable Vector Graphics, is mostly used for the graphical application. And scalable
vector type diagrams, such as X, Y coordinate system, two-dimensional and pie charts. This
makes it faster and lightweight. SVG follows XML format.

<!DOCTYPE html>
<html>
<body>
<svg width = “400” height = “150”>
<rect width = “400” height = “150” style = “fill:rgb(200,220,255);stroke-
width:10;stroke:rgb(0,0,0)”/>
</svg>
</body>
</html>

15) How many tags were removed in HTML5?

The list of the tags that are removed completely in HTML5 are as follows:

 <frame>
 <frameset>
 <noframes>
 <big>
 <basefront>
 <applet>
 <center>
 <bigcenter>
 <acronym>
 <basefont>
 <dir>
 <tt>
 <font>
 <strike>

16) What are the migrated tags from HTML4 to HTML5?

List of the migrated tags from HTML4 to HTML5 is as follows:

HTML4 HTML5
<div id = “footer”> <footer>
<div id = “header”> <header>
<div id = “menu”> <nav>
<div id = “post”> <article>
<div id = “content”> <section>

17) Give an example of adding canvas in Html5?


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#FF0000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>

18) What are the deprecated Elements in HTML5 from HTML4?

Elements that are deprecated from HTML 4 to HTML 5 are as follows:

 frame
 frameset
 noframe
 applet
 big
 center
 basefront

19) Briefly describe the correct usage of the following HTML5 semantic
elements: <header>, <article>, <section>, <footer>?
<header>: This element is used to contain introductory and navigational information about a
section of the page. This can include the section heading, the author’s name, time and date of
publication, table of contents, or other navigational information.

<article>: This element is meant to house a self-contained composition that can logically be
independently recreated outside of the page without losing its meaning.

<section>: The element is a flexible container for holding content that shares a common
informational theme or purpose.

20) Write the code necessary to create a 300 pixel by 300 pixels <canvas>. Within
it, paint a blue 100 pixel by 100 pixel square with the top-left corner of the
square located 50 pixels from both the top and left edges of the canvas?
<canvas id="c" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById( "c" );
var drawing_context = canvas.getContext( "2d" );
drawing_context.fillStyle = "blue";
drawing_context.fillRect( 50, 50, 100, 100 );
</script>

21) What is the purpose of the 'section' tag in HTML5?

This tag represents a generic document or application section. And it can be used together with
h1-h6 to indicate the document structure.

22) What is the purpose of 'nav' tag in HTML5?

This tag represents a section of the document intended for navigation.

23) What is Web Forms 2.0?

This is an extension to the forms features found in HTML4. Form elements and attributes in
HTML5 provide a greater degree of semantic mark-up than HTML4. And also remove a great
deal of the need for tedious scripting and styling that was required in HTML4.
24) What is the purpose of the 'placeholder' attribute in HTML5?

HTML5 introduced a new attribute called placeholder. This attribute on <input> and <textarea>
elements provides a hint to the user of what can be entered in the field.

25) What is the purpose of the 'autofocus' attribute in HTML5?

It is a simple one-step pattern, easily programmed in JavaScript at the time of document load,
automatically focus one particular form field.

26) Can you use SVG tags directly in HTML5 without any plugin?

Yes! HTML5 allows embeding SVG directly using <svg>...</svg> tag.

27) Can you use MathML tags directly in HTML5 without any plugin?

Yes! The HTML syntax of HTML5 allows for MathML elements to be used inside a document
using <math>...</math> tags.

28) What are the drawbacks of cookies?

 These are included with every HTTP request, thereby slowing down your web
application by transmitting the same data.
 And are included with every HTTP request, thereby sending data unencrypted over the
internet.
 They are limited to about 4 KB of data. Not enough to store required data.

29) What is Server Side Events in HTML5?

 Along with HTML5, WHATWG Web Applications 1.0 introduces events which flow
from the web server to the web browsers and they are called Server-Sent Events (SSE).
 Using SSE you can push DOM events continuously from your web server to the visitor's
browser.
 Server-sent events standardize how we stream data from the server to the client.

30) What are web sockets?


It's is a next-generation bidirectional communication technology for web applications which
operates over a single socket and is exposed via a JavaScript interface in HTML 5 compliant
browsers.

Once you get a Web Socket connection with the web server, you can send data from browser to
server by calling a send() method, and receive data from server to browser by an onmessage
event handler.

31) What is the purpose of Socket.readyState attribute of WebSocket?

The readonly attribute readyState represents the state of the connection.

 Value of 0 indicates that the connection has not yet been established.
 Value of 1 indicates that the connection is established and communication is possible.
 Value of 2 indicates that the connection is going through the closing handshake.
 Value of 3 indicates that the connection has been closed or could not be opened.alue of 1
indicates that the connection is established and communication is possible.
 Value of 2 indicates that the connection is going through the closing handshake.
 Value of 3 indicates that the connection has been closed or could not be opened.

32) What are Web Workers?

Web Workers do all the computationally expensive tasks without interrupting the user interface
and typically run on separate threads. And allow for long-running scripts that are not interrupted
by scripts that respond to clicks or other user interactions.

33) Advantages of HTML5 ?

 It provides greater consistency in terms of the HTML used to code a web page
 It provides both Audio and Video support
 It helps developers to use fancier forms
 It provides geolocation support
 HTML5 is the most mobile-ready tool for developing mobile sites and apps.
 It usually requires less maintenance support.
 It also provides more reliable storage options functionality.

34) What is the difference between HTML5 Application cache and regular
HTML browser cache?
HTML5 specification allows browsers to prefetch some or all of website assets such as HTML
files, images, CSS, JavaScript, and so on, while the client is connected. It is not necessary for the
user to have accessed this content previously, for fetching this content.

35) What is the lifetime of local storage?

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

36) What is the difference between HTML5 interaction in Sencha and


Twitter/Bootstrap?

Sencha and Twitter/Bootstrap are both HTML development frameworks that integrate HTML5,
CSS3, and JavaScript. The major difference is that in Sencha, the three languages are all
comingled together in code, whereas in Bootstrap, HTML, and CSS and decoupled.

37) What are the building blocks of HTML5?

 Semantics
 Connectivity
 Offline and storage
 Multimedia
 2D/3D graphics and effects
 Performance and integration
 Device access
 Styling

38) What is the major improvement with HTML5 in reference to Flash?

Flash is not supported by major mobile devices such as iPad, iPhone, and universal android
applications. Those mobile devices have a lack of support for installing flash plugins. While
compared to Flash, HTML5 is very secured and protected which eliminates major concerns that
we have seen with Flash.

39) Which are the media elements use in HTML5?

The media elements used in HTML5 are as follows:


 <audio>
 <video>
 <source>
 <track>

40) Why should we use IndexedDB?

IndexedDB is a newer facility for storing large amounts of data in the browser. You can use it to
store data of any JavaScript type, such as an object or array, without having to serialize it.

41) What is the WebSocket API?

This is an advanced technology that makes it possible to open a two-way interactive


communication session between the user's browser and a server. With this API, you can send
messages to a server and receive event-driven responses without having to poll the server for a
reply.

42) What is Contenteditable Attribute in HTML5?

The contenteditable global attribute is an enumerated attribute indicating if the element should be
editable by the user. If so, the browser modifies its widget to allow editing.

For detail information regarding the topic check here: contenteditable attribute

43) What do you know about the Vibration API in HTML5?

The mobile devices include vibration hardware, which lets software code provide physical
feedback to the user by causing the device to shake. And vibration API offers Web apps the
ability to access this hardware, if it exists, and does nothing if the device doesn't support it.

44) What are the types of Web Workers in HTML5?

There are two different types of web workers in HTML5 i.e. Dedicated Workers and Shared
Workers.

45) What is Server-Sent Event in HTML5?


Server-sent events standardize how we stream data from the server to the client. Along with
HTML5, WHATWG Web Applications 1.0 introduces events which flow from the web server to
the web browsers are known as Server-Sent Events (SSE).

46) What is the purpose of Frames?

They allow the user to view multiple documents within a single Web page. And also possible to
load pages from different servers in a single frameset.

47) List web storage methods in HTML5?

window.localStorage and window.sessionStorage are the two methods in which methods will be
present in HTML5.

 window.localStorage: stores data with no expiration date.


 window.sessionStorage: stores data for one session

48) What is Modernizr in HTML5?

Modernizr is a JavaScript library which detects the HTML5 and CSS3 features your visitor's
browser supports. In detecting feature support, it allows developers to test for some of the new
technologies and then provide fallbacks for browsers.

49) Is it possible to locate the geographical position of a user in HTML5?

Yes, it's possible. The Geolocation API is published through the navigator. geolocation object.
And if the object exists, geolocation services are available.

50) What is Web SQL?

Web SQL Database API isn't actually part of the HTML5 specification but it is a separate
specification which introduces a set of APIs to manipulate client-side databases using SQL.

Also Prepare: HTML Quiz

You might also like