Scribd
Upload
4 views58 pages

HTML5 Interview Questions

The document provides a comprehensive overview of HTML5, detailing its features, including new tags and input types, such as <datalist>, <audio>, and graphics capabilities like SVG and Canvas. It explains the advantages of HTML5 over previous versions, such as improved multimedia support and web storage options, including session and local storage. Additionally, it discusses the drag and drop functionality and the various input types available for creating interactive web forms.

Uploaded by

jojivarghesein
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
4 views58 pages

HTML5 Interview Questions

The document provides a comprehensive overview of HTML5, detailing its features, including new tags and input types, such as <datalist>, <audio>, and graphics capabilities like SVG and Canvas. It explains the advantages of HTML5 over previous versions, such as improved multimedia support and web storage options, including session and local storage. Additionally, it discusses the drag and drop functionality and the various input types available for creating interactive web forms.

Uploaded by

jojivarghesein
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

9/15/2020 HTML5 Interview Questions

Question 1. What Is HTML5 and Why Do We Use HTML 5


Answer

HTML5 is the latest version of HTML and XHTML with new features like Drawing, Animation, Video,
and Audio, etc. It is used to solve some common structural problems encountered with HTML 4.1. It
gives more flexibility to both the web developers, the web designers and enables more exciting and
interactive websites in addition to more powerful and efficient applications. The HTML 5 <! doctype
html> is recognized by all modern browsers.

HTML5 brings a whole new dimension to the web world. It can embed a video on the web-pages
without using any special software like Flash. HTML5 is developed in such a way that the developers
are not required to waste their time and effort in creating an error-free web page. Firefox, Chrome,
Opera, Safari and Internet Explorer all support <! doctype html>.

Why do we use HTML5?

The main benefit of HTML5 is that it supports Drawing, Animation, Video, and Audio.

The web developers can decrease the complexity and the time to create applications with
animations, play music (audio and video), high-quality drawings and other rich content using HTML 5
because it can embed a video on the web-pages without using any special software like Flash.

HTML5 is far easier for web designers and web developers as it tells them how a web page is
structured.

For more details, visit the following link:

Introduction to HTML5

Question 2: What are HTML5 Graphics?


Answer

In HTML5, there are the following two types of graphics:

Scalable Vector Graphics (SVG)

SVG provides a big benefit; basically people are now using high-resolution devices (iPads and
Monitors) so it becomes impressive as designs, logos, and charts can scale accordingly. The HTML
tag <svg> is a container for SVG graphics. SVG is used for drawing paths, circles, boxes, text and
graphic images.
[Link] 1/58
9/15/2020 HTML5 Interview Questions

Canvas

Canvas is a rectangular area on an HTML page for drawing graphics on the fly via JavaScript. The
default size of the canvas is 300 px × 150 px (width × height). The HTML tag <canvas> is a
container for Canvas graphics.

Where to use Canvas and SVG

Canvas is procedural whereas SVG is declarative. Some reasons to consider SVG instead of the
canvas are:

SVG is scalable, provides the facility of auto-scaling icon, logo, and chart.
SVG is not supported by the languages whereas canvas elements are manipulated using
client-side JavaScript.
DOM handling. It's easy to attach event handlers and manipulate elements like you would for
another HTML block. To move an item, you simply change its coordinates but this is not true
for a Canvas.

For more details, visit the following link:

Understanding HTML5 Graphics

Question 3: What is DataList Tag in HTML?


Answer

A <datalist> tag can be used to create a simple auto-complete feature for a webpage.<datalist> is a
newly defined HTML tag that comes with the HTML 5 specification. By using this <datalist> tag, we
can define a list of data and then we can bind it with a <input> tag.

A <datalist> tag specifies a list of predefined options for an <input> element. After binding it, the user
will see a drop-down list in which all the predefined options will be there for the input. When the user
types a character or a string, the user will automatically get the data which depends on the input
string or a character.

The main feature of this <datalist> tag is to auto-complete the <input> element.

Example

Suppose we have a TextBox for the country.

01. <input type="text" list="countries" name="country" />

Complete Example

01. <!DOCTYPE html>


02. <html lang="en">
03.
04. <body>
05. Please Select Country: <input type="text" list="countries" name="country
06. <datalist id="countries">
07. <option value="India">India</option>
08. <option value="United States"></option>
09. <option value="United Kingdom"></option>
10. <option value="China"></option>
11. <option value="Nepal"></option>
12. <option value="Afghanistan"></option>
13. <option value="Iceland"></option>

[Link] 2/58
9/15/2020 HTML5 Interview Questions

14. <option value="Indonesia"></option>


15. <option value="Iraq"></option>
16. <option value="Ireland"></option>
17. <option value="Israel"></option>
18. <option value="Italy"></option>
19. <option value="Swaziland"></option>
20. </datalist>
21. </body>
22.
23. </html>

For more details, visit following link:

DataList Tag in HTML 5

Question 4: Describe Form Input Types in HTML5?


Answer

HTML5 is the new standard for HTML that has 13 new input types for forms. Using these new input
types, we can create more interactive and easy-to-use web forms. It also provides better data
validation, input control, color picker controls, and many others.

The new input types are:

Time
Date
Datetime
Datetime-local
Week
Month
Email
Color
Number
Range
Search
Telephone
URL

Input Type Range

An input type range is used for input fields that should contain a value from a range of numbers
which is done by declaring a minimum and a maximum value. You can also set restrictions on which
numbers are required to be accepted.

01. <input type="range" name="age" min="18" max="35" />

Input Type URL

A type URL is used for the input fields that should contain a URL address. The value of the URL field
is automatically validated when the form is submitted.

01. <input type="url" name="mainpage" />

[Link] 3/58
9/15/2020 HTML5 Interview Questions

Input Type email

The email type is used for the input fields that should contain an Email address and automatically
validates it when submitted.

01. <input type="email" name="emailid" />

Input Type Tel

Input Type Tel defines a field to enter a telephone number and automatically validates when the form
is submitted.

01. <input type="tel" name="usrtel" />

For more details, visit following link:

HTML5 Input Types

Question 5: What is the use of Drag and Drop in HTML5?


Answer

Drag and drop is a very common feature and convenient for users. Simply, you need to grab an
object and put it at the place you want. This feature is commonly used by many of the online
examination websites wherein you have the options to pick up the correct answer, drag it to the
answers place holder and drop it.

The Drag and Drop API comes with seven new events to track a drag and drop. The events are
dragstart, drag, dragend, dragenter, dragleave, dragover and drop that are triggered during the
various stages of the drag and drop operation. These events are listed below:

[Link] 4/58
9/15/2020 HTML5 Interview Questions

For more details, visit the following link:

HTML5 Drag and Drop

Question 6: What is HTML 5 Web Storage?


Answer

HTML5 Web Storage, also known as DOM Storage is a way to preserve state on either the client or
server which makes it much easier to work against the stateless nature of HTTP.

Advantages of HTML5 Web Storage:

1. It can store 5 to 10 MB data. That is far more than what cookies have.
2. Web storage data is never transferred with an HTTP request, so it increases the performance
of the application.

Web Storage Strengths and Weaknesses

Strengths

Apps can work both online and offline.


API is easy to learn and use.
Has the ability to hook into the browser events such as offline, online and storage change.
It has less overhead than cookies; no extra header data is sent with the browser requests.
It provides more space than what cookies offer so increasingly complex information can be
kept.

Weaknesses

Data is stored as a simple string; manipulation is needed to store objects of different types
such as Booleans, Objects, Ints, and Floats.
It has a default 5MB limit; more storage can be allowed by the user if required.
It can be disabled by the user or systems administrator.
Storage can be slow with complex sets of data.

HTML5 Web Storage Methods

setItem(key,value): Adds a key/value pair to the sessionStorage object.


getItem(key): Retrieves the value for a given key.
[Link] 5/58
9/15/2020 HTML5 Interview Questions

clear(): Removes all key/value pairs for the sessionStorage object.


removeItem(key): Removes a key/value pair from the sessionStorage object.
key(n): Retrieves the value for a key.

Getting a Value

There are two methods to retrieve a key/value pair as well:

01. [Link]('someKey');
02. //returns 'someValue'
03. [Link];
04. //returns 'someValue'

For more details, visit following link:

HTML5 Web Storage

Question 7: What are the types of Web Storage in HTML5?


Answer

There are two types of Web Storage,

1. Session Storage
2. Local Storage

As its name implies, it stores data of the current session only which means the data stored in
session storage clears when the browser is closed. To access session storage in JavaScript, the
following methods are available.

1. To store data in session storage, setItem () function is used.

01. [Link] (‘key’,’value’);

Example:

01. [Link] (‘username’,’ABC’);

We can only store strings in Session Storage. To save the objects in session, first convert the
object into JSON string and then store this string in Session Sorage as in the following,

01. [Link] (‘object’, [Link](object));

2. To retrieve the data from Session Storage getItem() function is used.

01. [Link](‘key’);

Example:

01. var username= [Link](‘username’);

If JSON string is stored in Session Storage then you can convert it into object as below.

01. var object=[Link]([Link](‘object’));

3. To delete a particular key from Session Storage, removeItem function is used.

01. [Link](‘key’);
[Link] 6/58
9/15/2020 HTML5 Interview Questions

Example:

01. [Link](‘username’);

4. To delete all the keys from Session Storage, clear function is used as shown below

01. [Link]();

To get all KEY/VALUE pairs from Session Storage, you can loop through Session Storage like
the following.

01. for (var i = 0; i < [Link]; i++)


02. {
03. var key = [Link](i);
04. var value = [Link](key);
05. }

Local Storage

Local Storage is the second type of HTML Web Storage. Like Session Storage, it also stores data in
the KEY / VALUE pair of strings. The following points help to compare Session Storage and Local
Storage.

1. Session Storage stores the data for only the current session of the browser, when the browser
closes data in, Session Storage clears. On the other hand, the data stored in Local Storage is
not deleted automatically when the current browser window is closed. Data in Local Storage
clear only when it is manually deleted.

2. The data in Session Storage is accessible only in the current window of the browser but the
data in the Local Storage can be shared between multiple windows of the browser.

Figure: Session Storage

[Link] 7/58
9/15/2020 HTML5 Interview Questions

Figure: Local Storage

The following functions are used to access Local Storage in JavaScript:

1. To store data in Local Storage, setItem() function is used.

01. [Link] (‘key’,’value’);

Example:

01. [Link] (‘username’,’ABC’);

We can only store strings in Local Storage. To save objects in Local Storage, first convert the object
into JSON string and then store this string in Local Storage as shown below:

01. [Link] (‘object’, [Link](object));

To retrieve the data from Local Storage, getItem() function is used.

01. [Link](‘key’);

Example:

01. var username= [Link](‘username’);

For more details, visit following link:

HTML5 Web Storage - Part 2 (Local Storage)


HTML5 Web Storage Part 1 - Session Storage
Difference Between Local Storage, Session Storage And Cookies

Question 8: What is Audio Tag in HTML 5?


Answer

This new element allows you to deliver audio files directly through the browser, without the need for
any plug-ins. The Audio tag is a new tag introduced in HTML5. You can use it to play audio sound
like .mp3, wav, and .ogg. I have used five types of sound formats to show which formats are
compatible with the browsers. A WAV file is a common sound format that is supported by most
browser versions.

[Link] 8/58
9/15/2020 HTML5 Interview Questions

Syntax

<audio src="URL" controls> </audio>

The syntax for more than one audio format

<audio controls="controls" >

<source src="URL1" type="audio/mp3" />

<source src="URL2" type="audio/wma" />

<source src="URL3" type="audio/x-wav" />

</audio>

New
Specific Attributes
Element
This Boolean attribute indicates whether or not the browser should begin buffering audio
autobuffer
right away.
This is the Boolean attribute indicate whether or not the file should start playing audio as
autoplay
soon as it can.
loop This Boolean attribute indicates whether or not apply repetition on playing audio.
src This attribute is used to specify the URL (location of the audio file) of the audio to show.
This Boolean attribute specifies whether or not the browser should display audio controls
controls
(such as play/pause, volume and seek).

HTML5 Event Attributess


onabort onblur oncanplay oncanplaythrough
onchange onclick oncontextmenu ondblclick
ondrag ondragend ondragenter ondragleave
ondragover ondragstart ondrop ondurationchange
onemptied onended onerror onfocus
onformchange onforminput oninput oninvalid
onkeydown onkeypress onkeyup onload
onloadeddata onloadedmetadata onloadstart onmousedown
onmousemove onmouseout onmouseover onmouseup
onmousewheel onpause onplay onplaying
onprogress onratechange onreadystatechange onscroll
onseeked onseeking onselect onshow
onstalled onsubmit onsuspend ontimeupdate
onvolumechange onwaiting

For more details, visit the following link:

Audio tag in HTML5

Question 9: What is a Video Tag in HTML 5?


Answer

One of the exciting features of HTML5 is <video>[Link] Tag was introduced in HTML5. Video tag
is used to add video or media files in the HTML document. It is not present in HTML 4.01. Before

[Link] 9/58
9/15/2020 HTML5 Interview Questions

this, it was not possible to show a video/movie on the Web [Link] example, you can embed music
video or a movie on your web page for the visitor to listen and watch it.

HTML5 video tag accepts the attribute that specifies how the video should be played. You can write
content in <video> tag. as <video> tag always occur in pair. Any content between the opening and
closing tag is "fallback content". This content is displayed only by those browsers that does not
support video tag. Now, most of the video files are shown by the plug-in.

Syntax

Syntax of <video>tag in HTML5:

<video src="URL"></video>

OR

<video>

<source src="URL">

<source src="URL">

</video>

Attributes of the <video> tag

Attribute Value Description


autoplay autoplay The video will start playing automatically.
autobuffer autobuffer The video will start buffering automatically.
loop loop Video automatically starts over again when done.
controls controls In order to show the controls.
poster URL of the image URL(address) of the image.
src URL Address of the video.
width pixel Defining the width of the video.
height pixel Defining the height of the video.

For more details, visit following link:

Video Tag in HTML5

Question 10: What are the media elements in HTML 5?


Answer

The following are the 5 most popular media elements.

Audio

The audio element is used to define or create a music element in your simple HTML page.
It supports all browsers like Internet Explorer 9.0 and above, Chrome, Opera, Firefox and
Safari.
This tag defines music or any other audio stream formats.

Video

The Video element creates a video element in your HTML page. It supports all the browsers like
Internet Explorer 9.0 and above, Chrome, Opera, Firefox and Safari. This tag defines music or any
[Link] 10/58
9/15/2020 HTML5 Interview Questions

other video stream formats.

Track

This element is useful in both the previous elements i.e AUDIO and VIDEO. This element helps to
define tracks or we can say simple sectors for the <audio> and <video> elements.

Source

Like the track element, the Source element must be used in <audio> and <video> elements to do the
control property and structure of the tracks.

Embed

It is also called a container because as the name suggests, it is used for defining the containers for
the external applications or we can say plug-ins for the Applications.

For more details, visit following link:

HTML5 Media Elements

Question 11: What is the use of Canvas element in HTML5?


Answer

The canvas element is used to draw graphics by making use of JavaScript. It is defined with the
<canvas> tag. We write the following code.

This tag is nothing but a container for graphics. We need to use a script to provide the structure or
shapes of the graphics.

We can have multiple Canvas elements on one HTML page.


The real power of the Canvas element is the scripting for which use JavaScript.
For the complete functionality of the HTML5 Canvas tag, we require an API which is made by
writing JavaScript code that provides access to Canvas element functionality.

HTML5 Canvas | Methods

There are several methods for various functionalities like drawing shapes, adding images, graphics
and so on in a Canvas element.

What are the features of HTML5 Canvas?

[Link] 11/58
9/15/2020 HTML5 Interview Questions

Flexibility
Interactivity
Multimedia Options
Animation
Platform Support
Free and Accessible Dev Tools
Code Once, Run Everywhere

For more details, visit following link:

HTML5 Canvas

Question 12: What is the use of a Fieldset tag in HTML5?


Answer

The <fieldset> tag groups related form elements. It is like a box. In other words, it draws a box
around related elements.

It must start with a <legend>tag because the <legend> tag defines the title of the field set.

By using the <fieldset>tag and the <legend> tag, you can make your form much easier to
understand for the users.

Syntax

The syntax of the <fieldset> tag in HTML5 is:

<fieldset>Controls</fieldset>

Browser Support

The <Fieldset> tag is supported by all major browsers.

Attributes of <fieldset> tag

HTML5 has added some new attributes; they are:

Attribute Value Description


disabled disabled Specify fieldset will be displayed or not
name text Specify name of a field set
form name of form Define it is related to the form

Example: In this example, we create a fieldset in a form. We used the <legend> tag to define the
caption for the <fieldset> element.

Code:

01. <html>
02.
03. <body>
04. <form>
05. <fieldset>
06. <legend>Personal Information</legend>
07. First Name: <input type="text" />
08. <br/><br/> Last Name: <input type="text" />
09. <br/><br/> p_Address: <input type="text" />
10. </fieldset>
[Link] 12/58
9/15/2020 HTML5 Interview Questions

11. </form>
12. </body>
13.
14. </html>

For more details, visit following link:

HTML tags which are deprecated in HTML5

Question 13: What are the HTML tags which deprecate in HTML5?
Answer

One of the main points on which HTML5 wins over XHTML2.0 is “backward compatibility”.
XHTML2.0 sought to enforce well-written code by using very harsh error handling. If a page returns
error based on syntax, the user agent will stop parsing the code.

An HTML5 specification states that certain HTML tags should not be used but it is only a guideline to
the HTML authors. The implementations, however, must support these tags to be backward
compatible.

The tags that are deprecated are the following:

<basefont>
<big>
<center>
<font>
<s>
<strike>
<tt>
<u>
<frame>
<frameset>
<noframe>
<acronym>
<applet>
<isindex>
<dir>

Several tag attributes are also removed. Few of the most notable ones are:

Element Attribute removed


a,link rev, charset
img longdesc, name
html version
th abbr
td scope
all block level elements align
body background
img hspace, vspace
table, tr, th, td bgcolor
table border, cell padding, cell spacing
td, th height, width
table valign

For more details, visit following link:


[Link] 13/58
9/15/2020 HTML5 Interview Questions

Learn HTML5 - Part 1: Introducing HTML5 APIs

Question 14: What are the new APIs provided by the HTML 5
standard?
Answer

HTML5 APIs

After HTML's evolution, later on in 1998 parts of the API for HTML developed by the browser
vendors and release named DOM Level 1 followed by DOM Level 2 Core, DOM Level 2 HTML and
finally DOM Level 3.

Note: One thing you need to ensure is that HTML is not only used to write code as tags and angle
brackets. The HTML5 specification also defines how JavaScript is interacting with those angle
brackets using the Document Object Model (DOM). There is a DOM API for each corresponding tag.

Web browsers, or you can say HTML user agents, parse your written markup into a DOM tree that
represents the specific document in memory and each DOM tree contains several kinds of nodes, in
particular a DOCTYPE node, elements, etc.

Let's use an example of an HTML markup snippet and understand the DOM concept.

HTML markup snippet

01. <!DOCTYPE HTML>


02. <html>
03.
04. <head>
05. <title>Your Page Title</title>
06. </head>
07.
08. <body>
09. <h1>Text</h1>
10. <p>Text</p>
11. <!-- Comment -->
12. </body>
13.
14. </html>

DOM tree of HTML markup snippet

[Link] 14/58
9/15/2020 HTML5 Interview Questions

In HTML5 you can use many APIs. Some of them are:

Web Workers API


Server-sent Events API
WebSocket API
Cross-document Messaging API
Drawing
Audio/Video
Drag and drop
Autofocus
Editable
Client-side storage
Geolocation

For more details, visit following link:

Application Cache in HTML5

Question 15: What is Application Cache in HTML5?


Answer

Yet HTML5 has many new special elements and attributes but one of the best feature of HTML5 is
"Application Cache", that enables us to make an offline session of a web application. It allows to
fetch few or all the content of a website such as HTML files, Images, JavaScript, CSS ...etc. This
feature speed up the site performance. This is achieved with the help of a file, defined as follows:

01. <! doctype html>


02. <html manifest="[Link]">
03. ....
04. ....
05. .....
06. </html>

For more details, visit the following link:

Meter Tag in HTML 5


[Link] 15/58
9/15/2020 HTML5 Interview Questions

Question 16: What is a meter tag? What is the difference between


the progress tag and a meter tag?
Answer

The meter tag is used to represent a scalar measurement within a known range. The value can be
fractional.

Examples

Disk uses, the relevance of a query result, the fraction of a voting population to have selected a
specific candidate.

Difference between progress tag and meter tag

A progress tag represents the completion progress of a task whereas the meter tag is used to
represent gauges. We can think that a progress tag represents a dynamic data whereas a meter tag
represents a static data.

Note:

1. According to the W3C, the meter tag should not be used to indicate progress as to indicate the
progress, we have the progress tag.
2. The meter tag also does not represent a scalar value of an arbitrary range; for example, it
would be wrong to use this to report a weight, or height, unless there is a known maximum
value.

Syntax

The Meter tag is an inline element, the same as a header, progress and so on.

<meter></meter>

Attributes

The meter tag has 6 more attributes as shown in the following table:

Attribute Value Description


Min Floating Point Number Specifies the lower bound, Default value is 0.0
Max Floating Point Number Specifies the upper bound, Default value is 1.0
Low Floating Point Number This represents the upper bound of the low end
High Floating Point Number This represents the lower bound of the high end
Value Floating Point Number Specifies the current value
Optimum Floating Point Number Specifies that what measurements value is the best value

For more details, visit following link

Scalable Vector Graphics (SVG) in HTML5

Question 17: What is the use of Scalable Vector Graphics (SVG) in


HTML5?
Answer

Scalable Vector Graphics (SVG) is the part of the vector-based family of graphics. There are various
forms of Raster-based graphics available that stores the color definition for each pixel in an array of
data. Some of the most common Raster-based formats used on the web today are JPEG (Joint
[Link] 16/58
9/15/2020 HTML5 Interview Questions

Photographic Experts Group), GIF (Graphics Interchanged Format) and PNG (Portable Network
Graphics). SVG is a language for to describe 2D vector graphics in XML.

Basics of SVG

Creation of an SVG image is a very different process. To create any other Raster images like JPEG,
PNG or GIF, we use image editing software like Photoshop and so on but SVG images are XML
based file so they can be created in any other text editor. There is a tool also available (inkspace).
By using this tool, you can draw and create SVG images very conveniently.

Basic Shapes Created by SVG

You can use an SVG XML tag to create shapes.

Element Description
line Creates Simple line
circle Creates Circle
rect Creates Rectangle
ellipse Creates Ellipse
polygon Creates Polygon
polyline Creates Multiline Shape
path Creates Arbitrary Path
text Allows to Creates Text

For more details, visit the following link

Learn HTML5 - Part 3: Server-sent Events APIs

Question 18: Why do we need HTML 5 Server-Sent Events?


Answer

Server-Sent Events (SSE) is a recent HTML5 specification in combination with the EventSource API
designed for streaming updates. Prior to that, you might be familiar with the bidirectional
communication channel, known as WebSockets, used very much and tons of server
implementations are available on the internet. However, the second server-push technology of
HTML5 yet stays in the shadows.

To enable efficient server-to-client streaming of event data as it is basically text-based. For example,
real-time notifications or updates, like Facebook, Twitter, stock exchange updates and so on are
generated on the server. Basically, we have the following two types of components that SSE
introduces:

EventSource Interface
Event Stream

The EventSource Interface allows the client to receive push notifications from the server as DOM
events and the "Event Stream" data format is used to deliver the individual updates.

SSE flow chart

In the following figure, you will see how SSE works after the client/server is connected.

[Link] 17/58
9/15/2020 HTML5 Interview Questions

For more details, visit the following link:

Cite Tag in HTML5

Question 19: What is the use of cite tag in HTML5


Answer

The <cite> tag indicates a citation. It represents the title of a work (e.g. a book, paper, essay, poem,
score, song, script, film, TV show, game, painting, sculpture , play , exhibition , etc.). The <cite> tag
is an inline tag that indicates "defining a citation". The text within the <cite> tag is shown in Italics.
The cite tag must have a start and end tag.

In this tag the "title" attribute defines the title of the Text within the <cite></cite> tags.

In HTML5 , the <cite> tag defines the cited title of a work whereas HTML 4.01 implied that the <cite>
tag can be used to indicate the name of a person.

Declaring Syntax

<cite title="value">Some Text Here</cite>

Browser support

The <cite> tag is supported in all major browsers (e.g. Internet Explorer, Google Chrome, Mozilla
Firefox. Safari, etc ).

For more details, visit the following link

Color Name in HTML5

Question 20: What are the names of the color in HTML 5?


Answer: You can see all 147 colors in the following list:

[Link] 18/58
9/15/2020 HTML5 Interview Questions

[Link] 19/58
9/15/2020 HTML5 Interview Questions

[Link] 20/58
9/15/2020 HTML5 Interview Questions

[Link] 21/58
9/15/2020 HTML5 Interview Questions

[Link] 22/58
9/15/2020 HTML5 Interview Questions

For more details, visit following link:

Smooth Wave in HTML5

Question 21: What are Waves in HTML?


Answer

A sine wave is a mathematical function that is repeats at a regular interval of time. The function is
used in many fields including mathematics, physics, and engineering. We can also say that a sine
wave is a smooth wave.
[Link] 23/58
9/15/2020 HTML5 Interview Questions

It has the following properties:

1. The sine wave is blue whenever the value is positive.


2. The sine wave is red whenever the value is red.
3. The thickness of the line is directly proportional to the absolute value of the magnitude of the
wave. For example, where the sine value reaches 0, the wave is absent.

On the X-axis, we will map the angle Theta. Theta will vary from 0 degree to 1040 degrees.

On the Y-axis, we will map the sin (Theta). For this, we will use the Math function [Link]. The
[Link] function takes angles in radians. So the angle is first multiplied by PI / 180.

For more details, visit following link:

HTML 5 Web SQL Database

Question 22: What is Web SQL Database in HTML 5?


Answer

Web SQL is a very interesting feature, even though it isn't part of the HTML 5 specification but it is a
separate specification and it can still help to develop Web Applications. Web SQL is used to
manipulate a client-side database. Since I am saying that it is good to use, there is a disclaimer for
its use; it is risky because it stores data at the client-side, not on the server-side. So always
remember, don't store information sensitive to the server inside it.

Note: A Web SQL database only works in the latest versions of Safari, Google Chrome and Opera
browsers.

Core Methods of Web SQL

The following are the 3 core methods of Web SQL that I will cover:

openDatabase
transaction
executeSql

Creating and Opening Databases

Using the openDatabase method, you can create an object for the database. If the database doesn't
exist then it will be created and an object for that database will be created. You also don't need to
worry about closing the connection with the database.

To create and open the database, you need to use the following syntax.

var dbObj = OpenDatabase('[Database_Name]', '[Version_Number]', '[Text_Description]', '[size]',


'[Creation_Callback]’)

For more details, visit following link

Vibration API in HTML5

Question 23: What is HTML5 Contenteditable Attribute?


Answer

[Link] 24/58
9/15/2020 HTML5 Interview Questions

One of the new features in HTML 5 is the contenteditable attribute. In HTML 5, any element can be
editable. By using some JavaScript event handler, you can transform your web page into a fast rich
text-box. This feature is mainly applied in Content Management Systems. By using this, you can edit
content directly from the browser.

The contenteditable attribute is an enumerated attribute whose keywords are the empty string, true
and false. The empty string and the true keyword equates to the true state. The false keyword
implies the false state. In addition, there is a third state, the inherit state, which is the missing value
default (and the invalid value default).

States of content editable attribute

According to [Link], there are the following 3 states of the contenteditable attribute:

State Description How to write?


contenteditable=" " /
true Indicates that element is editable
contenteditable="true"
false Indicates that element is not editable contenteditable="false"
indicates that the element will be editable if and only if, its
inherit contenteditable="inherit"
immediate parent element is editable

For more details, visit the following link

Battery Status API in HTML5

Question 24: What is Vibration API in HTML5?


Answer

Vibration is a simple, nice way of alert when you get a new message or a phone call. It is especially
useful when you are in a noisy environment or the place where you feel the ringing would be a
distraction to others.

It is interesting to know that HTML5 is now providing us to play with the vibration on the devices but
the HTML5 Vibrate API supports only the recent version of Firefox & Chrome.

To check the vibration, API support in browsers as shown below,

01. [Link] = [Link] || [Link] ||


02. [Link] || [Link];
03. if ([Link]) {
04. // supports vibration API.
05. }

Vibration Syntax

Vibration basic syntax is,

[Link](long | [long]);

The vibrate function accepts milliseconds or an array of milliseconds.

Example

01. // vibrate for 1000 ms


02. [Link](1000);
03. // same like above but in array of ms

[Link] 25/58
9/15/2020 HTML5 Interview Questions

04. [Link]([1000]);

In the above examples, we are setting the device to vibrate 1000 milliseconds.

For more details, visit the following link:

Geolocation In HTML5

Question 25: What is the Battery Status API in HTML5?


Answer

When a user downloads an application for their devices, they are more conscious of the battery
usage of the application. So as a mobile application developer, you should consider the battery
usage of your Application.

If you are developing a Web Application for a mobile device then your choice is to use HTML5’s
Battery Status API, if you are concerned about the user’s device battery status/charging levels. Yes,
HTML5 provides an API for a device's battery.

[Link] says: “The Battery Status API specification defines a means for the web developers to
programmatically to determine the battery status of the hosting device”.

Check for Battery Status API

You can check whether the battery status API is supported by the browser or not as shown below.

01. var battery = [Link] || [Link] || [Link]


02.
03. if (battery) {
04. // Battery Status API is supported
05. }

The battery status API is currently supported by the latest version of Chrome and Firefox.

Properties

There are four basic properties available in the battery status API.

1. Charging: Charging is a type of Boolean and a read-only that indicates whether the device is
charging the battery. The default value is true.
2. ChargingTime: ChargingTime is type is double and a read-only that gives you the remaining
time in seconds to charge the device battery fully. The default value is 0.
3. DischargingTime: DischargingTime is the type of double and read-only that represents the
remaining time for a complete discharge of the device battery. The default value is calculated
based on the other property values.
4. Level: Level is a type of double and read-only that represents the battery level on a scale of 0 -
1.0. The default value is 1.0.

For more details, visit the following link:

Flexbox in HTML5: An Overview

Question 26: What is the use of the Geolocation API of HTML5?


Answer

[Link] 26/58
9/15/2020 HTML5 Interview Questions

The Geolocation API of HTML5 helps to identify the user’s location. It can be used to provide
location-specific information. For privacy reasons, the user is asked for permission to report location
information. The HTML 5 Geolocation API provides the geographical location of the user. There are
many techniques used to identify the location of the user. A desktop browser generally uses WiFi or
IP based positioning techniques whereas a mobile browser uses cell triangulation, GPS and A-GPS
(Assistive GPS) to triangulate between mobile phone towers and public masts to determine the
location and WiFi-based positioning techniques and so on.

The Geolocation API will use any of these techniques to identify the user’s location. The Geolocation
API protects the user’s privacy by mandating that the user's permission should be sought and
obtained before sending the location information of the user to any website. Hence, the user will be
prompted with a popover or dialog requesting the user’s permission to share the location
information. The user can accept or deny the request.

Geolocation Object

The Geolocation API is published through the [Link] object. If this object is present
then the geolocation service works.

var geolocation=[Link];

A geolocation object is a service object that allows widgets to retrieve information about the
geographic location of the device.

For more details, visit the following link:

Special Symbols in HTML5

Question 27: What is Flexbox in HTML 5?


Answer

Flexbox is not a single property but a set of properties on the parent element and their children.
Basically the parent is a container. It is probably a div called a flex container and the children are the
elements called flex items.

[Link] 27/58
9/15/2020 HTML5 Interview Questions

The preceding picture shows the Flexible Box Module. Let us discuss the attributes of the flexible
box.

Main axis: The main axis is the default flow direction for the flex items.
Main-start and Main-end: The main-start and main-end are the starting point and ending point
for the flex items to flow in the flex container.
Cross axis: The cross axis is perpendicular to the main axis.
Cross-start and Cross-end: The flex items are placed from the start at the cross-start point
and end at a cross-end point.
Main size: The flex items width or height in the main dimension is the main size of the flexbox.
Cross size: The flex items width or height in the cross dimension is the cross size of the
flexbox.

For more details, visit the following link:

Learn HTML5 - Part 2: Web Workers

Question 28: What are the special symbols in HTML 5?


Answer

Special symbols, characters and any other related stuff play a very important role in web
development or any other kind of design and development work since we require several special
symbols or characters in all these activities directly or indirectly. Thus HTML5 provides several
special symbols in its new features. These special symbols are presented in the form of several
predefined sets of codes.

These special symbols provide these functionalities during the web or any other type of design and
development work or procedure.

Extra features
Description of the content
Explains mathematical terms
Reduce the content
Provides proper explanation

Special Symbols

Some of these symbols are as follows:

[Link] 28/58
9/15/2020 HTML5 Interview Questions

[Link] 29/58
9/15/2020 HTML5 Interview Questions

[Link] 30/58
9/15/2020 HTML5 Interview Questions

For more details, visit the following link:

Progress Bar in HTML 5

Question 29: What are Web Workers APIs in HTML 5?


Answer

Web Workers APIs provide a way in JavaScript to run something in the background that can do
tasks without interfering with the user interface. As per the W3C standard "It is a JavaScript script
executed from an HTML page that runs in the background, independently of other user-interface
scripts that may also have been executed from the same HTML page. Web workers are able to
utilize multi-core CPUs more effectively."

[Link] 31/58
9/15/2020 HTML5 Interview Questions

Types of Web Workers

Dedicated workers
Shared workers

Dedicated workers

A dedicated worker is accessible from the parent script that created it


Wide browser support: All
It is simply tied to its main connection

Shared workers

A shared worker can be accessed from any script of the same origin.
Limited browser support: Chrome 4.0+, Safari 5.0+ and Opera 10.6+.
It can work with multiple connections.

Basically, Web Workers work in the following three steps:

First, it should be executed on separate threads.


It should be hosted in separate files from the main page.
Finally, a Worker object needs to be instantiated to call them.

For more details, visit the following link:

Getting Started With Font-Awesome

Question 30: Describe Progress Bar in HTML 5?


Answer

Sometimes a task is running within a program that might take a while to complete. A user-friendly
program provides some information to the user that the task is happening. It also tells how long the
task might take and how much the task has been done or completed. One of the best ways to show
all of these activities is with the Progress Bar control.

Example

When you install a software or upload a file onto a website or when you download a file, you have
seen a progress bar showing how the installation is progressing i.e download or upload has been
done or how much is remaining.

In a simple way, the progress bar indicates the progress of a specific task.

In HTML 5, there is the element "progress" that displays the progress of a task.

Syntax

<progress></progress>

Attribute

It has 2 more attributes as shown in the following table:

Attribute Value Description


Floating Point
max Specifies how much work the task requires in total,(Default value is 1.0)
Number
Floating Point Specifies how much of the task has been completed(This value will be in
value
Number between 0.0<=value<=max)
[Link] 32/58
9/15/2020 HTML5 Interview Questions

For more details, visit the following link:

Various Kinds of Mouse Pointers For HTML Controls

Question 31: What is Font-Awesome in HTML 5?


Answer

These are a simple text that can easily be manipulated like normal texts using the fonts. When you
stretch or enlarge an image (PNG) icon, it becomes blurred, it looks bad in a simple language. If you
enlarge any font from the package of Fontawesome then it would never become blurred or pixelated.
Moreover, no width and no height is required as used in images as attributes as only by increasing
the font-size, it manipulates the icon. The best thing is this package can be downloaded from the
Nuget Package or the Package Manager console too. The following image will show how to install
the package from the PM Console.

For more details, visit the following link:

Getting Started With Font-Awesome

Question 32: What are the Kinds of Mouse Pointers For HTML
Controls?
Answer

Various Kinds of Mouse Pointers in HTML

Alias: It is used for a shortcut or to an alias somewhere.

01. <a href="#" style="cursor:alias;">My HyperLink</a>

Visual Studio Tool Tip for this Mouse pointer.

After running the page, check the mouse pointer.

[Link] 33/58
9/15/2020 HTML5 Interview Questions

All: Scroll: It is used to indicate to scroll in any direction.

01. <a href="#" style="cursor: all-scroll;">My HyperLink</a>

Visual Studio Tool Tip for this Mouse pointer.

After running the page, check the mouse pointer.

Cell: It is used to select a cell or a set of cells.

01. <a href="#" style="cursor: cell;">My HyperLink</a>

Visual Studio Tool Tip for this Mouse pointer.

After running the page, check the mouse pointer.

Col: Resize: It is used to resize the columns horizontally.

01. <a href="#" style="cursor: col-resize;">My HyperLink</a>

Visual Studio Tool Tip for this Mouse pointer.

After running the page, check the mouse pointer.

[Link] 34/58
9/15/2020 HTML5 Interview Questions

Copy: It indicates that some text has been copied.

01. <a href="#" style="cursor: copy;">My HyperLink</a>

Visual Studio Tool Tip for this Mouse pointer.

After running the page, check the mouse pointer.

Crosshair: With a "+" sign.

01. <a href="#" style="cursor: crosshair;">My HyperLink</a>

Visual Studio Tool Tip for this Mouse pointer

After running the page, check the mouse pointer.

Help: It is used to indicate the help.

01. <a href="#" style="cursor help;">My HyperLink</a>

[Link] 35/58
9/15/2020 HTML5 Interview Questions

Visual Studio Tool Tip for this Mouse pointer.

After running the page, check the mouse pointer.

Move: It is used to indicate that something is moving.

01. <a href="#" style="cursor: move;">My HyperLink</a>

Visual Studio Tool Tip for this Mouse pointer.

After running the page, check the mouse pointer.

Pointer: It is used to indicate a pointer.

01. <a href="#" style="cursor: pointer;">My HyperLink</a>

Visual Studio Tool Tip for this Mouse pointer.

After running the page, check the mouse pointer.

[Link] 36/58
9/15/2020 HTML5 Interview Questions

For more details, visit following link:

Various Kinds of Mouse Pointers For HTML Controls

Question 33: What are Frames in HTML?


Answer

Frames allow multiple HTML documents to be present as independent windows within a main
browser. They allow you to present two or more documents at once.

Example

01. <HTML>
02.
03. <HEAD>
04. <TITLE>FRAME EXAMPLE</TITLE>
05. </HEAD>
06. <frameset cols="25%,*,25%">
07. <frame src="[Link]">
08. <frame src="[Link]">
09. <frame src="[Link]">
10. </frameset>
11.
12. </HTML>

A <Frames document> can be declared using the <FRAMESET> element. A regular HTML
Frameset document has a start element and an end element. This element can contain one or more
elements. The SRC attribute of the frameset element points to the document that you want to display
in a [Link] ROWS AND COLS attributes of frameset elements defines the layout of the frame.

01. <HTML>
02.
03. <HEAD>
04. <TITLE>FRAM EXAMPLE</TITLE>
05. </HEAD>
06. <FRAMESET cols="20%, 80%">
07. <FRAMESET rows="100, 200">
08. <FRAME src="contents_of_frame1.html">
09. <FRAME src="contents_of_frame2.gif">
10. </FRAMESET>
11. </FRAMESET>

Type of Frame-

There are two types of frames based on their layout.


[Link] 37/58
9/15/2020 HTML5 Interview Questions

1. Vertical Frames
2. Horizontal Frames

For more details, visit following link:

Working With Frames in HTML

Question 34: Describe MathML in HTML5?


Answer

The Mathematical Markup Language (MathML) is a markup language to show mathematical and
scientific content on the Web. HTML5 allows us to use MathML elements inside a document using
<math>...</math> tags. A mathematical expression must be inserted into the element <math> with a
specified namespace as in the following:

<math xmlns="[Link] </math>

In HTML5 we can simply write <math></math>. The basic elements of the <math> tag are as
follows:

For more details, visit following link:

MathML With HTML5

Question 35: What are the HTML lists?


Answer

In HTML, there are the following types of lists:

Unordered Lists (<ul>) - The list items are marked with the bullets.
Ordered Lists (<ol>) - The list items are marked with the numbers or letters.
Definition Lists(<dl>)- This arranges your items in the same way as they are arranged in a
dictionary.

All lists must contain one or more list elements.

Unordered HTML Lists

An unordered list is a collection of related items that have no special order or sequence. An
unordered list starts with the <ul> element. Each list item starts with the <li> element.

The list items will be marked with bullets (black circles):

01. <!DOCTYPE html>


02. <html>
03.
04. <head>
05. <title>HTML Unordered List</title>
[Link] 38/58
9/15/2020 HTML5 Interview Questions

06. </head>
07.
08. <body>
09. <ul>
10. <li>JavaScript</li>
11. <li>[Link]</li>
12. <li>CSS</li>
13. <li>HTML</li>
14. </ul>
15. </body>
16.
17. </html>

Ordered HTML Lists

If you are required to put your items in a numbered list instead of a bullet, then HTML ordered list will
be used. This list is created using<ol> tag. The numbering starts at one and is incremented by one
for each successive ordered list element starting with the <li> tag.

Example:

01. <!DOCTYPE html>


02. <html>
03.
04. <head>
05. <title>HTML Ordered List</title>
06. </head>
07.
08. <body>
09. <ol>
10. <li>Beetroot</li>
11. <li>Ginger</li>
12. <li>Potato</li>
13. <li>Radish</li>
14. </ol>
15. </body>
16.
17. </html>

HTML Definition Lists

HTML supports a list style which is called definition lists where entries are listed like in a dictionary.
The definition list is the ideal way to present a glossary, list of terms or another name/value list.

Definition List makes use of the following three tags:

<dl> - Defines the start of the list


<dt> - A term
<dd> - Term definition
</dl> - Defines the end of the list

Example:

01. <!DOCTYPE html>


02. <html>
03.
04. <head>
05. <title>HTML Definition Lists</title>

[Link] 39/58
9/15/2020 HTML5 Interview Questions

06. </head>
07.
08. <body>
09. <dl>
10. <dt><b>[Link]</b></dt>
11. <dd>[Link] is easy to Learn</dd>
12. <dt><b>FTP</b></dt>
13. <dd>This stands for File Transfer Protocol</dd>
14. </dl>
15. </body>
16.
17. </html>

For more details, visit following link:

Overview Of HTML Lists

Question 36: What is Microdata in HTML 5?


Answer

Microdata is used to nest metadata within existing content on the web pages. This mechanism
allows machine-readable data to be embedded in HTML documents in an easy-to-write manner, with
an unambiguous parsing model. Microdata allows us to define our own customized elements and
start embedding custom properties in our web pages. Its purpose is not to make a new widget
appear on our web page but to help automated programs like Google understand and better handle
the content of our web pages.

A Microdata consists of a group of name-value pairs. The group of name-value pairs is called items,
each name-value property is called as a property and properties are represented by regular
elements.

Microdata defines five Global HTML attributes that can be applied to any HTML5 tag. Microdata
introduces the following five global attributes that can be available for any element to use and give
context for machines about our data.

Attribute Description
Creates the Item and indicates that descendants of this element contain information
Itemscope about it. The itemscope attribute is a Boolean attribute that tells that there is Microdata
on this page.
Itemtype A valid URL of a vocabulary that describes the item and its properties context.
This attribute defines a property for the [Link] that its containing tag holds the
Itemprop
value of the specified item property.
Itemid Define a unique identifier of the item.
Provides a list of element ids with additional properties elsewhere in the document. This
Itemref
attribute gives a list of additional elements to find the name-value pairs of the item.

Example:

01. <html>
02.
03. <head>
04. <title>Introduction to Microdata</title>
05. </head>
06.
07. <body>
08. <div id="myTab">
09. </div>
[Link] 40/58
9/15/2020 HTML5 Interview Questions

10. <h1>Microdata</h1>
11. <div itemscopeitemtype="[Link]
12. <p>My name is
13. <spanitemprop="name">Pankaj Choudhary</span>.</p>
14. </div>
15. <div itemscopeitemtype="[Link]
16. <p>This is an example of
17. <span itemprop="name">Microdata</span>.</p>
18. </div>
19. </body>
20.
21. </html>

Output:

For more details, visit following link:

HTML5 Microdata

Question 37: What is the difference between HTML5 vs


HTML4.01?
Answer

1. HTML4.01 vs. HTML5

In HTML4.01, we specify a Doctype element like this:

<! Doctypehtml ”-//W3C//DTD HTML4.01 Transitional//EN”>

In HTML5, we declare this element as:

<!Doctype html>

2. HTML4.01 vs. HTML5

In HTML4.01, we generally need to mention a complete referenced tag line for enabling the
functionality of JavaScript or External CSS.

For example: For enabling JavaScript functionality we do:

<script type=”text/javascript” src=”[Link]”>


</script>

For HTML5, we only specify a source, not the type, as in:

<script src=”[Link]”>

[Link] 41/58
9/15/2020 HTML5 Interview Questions

</script>

HTML5 | Tags

HTML5 makes our work easier and more precise using it as it uses several new tags. These tags
directly work without any link or reference.

For example: For including a structuring element and navigation or any other section in our HTML
page, we need to create divisions or the margins for that so that these can work properly in HTML4.
Like:

01. <html>
02. <head>
03. <title></title>
04. </head>
05. <body>
06. <div class="header">
07. <div class="nav">
08. <ol class="nav-list">
09. <li>
10. <a href="[Link]" title="Cshub" alt="Cshub">
11. </li>
12. <li>
13. <a href="[Link]" title=" Picmaniac"
14. </a>
15. </li>
16. <li>
17. <a href="[Link]" title="Google
18. Says </a>
19. </li>
20. </ol>
21. </div>
22. </div>
23. </body>
24. </html>

Using HTML5, we can do that as:

01. <html>
02.
03. <head>
04. <title></title>
05. </head>
06.
07. <body>
08. <header>
09. <nav>
10. <ol id="nav-list">
11. <li> <a href="[Link]" title="Cshub" alt="Cshub"> IT
</li>
12. <li>
<a href="[Link]" title=" Picmaniac" alt=" Picmaniac"> Pic M
</li>
13. <li> <a href="[Link]" title="Google Say
</li>
14. </ol>
15. </nav>

[Link] 42/58
9/15/2020 HTML5 Interview Questions

16. </header>
17. </body>
18.
19. </html>

For more details, visit following link:

HTML5 vs HTML4.01

Question 38: Discuss keyboard shortcut in HTML 5?


Answer

For Displaying the Keyboard text, we can also create the keyboard shortcut to perform various
operations such as clicking a link or a button. We can use the accesskey attribute when defining the
element to provide the keyboard shortcut to that element or control. Let's create a Web Page, named
"[Link]" and understand ‘How to create a keyboard shortcut.

First We will Write a Code for ‘[Link]:

01. <!DOCTYPE HTML>


02. <html>
03.
04. <head>
05. <title>Key Board Shortcut</title>
06. </head>
07.
08. <body>
09. <h1>
10. Use the Shortcut keys to access the Content
11. </h1>
12. <p>
13. Press the <kbd>Alt + W</kbd> keys to navigate the following link :
14. </p>
15. <a href="[Link]" accesskey="w" target="">Open [Link] file. </a>
16. <p>
17. Press the <kbd>ALT + Z </kbd>keys to focus on the following text fie
18. </p>
19. Enter Your Name :
20. <input type="text" name="name" accesskey="z">
21. <p>
22. Press the <kbd>ALT+S</kbd> keys to click the button to submit the fo
</p>
23. <input type="submit" accesskey="s" onclick="alert('Form submitted succes
24. </body>
25.
26. </html>

Here we have used a hyperlink, a text field, and a button on the web page and assigned a keyboard
shortcut using the accesskey attribute. The output of the above code is given below :

[Link] 43/58
9/15/2020 HTML5 Interview Questions

Now When we press ALT + * Key:

ALT + W : The focus goes on the hyperlink and we are redirected to the page specified by the
hyperlink ([Link])

ALT+Z: When we press ALT+Z key then get a focus on the Enter your Name text field.

ALT+S: This focuses on the Submit button and gives an alert box :

For more details, visit the following link:

Keyboard Shortcut in HTML

Question 39:What are HTML5 Semantic Elements?


Answer

HTML5 introduced a new set of Semantic Elements. It helps developers to define the structure of a
page in an easy way.

Semantic means 'meaning' and Semantic Element means elements with a meaning. A Semantic
Element helps the developer and the browser to understand its meaning. There are two types of
Semantic Elements:

Semantic: These elements clearly define their content like <form>, <img>, <table> and so on.
Non-semantic: These elements have no definition, they don't define anything about their
content like <span> and <div>.

Traditional HTML Layouts

Developers have been using <div> elements to manage the entire structure of an HTML page that
includes elements like a header, an article, a footer or a sidebar and you need to use an ID or class
attributes to assign the role of the div elements. Let's design a traditional HTML layout before
heading to HTML5 Semantic Elements.

[Link] 44/58
9/15/2020 HTML5 Interview Questions

New HTML5 Semantic Elements

HTML5 provides some new Semantic Elements that are semantically meaningful to describe a
webpage layout. It's easy to understand and organize our code. It helps search engines to organize
content more efficiently as well. The following is a list of the new HTML5 elements:

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

For more details, visit following link:

Working With Semantic Elements in HTML5 With Layout Examples : Part 1

Question 40: What is the difference between Article Vs Section


tags in HTML5?
Answer
[Link] 45/58
9/15/2020 HTML5 Interview Questions

He <article> element is a special type of <section>. <article>has more specific meaning as


compared to <section> that is, it is independent, self-contained block of related content.

We can use<section>, but we mostly use <article> to give more specific meaning to the content.

<section> is only a block of a related content and <div> is only a block of content. We need to
mention here that the pubdate attribute does not apply in <section>.

The pubdate attribute is used as one-time attribute in <article>.If it is present, it indicates that the
<time> element is the date, the <article> was published. It can be written in several ways, the most
popular being:

pubdate

pubdate="pubdate"

To decide, which of three elements is appropriate, choose the first suitable option:

1. Would the content make sense on its own in a feed reader? If so use <article>
2. Is the content related? if so use <section>
3. Finally, if there's no semantic relationship use <div>

Here is an example of <section> containing <article>:

01. <h1>Articles on: Fruit</h1>


02. <article>
03. <h2>Apple</h2>
04. <p>The apple is the pomaceous fruit of the apple tree...</p>
05. </article>
06. <article>
07. <h2>Orange</h2>
08. <p>The orange is a hybrid of ancient cultivated origin, possibly between
</p>
09. </article>
10. <article>
11. <h2>Banana</h2>
12. <p>Bananas come in a variety of sizes and colors when ripe, including ye
</p>
13. </article>
14. </section>

For more details, visit following link:

Difference Between Article and Section Tag

Question 41: What are the advantages and limitations of HTML5


Web Worker
Answer

Advantages

We know the web browsers increased a lot over the past few years and it is primarily because of a
lot of work done is being done on its engines, ex- V8 (Google), Chakra (Microsoft). The JavaScript
so far runs in a single thread. The problem with single-threaded architecture is that it blocks the code

[Link] 46/58
9/15/2020 HTML5 Interview Questions

and UI becomes unresponsive in case of running a complex script. There are various ways to solve
this problem:

Offload work to the server but to make apps faster, the fat client is preferred.
Use asynchronous calls but many complex ecosystem of async calls & promises can lead to
callback hell.
Leverage multi-threading. Interesting!

Web Workers solve this issue by providing the capability of multi-threading in JavaScript.

Features available to WW

Due to the multi-threaded behavior, a WW only has access to the following subset of JavaScript
features:

The navigator object


The location object
XMLHttpRequest
setTimeOut/clearTimeOut/setInterval/clearInterval
importScripts
spawning other WW

Limitations of WW

It has some limitations apart from its multithreading advantage, i.e., it can't access:

DOM elements
window object
document object
parent object

For more details, visit the following link:

HTML 5 Web Workers

Question 42: How can we use Details Tag in HTML5?


Answer

The <details> tag is a new tag in HTML 5. The <details> tag specifies additional information or
controls about the documents that the user can view or hide on demand. The contents of the details
tag are hidden by default. The header is visible and can be shown when the user clicks on the
header portion of <details> tag. The contents of the details tag are made visible by adding an open
attribute to the <details> tag. The tag can also be used along with the summary tag to make your
own header so that the user can expand or collapse the details of the document when required. This
tag is only supported by Chrome.

Syntax

<details open="open">

<summary></summary>

<p></p>

</details>

Element-Specific Attribute

[Link] 47/58
9/15/2020 HTML5 Interview Questions

Attributes Values Description


This Boolean attribute specifies whether the details of the data should be shown
open open
to the user or not.

For more details, visit the following link-:

Details Tag in HTML5

Question 43: What is the figure tag in HTML 5?


Answer

Figure tag is useful to markup a photo in the document. It is used to specify the self-contained block,
images, etc.

Its content belongs to the main document. But if we want to remove it, we can remove it
independently as it does not effect the rest of the document.

01. <!DOCTYPE html>


02. <html>
03. <body>

<p>Are you going to the Mindcracker MVP Summit 2012 at Noida or interested in learning the daily
progress of the summit? Check out daily updates here and let the saga begin.</p>

<figure>

<imgsrc="[Link]" alt="C# Corner" width="100" height="100" />

</figure>

</body>

</html>

For more details, visit the following link:

figure tag in HTML5

Question 44: What are the formatting elements in HTML 5?


Answer

Following is a list of formatting elements:

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

Emphasized text– The syntax of the Emphasized text element is <em> which defines emphasized
text.

Example:

[Link] 48/58
9/15/2020 HTML5 Interview Questions

01. <!DOCTYPE html>


02. <html>
03.
04. <head>
05. <title>HTML formatting element sample</title>
06. </head>
07.
08. <body>
09. <p>Hi. This is Raj Kumar Beniwal Here (This is normal text) </p>
10. <p>
<em> Hi. This is Raj Kumar Beniwal Here (This is normal text) </em> </p>
11. </body>
12.
13. </html>

Marked text– The syntax of marked text element is <mark> which defines marked or highlighted
text.

Example:

01. <!DOCTYPE html>


02. <html>
03.
04. <head>
05. <title>HTML formatting element sample</title>
06. </head>
07.
08. <body>
09. <h2>Hi. This is <mark>Raj Kumar</mark> Beniwal Here. </h2>
10. </body>
11.
12. </html>

Small text– The syntax of small text element is <small> which defines small text.

Example:

01. <!DOCTYPE html>


02. <html>
03.
04. <head>
05. <title>HTML formatting element sample</title>
06. </head>
07.
08. <body>
09. <h1>Hi. This is <small>Raj Kumar</small> Beniwal Here. </h1>
10. </body>
11.
12. </html>

Deleted text– The syntax of deleted text is <del> which defines deleted or removed text.

Example:

01. <!DOCTYPE html>


02. <html>
03.
04. <head>
[Link] 49/58
9/15/2020 HTML5 Interview Questions

05. <title>HTML formatting element sample</title>


06. </head>
07.
08. <body>
09. <h1>Hi. This is <del>Raj Kumar</del> Beniwal Here. </h1>
10. </body>
11.
12. </html>

Inserted text– The syntax of inserted text element is <ins> which defines inserted or added text.

Example:

01. <!DOCTYPE html>


02. <html>
03.
04. <head>
05. <title>HTML formatting element sample</title>
06. </head>
07.
08. <body>
09. <h1>Hi. This is Raj <ins>Kumar</ins> Beniwal here. </h1>
10. </body>

Subscripts text– The syntax of subscripts text element is <sub> which defines subscripted text.

Example:

01. <!DOCTYPE html>


02. <html>
03.
04. <head>
05. <title>HTML formatting element sample</title>
06. </head>
07.
08. <body>
09. <h1>Hi. This is <sub>Raj Kumar</sub> Beniwal here. </h1>
10. </body>
11.
12. </html>

Superscripts text– The syntax of superscript text element is (sup> which defines superscripted text.

Example:

01. <!DOCTYPE html>


02. <html>
03.
04. <head>
05. <title>HTML formatting element sample</title>
06. </head>
07.
08. <body>
09. <h1>Hi. This is <sup>Raj Kumar</sup> Beniwal here. </h1>
10. </body>
11.
12. </html>

[Link] 50/58
9/15/2020 HTML5 Interview Questions

For more details, visit following link:

HTML 5 – Some important formatting elements

Question 45: Why to use IndexedDB instead of Web SQL in HTML


5?
Answer

This IndexedDB has been introduced with HTML5. This allows a user to store a large amount of data
in the browser. It has been proved that IndexedDB is more powerful and efficient than other storage
mechanisms like Local Storage and Session Storage. IndexedDB is an API that helps the
developers to do some database operations on the client-side like creating a database, opening the
transaction, creating tables, inserting values to the tables, deleting the values, and reading the data.
If you need any other way to save some data on the client-side, you can use storage mechanisms
introduced in HTML5.

W3C has announced that use of Web SQL is obsolete and deprecated, hence it is not
recommended to use Web SQL in your Applications. Most of the modern web browsers like Mozilla
do not support the use of Web SQL and this is also a great limitation of Web SQL.

Now we have an alternative to Web SQL. IndexedDB is more efficient and faster than Web SQL.
The following are some of the main advantages of IndexedDB.

It stores the data as Key-Pair values


It is asynchronous
It is non-relational
Can access the data from the same domain

For more details, visit the following link:

Introduction to IndexedDB

Question 46: How you can Use Modernizr in HTML 5?


Answer

Modernizr is an open-source JavaScript library that helps to detect features of HTML5 and CSS3.

You can download the Modernizr library from this link.

The good thing about the Modernizr JS is that we can download this depending on the requirements.
In other words, if an application needs to check for only a few features of HTML5 and CSS3 then
select those features and download the file. That JavaScript file will contain only the source code for
the selected features.

How to use Modernizr JS.

On every page, you need to add the following tag:

Add the [Link] like we add any JavaScript file as shown below:

[Link] 51/58
9/15/2020 HTML5 Interview Questions

In the following source code, if the HTML5 Canvas tag is supported then the following picture will
draw on the Canvas object else the same kind of picture will be shown using the image tag.

For more details, visit the following link-

How to Use Modernizr

Question 47: What is the difference between Canvas and SVG


elements?
Answer

SVG is a part of the Vector-based family of graphics. It is completely different from Raster based
graphics. The most common Raster-based formats used on the web today are JPEG, GIF, and PNG.
SVG is a W3C recommendation. SVG graphics do NOT lose any quality if they are zoomed or
resized.

The <canvas> element:

It helps the browser to draw shapes and images without any plugin.
Used to draw graphics.
It has several methods to draw paths, boxes, circles, characters and add images.

Comparison Of SVG and Canvas

SVG Canvas
Object Model-based (SVG elements are Pixel-based (the canvas is essentially an image
similar to HTML elements) element with a drawing API)
Multiple graphical elements that become part
Single HTML element similar to <img> in behavior
of the Document Object Model (DOM)
Visual presentation created with markup and Visual presentation created and modified
[Link] 52/58
9/15/2020 HTML5 Interview Questions

modified by CSS or programmatically through programmatically through the script


the script
Event model/user interaction is object-based at Event model/user interaction is coarse, at the
the level of primitive graphic elements, such as canvas element only; interactions must be manually
lines, rectangles, and paths programmed from mouse coordinates
The API does not support accessibility; markup-
SVG markup and object model directly support
based techniques must be used in addition to
accessibility
canvas

Some other Differences between Canvas and SVG elements

Canvas SVG
Canvas draws 2D graphics, on the fly (with a
SVG defines the graphics in XML format.
JavaScript).
Resolution dependent. Resolution independent.
In SVG, each drawn shape is remembered as an
Canvas is rendered pixel by pixel.
object.

For more details, visit the following link:

HTML5 SVG

Question 48: What is the use of Language attribute in HTML 5?


Answer

The Language attribute-

The document language can be declared in the <html> tag.


The language is declared in the language attribute.
Declaring a language is important for accessibility applications (screen readers) and search
engines.

Example

01. <!DOCTYPE html>


02. <html lang="en-US">
03.
04. <body>
05. <h1>My First Heading</h1>
06. <p>My first paragraph.</p>
07. </body>
08.
09. </html>

The first two letters specify the language (en). If there is a dialect, use two more letters (US).

For more details, visit the following link:

HTML For Beginners: Part 3

Question 49: What is the use of WebSocket API?


Answer

WebSockets provide a rich protocol to perform bi-directional communication and we can create a
full-duplex communication channel that can be operated through a single socket over the Web and
[Link] 53/58
9/15/2020 HTML5 Interview Questions

for that reason, its more attractive for things like games, messaging apps and for real-time updates
in both directions.

WebSocket is basically used to reduce the overhead of HTTP since it has its own protocol defined
by IETF and an API for the server communication. By using them, the client notifies the WebSocket
server with the recipients' ID of an event and the server immediately notifies all the active clients and
the last clients process the event when the given recipient ID matches the client ID.

Key Features of WebSocket

WebSocket is a rich protocol to perform bi-directional communication.


It’s a full-duplex communication channel that can operate through a single socket over the
Web. Your request reuses the same connection from the client to the server and the server to
the client.
It makes a single request and the single request greatly reduces the latency over polling.
Communication becomes more efficient since bandwidth, CPU power and latency is saved.
You can build other standard protocols on top of its protocol.
WebSocket is a feature that makes HTML5 more advanced.
WebSocket is about simplicity.

For more details, visit the following link:

Learn HTML5 - Part 4: WebSocket API

Question 50: What are HTML 5 Symbol Entities?


Answer

There is a wide category of HTML symbols for various purposes and applications like:

Mathematical operators
Arrows
Technical symbols
Shapes
Special Symbols and so on

[Link] 54/58
9/15/2020 HTML5 Interview Questions

Functionalities | HTML5 Symbols

Several special symbols are not present on a normal keyboard. We can use special symbols along
with several combinations of attributes and the entities available in HTML5. There are generally 3
ways or procedures through which we can access or use all the functionalities provided by HTML5.

Methods | HTML5 Symbols

To add these symbols to an HTML page, these methods are:

For more details, visit following link:

HTML5 Symbol Entities

Question 51: What is Template tag in HTML 5?


Answer

[Link] 55/58
9/15/2020 HTML5 Interview Questions

W3C has introduced a new "template" tag that provides a mechanism to define HTML markup
fragments as prototypes. In practice, a template can be used to insert fragments of HTML code into
your page, for example:

01. <template id="rowTemplate">


02. <tr>
03. <td class="record"></td>
04. <td></td>
05. <td></td>
06. </tr>
07. </template>

Features

The following are the features of the template tag:

The template code can be defined nearly anywhere; the head, body or even a frameset.
Templates will not be displayed
Templates are not considered to be a part of the document. In other words, using
[Link](“mytablerow”) will not return child nodes.
Templates are inactive until used. In other words, enclosed images will not download, media
will not play, scripts will not run and so on.

Using templates

To use a template, it must be cloned and inserted into the DOM. For example, assuming the
following HTML:

01. <table id="testTable">


02. <thead>
03. <tr>
04. <td>
05. ID
06. </td>
07. <td>
08. name
09. </td>
10. <td>
11. twitter
12. </td>
13. </tr>
14. </thead>
15. <tbody>
16. <!-- rows to be appended here -->
17. </tbody>
18. </table>
19. <!-- row template -->
20. <template id="rowTemplate">
21. <tr>
22. <td class="record"></td>
23. <td></td>
24. <td></td>
25. </tr>
26. </template>

Use the following to clone the new row and append it to the table in JavaScript:

01. // get tbody and row template

[Link] 56/58
9/15/2020 HTML5 Interview Questions

02. var t = [Link]("#testTabletbody"),


03. row = [Link]("rowTemplate");
04. // modify row data
05. var td = [Link]("td");
06. td[0].textContent = "1";
07. td[1].textContent = "Sunny";
08. td[2].textContent = "@sunny_delhi";
09. // clone row and insert into table
10. [Link]([Link](true));

For more details, visit the following link:

Template Tag in HTML5

Question 52: What is the difference between XHTML and HTML?


Answer

XHTML

XHTML stands for ”eXtensible Hyper Markup Language”. It is an extended version of HTML 4.01.
XHTML is HTML which is defined in XML format .Therefore, it is an XML application. XHTML is
basically supported by almost all the available major browsers like Internet Explorer, Opera, Safari,
and Chrome.

There are many web pages available on the internet that contain “bad HTML” means those don't
follow the actual principle of HTML but still execute very well.

For example,

01. <html>
02.
03. <head>
04. <title>
05. This is a bad HTML page
06. </title>
07. </head>
08.
09. <body>
10. <h1>Bad HTML
11. <p> This is a web page that contain bad HTML.
12. </body>
13. </html>

HTML

HTML is proposed by Tin-Berners-Lee in 1987.


HTML is developed by W3C and WHATWG.
HTML files are saved with .html and .htm extension.
HTML is an SGML (Standard Generalized Markup Language) application.

Example

01. <html>
02.
03. <head>
04. <title>This is an XHTML page </title>
05. </head>

[Link] 57/58
9/15/2020 HTML5 Interview Questions

06.
07. <body>
08. <p> This is my first XHTML page
09. </body>
10.
11. </html>

[Link] 58/58

You might also like