HTML5 Interview Questions and Answers PDF Download For Freshers & Experienced

2019-06-15

Join Telegram
Join Whatsapp Groups

HTML5 Interview Questions and Answers PDF Download For Freshers & Experienced: Dear users, welcome to HTML5 interview questions section by Freshersnow.com. Here we have provided Top 50 most frequently asked HTML5 interview questions and answers. Prepare well for your job interview by using these questions and answers.

★★ You can also check: Latest Technical Interview Questions ★★

Table of Contents

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

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

Download HTML5 Interview Questions and Answers in PDF format: Click Here

Also Practice ★★ HTML5 Online Quiz ★★