Html Interview Question & Answer Q6 to 30

Q-6. What are the new Form elements made available in HTML5?

Answer.

When we want to collect some data from the person visiting our site, we use HTML Forms. An example is, the user has to enter his name, email id when he registers for the first time.

A form takes input from the site visitor and then posts it to a back-end application such as CGI, ASP Script or PHP script. The back-end application will then perform required processing on the passed data based on defined business logic inside the application.

There are various form elements available in earlier version of HTML like, text fields, text area fields, drop-down menus, radio buttons, checkboxes, etc.

HTML5 provides the support of some new Form elements that are as follows.

<datalist> – It represents a list of pre-defined options for input controls.

<keygen> – It defines a key-pair generator field (for forms).

<output> – It represents the result of the calculation.

Q-7. What is a semantic element in HTML5? Also, explain the difference between semantic and non-semantic elements?

Answer.

Semantic elements are one of the new features that are part of HTML5. They intend to help the developers in quickly creating the page structure.

A semantic element has its meaning expressed to both the browser and the developer. Also, all the modern browsers support this feature. However, it is possible for a developer to train old browsers to handle unknown elements.

Here is the list of some of the commonly used HTML5 Semantic Elements.

<nav>

<aside>

The difference – Semantic Vs. Non-semantic.

Semantic – These elements clearly describe their content like <img>, <form>, <table> etc.

Non-semantic – These elements are without any definition. They don’t describe anything about their structure such as <span> and <div>.

Q-8. What are the various tags provided for better structuring in HTML5?

Answer.

The various tags provided for better structuring in HTML 5 are:

<article> – This tag defines an article.

<aside> – It defines content other than the page content.

<bdi> – This tag isolates a part of the text for formatting in a different direction, from another text present there.

<command> – It defines a command button to be invoked by the user.

<details> – It outlines the additional details that a user can hide or view as per choice.

<dialog> – It defines a dialog box.

<figure> – This tag specifies content like illustrations, diagrams, photos, code listings, etc.

<figcaption> – It provides a caption for a <figure> element.

<footer> – This tag defines a footer for a document or a section.

<header> – This tag describes a header for a document or a section.

<hgroup> – When there are multiple levels in a heading, it groups a set of <h1> to <h6> elements.

Q-9. How can we get the geographical position of a user in HTML5?

Answer.

Yes, HTML5 can retrieve the location of a user with the use of Geolocation API. It provides getCurrentPosition() method to get the user’s current position.

Q-10. Describe Form Input Types in HTML5?

Answer.

HTML5 is the new standard for HTML that provides 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 for forms provided by HTML5 are as follows.

color – It’s applicable for HTML elements that represent color.

date – It allows the user to select a date.

DateTime – It enables the user to select a date and time (with time zone).

DateTime-local – It allows the user to select a date and time (without time zone).

email – It is applicable for input fields that contain an e-mail address.

month – It permits the user to select a month and year.

number – It is applicable for input fields that accept a numeric value. It allows setting restriction on the data type of the number, this field takes.

range – It is applicable for input fields that accept a value from a range of numbers. It allows setting restriction on the data type of the number, this field takes.

search – It gets used for search fields.

tel – It defines a field for entering a telephone number.

time – It allows the user to select a time.

URL – It is applicable for the input fields that contain a URL address.

week – It allows the user to select a week and a year.

Q-10. How can we retrieve the geographical position of a user using HTML5?

Answer.

HTML5 provides the support of Geolocation API to retrieve the location of a user.

We can find out the current position of the user using getCurrentPosition() method of this API.

Q-11. What is HTML5 Graphics?

Answer.

In HTML5, there are two types of graphics.

Scalable Vector Graphics (SVG).

The HTML5 <svg> element is a container for SVG graphics. It provides several methods for drawing boxes, paths, text, circles, and graphic images.

SVG is beneficial as nowadays, people are using high-resolution devices (iPads and Monitors), so it becomes impressive as designs, logos, and charts scale according to the requirement, maintaining the picture quality.

SVG is XML based, which means that every element is available within the SVG DOM. It treats every shape as an object. If the user changes the attributes of any SVG object, the browser will automatically re-render the shape.

Canvas.

It is a rectangular area on the HTML page for drawing graphics on the fly, using JavaScript.

The default size of the canvas is 300 PX × 150 PX (width × height).

The HTML tag <canvas> is a container for the Canvas graphics. Canvas gets executed on the pixel by pixel basis.

In Canvas, browser forgets the graphic, after drawing it. If the user tries to modify it, the entire scene needs to be redrawn, including all the objects present in the graphic.

Q-12. Explain the key differences between SVG and Canvas?

Answer.

Canvas is resolution dependent while SVG is not.

Canvas does not provide any support for event handlers while SVG does provide the support for event handlers.

Canvas is suitable for graphic-intensive games while SVG is not suitable for gaming.

Canvas is suitable for small rendering areas while SVG is suitable for large rendering areas like Google maps.

Canvas provides a less interactive animated user interface. Whereas, the interface provided by SVG is very highly interactive.

Q-13. How can we create a new HTML element?

Answer.

We can even create new elements for the document as follows.

document.createElement﴾"myElement"﴿

</script>

It can be used in the HTML as.

<myElement>hello</myElement>

Q-14. What is the use of Drag and Drop in HTML5?

Answer.

Drag and Drop (DnD) is a powerful User Interface concept, which enables the user to copy, reorder and delete any number of items, just with the help of mouse click. To do this, the user has to click and hold the mouse button over an element, drag to the required location, and finally release the button to drop the element there.

With HTML4, developers have to either do complex Javascript programming or use other Javascript frameworks like jQuery to achieve this functionality.

HTML 5 introduced a Drag and Drop (DnD) API that provides the support of all the fundamental DnD operations to the browser. Thus making it easy for the developers to code it.

Latest versions of all the main browsers, like Chrome, Firefox, and Safari, support this DnD API of HTML5.

Drag and Drop Events.

Many events get triggered during various stages of the drag and drop operation. These events are listed below.

dragstart – it gets triggered when the user starts dragging a draggable object.

dragenter – it gets triggered when the user has dragged the draggable element over the target element.

drag – it gets fired when the object is getting dragged.

dragend – it gets fired when the user releases the mouse button after dragging an object.

dragleave – This event gets triggered when the mouse leaves an element while a drag is occurring.

dragover – This event gets fired when the mouse moves over an element while a drag is occurring.

Q-15. What is HTML5 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. It allows the web pages to store the data locally in the user’s browser.

Following are the advantages of HTML5 Web Storage.

It can store 5 to 10 MB data. That is far more than what cookies allow.

HTML5 never transfers Web storage data with any HTTP request. Thus creating less overhead than cookies and in turn, increase the performance of the application.

Apps can work both online and offline.

This API is easy to learn and use.

Q-16. What are the different types of Web Storage provided by HTML5?

Answer.

There are two types of Web Storage.

1. Session Storage

As its name indicates, it stores data of current session only. The data stored in Session Storage clears on closing the browser.

Following methods are available to access Session Storage.

Use setItem() function to store data in Session Storage

sessionStorage.setItem (‘key’,’value’);

For Example.

sessionStorage.setItem (‘username’,’Meenakshi’)

Use getItem() function to retrieve data from Session Storage

sessionStorage.getItem(‘key’);

For Example.

var username= sessionStorage.getItem(‘username’);

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

sessionStorage.setItem (‘object’, JSON.stringify(object));

If JSON string gets stored in Session Storage, then first convert it into an object as follows.

var object=JSON.parse(sessionStorage.getItem(‘object’));

Use removeItem() function to delete a particular key from Session Storage.

sessionStorage.removeItem(‘key’);

2. Local Storage

Local Storage is the second type of HTML Web Storage. It stores data as KEY/VALUE pair.

Following functions are available to access Local Storage.

Use setItem() function to store data in Local Storage

localStorage.setItem (‘key’,’value’);

Use getItem() function to retrieve data from Local Storage

localStorage.getItem(‘key’);

Q-17. What is the need of introducing Local Storage in HTML5?

Answer.

Before HTML5, LocalStores was done with Cookies. They are not very good for large amounts of data, because, with every request, it passes this data to the server, making it very slow and ineffective. However, HTML5 does not pass this data on every server request. It uses the data ONLY when required. In HTML5, it is possible to store large amounts of data without affecting the website’s performance. Data for different website gets stored in separate areas. However, a particular website can only access its own data.

Q-18. Explain the key differences between localStorage and sessionStorage objects?

Answer.

Following are the key differences between localStorage and sessionStorage objects.

The localStorage object stores the data without an expiry date. However, sessionStorage object stores the data for only one session.

In the case of a localStorage object, data will not delete when the browser window closes. However, the data gets deleted, if the browser window closes, in the case of sessionStorage objects.

The data in sessionStorage is accessible only in the current window of the browser. But the data in the localStorage can be shared between multiple windows of the browser.

Q-19. What is the concept of Application Cache in HTML5? What are its advantages?

Answer.

HTML5 introduced the concept of Application Cache. It means that a web application is cached, and is accessible without an internet connection.

Following are the key advantages of Application Cache.

Offline browsing – Users can use the application even when they are offline.

Speed – Cached resources load faster as compared to content that gets

downloaded, directly from the server.

Reduced server load – The browser will only download updated/modified resources from

the server.

Q-20. What is a Manifest file?

Answer.

A Manifest file is a simple text file, that tells the browser what to cache and what not to cache.

A Manifest file contains three Sections as

CACHE MANIFEST – HTML5 performs the caching of files listed under this section after

they get downloaded for the first time.

NETWORK – Files listed here, always need a connection to the server. The browser can never cache them.

FALLBACK – Files listed here specify the fallback pages, if any page in it is not accessible.

Q-21. What is the difference between HTMl5 Application cache and regular HTML browser cache?

Answer.

Following are the key differences between the two.

In AppCache, we can define all the assets the browser should cache in a manifest file (even the entire site). For fetching this content, it is not necessary for the user to have accessed it previously. In other words, Application Cache can prefetch pages that have not been visited at all and are thereby unavailable in the regular browser cache. However, the browser cache will only store the pages (and associated assets) the user has visited actually.

The AppCache allows web apps (and websites) to be made available offline, that too, with the same speed benefits as the regular browser cache could provide only when the user is online.

Q-22. What is a Web Worker? How does it work?

Answer.

JavaScript will hang the browser if it has to handle UI events, query large amounts of API data for processing, and manipulate the DOM simultaneously.

Web Workers handle this situation by doing all the high computation tasks without interrupting the user interface. They do this by running on separate threads. Thus we can say that.

A web worker is a script, which runs in the background. It exists in external files.

The user can perform actions like clicking, selecting things and so on. Meanwhile, the Web worker runs in the background.

It is appropriate, to use Web worker for CPU intensive tasks.

Since Web workers are in external files, they do not have access to the following JavaScript objects.

The window object

The document object

The parent object

How does a Web worker work?

A Web worker gets initialized with the URL of a JavaScript file that contains its code. This code sets event listeners and starts communication with the script that invoked the worker from the main page. The Syntax is as follows.

var worker = new Worker("sample_prog.js"﴿;

If the javascript file specified in the above code exists, the browser spawns a new worker thread.

Once the Web worker gets spawned, it starts the communication with the parent page, using the postMessage() method. The Web worker, in turn, returns a message, that gets accessed using the onmessage() event on the main page.

Let’s take an example, where the script spawns a Web worker to execute a loop having thousands of iterations. After that, the Web worker returns the calculated value to the HTML page.

var worker = new Worker('calculateLoop.js');

worker.onmessage = function (event) {

alert("Completed " + event.data + "iterations" );

};

</script>

Below is the code of “calculateLoop.js” file. It makes use of postMessage() API, to pass the communication back to the HTML page.

for (var i = 0; i <= 1000000000; i += 1){

var j = i;

}

postMessage(j);

Q-23. What are the new attributes provided in HTML5 for <form>?

Answer.

The new attributes provided in HTML5 for <form> are.

autocomplete

It specifies if a form or an input field should have “autocomplete” feature set as on or off.

If autocomplete is set to on, it enables the browser to fill the values, based on the values that the user starts to enter.

autocomplete works for input types like text, search, URL, tel, email, password, date pickers, range, and color.

novalidate

It is a boolean attribute.

Its presence signifies that the form-data should not get validated at the time of submission.

Q-23. What is output element in HTML5?

Answer.

Output element gets used when you design a form, that displays the result of a computation. Along with the standard global attributes, <output> also accepts for, form, and name attributes.

Let’s see a simple example of the <output> element that adds two numbers and displays the resulting value.

<!DOCTYPE html>

<html>

<head>

<title>HTML Output Tag</title>

</head>

<body>

<input type="range" name="va1" value="10" /> +

<input type="number" name="val2" value="20" /> +

The output is: <output name="sumresult"></output>

</body>

</html>

The form attribute associates the <output> with a form. It displays the output as “70” on the web page.

Q-24. What are the new attributes provided in HTML5 for <input> element?

Answer.

Following are the new attributes provided in HTML5 for <input>.

autofocus

It is a Boolean attribute.

The presence of this attribute means that an <input> element should automatically come into focus when the page gets loaded.

form

This attribute specifies about all the forms, to which a particular <input> element belongs.

formaction

This attribute defines the URL of a file, that will process the input control after the form gets submitted.

This attribute is used along with type=”submit” and type=”image”.

Also, it overrides the action attribute of the <form> element.

formenctype

This attribute defines, the method to encode the form data before submitting it to the server.

It gets used with type=”submit” and type=”image”.

Also, it overrides the enctype attribute of the <form> element.

formmethod

It defines the HTTP method used for sending form related data to the action URL.

It gets used with type=”submit” and type=”image”.

It overrides the method attribute of the <form> element.

formnovalidate

It is a boolean attribute.

It gets used with type= “submit”.

It indicates that the validation of the <input> element, should not be done at the time of submission.

It overrides the novalidate attribute of the <form> element.

formtarget

It specifies a name or a keyword of the area where response received after submitting the form will be displayed.

It gets used with type=”submit” and type=”image”.

height and width

It specifies the height and width of an <input> element.

It gets used only with <input type=”image”>.

list

It refers to a <datalist> element, which contains a list of pre-defined options for an <input> element.

min and max

It specifies the minimum and maximum value for an <input> element.

It works with the following input types, number, range, date, datetime, datetime-local, month, time, and week.

multiple

It is a boolean attribute.

It specifies that the user is allowed to enter more than one value in the <input> element.

It works with the following input types: email and file.

pattern

It specifies a regular expression with which the value of the <input> element gets compared.

It works with the following input types: text, search, URL, tel, email, and password.

placeholder

It displays a short hint that indicates the expected value of an input field.

It works with the following input types: text, search, URL, tel, email, and password.

required

It is a boolean attribute.

It indicates that it is mandatory to fill the particular field, before submitting the form.

step

It specifies the legal number intervals for an <input> element.

It works with the following input types: number, range, date, datetime, datetime-local, month, time, and week.

Q-25. What is the major difference between, Transitional and Strict doctype?

Answer.

Strict – This DTD contains all HTML components and properties. However, it does NOT INCLUDE presentational or expostulated components (like text style). It does not permit the use of Framesets.

Transitional – This DTD contains all HTML components and properties, INCLUDING presentational and belittled components (like textual style). It does not allow the use of Framesets.

Q-26. What is Audio Tag in HTML 5? What are its attributes>

Answer.

This new element allows you to embed audio files in an HTML or XHTML document, without the need for any plugins. The Audio tag is a new tag introduced in HTML5. You can use it to play audio sound like .mp3, wav, and .ogg.

Using the <source> tag, we can specify media along with media type and many other attributes. An audio element allows multiple source elements and browser will use the first recognized format.

<!DOCTYPE HTML>

<html>

<body>

Your browser does not support the audio element.

</audio>

</body>

</html>

The HTML5 audio tag supports following attributes to direct the look and feel and various functionalities of the control.

autoplay

It is a boolean attribute. If, the value is set the audio track starts playing automatically. The System will not wait for data loading to complete.

autobuffer

It is a boolean attribute. If set, the audio will automatically begin buffering, even if the automatic play is not enabled.

controls

If this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback.

loop

Setting this boolean attribute would automatically restart the audio from the beginning, once it reaches to the end.

preload

This attribute specifies that the audio will be loaded at page load, and will be ready to run. If autoplay is present, this attribute will not work.

src

It represents the URL of the audio to embed. Its presence is optional.

Q-27. What is the use of <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 fieldset.

Following is the Syntax of the <fieldset> tag in HTML5.

<fieldset>Controls</fieldset>

All the popularly known browsers provide the support for the <fieldset> tag.

HTML5 supports following attributes with the fieldset tag.

disabled

Its value is disabled. It specifies, whether the fieldset will be displayed or not.

name

Its value is in the form of text. It defines the name of the fieldset.

form

Its value is the name of the form. It specifies the form related to the fieldset.

Let’s see an example, where we create a fieldset in a form. Here we use the <legend> tag to define the heading for the fieldset.

<html>

<body>

<form>

<legend>Personal Information</legend>

First Name: <input type="text" />

<br/><br/> person_Address: <input type="text" />

<br/><br/> person_Qualification: <input type="text" />

</fieldset>

</form>

</body>

</html>

Q-28. What are the HTML tags which get deprecated in HTML5?

Answer.

Following are the tags that are deprecated in HTML5.

<big>

<font>

<s>

<tt>

<u>

<frame>

<dir>

Some attributes from HTML4 are no longer allowed in HTML5 since their functionality is better handled by CSS. Below are some of the known attributes that got removed and the corresponding impacted element.

Attribute Removed Element

rev, charset a, link

longdesc, name img

version html

abbr th

scope td

align all block level elements

background body

hspace, vspace img

bgcolor table, tr, td, th

border, cell padding, cell spacing table

height, width td, th

valign table

Q-29. What is a meter tag? What is the difference between progress tag and a meter tag?

Answer.

The <meter> tag defines a scalar measurement within a known range or a fractional value. We can also call it a gauge.

Some of the items that can be represented using <meter> tag are Disk usage, the relevance of a query result, and so on.

Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag.

Following example demonstrates the use of the <meter> tag.

The <meter> tag provides the support of the following attributes.

min

It is a number. It specifies the minimum value of the range.

max

It is a number. It specifies the maximum value of the range.

low

It is a number. It defines a range that represents <low> value.

high

It is a number. It defines a range that represents “high” value.

value

It is a number. It is a mandatory element. It defines the current value of the gauge.

optimum

It is a mandatory element with a numeric value. It specifies the optimum, or the best value, for the element. If this value is higher than the “high” value, this indicates that the higher the value, the better it is. If it’s lesser than the <low> mark, it means that the lower values are better. If it is, in between, then it indicates that neither high nor low values are good.

form

It specifies one or more forms that define the <meter> element. It has value form_id.

Q-30. Why do we need HTML5 Server-Sent Events?

Answer.

HTML5 Server-Sent Events (SSE) is a new way for the web pages to communicate with the web server. It enables a webpage to get updates from a server automatically. It was possible earlier also, but for this, the web page needs to ask if any updates were available. The client makes a request and waits for the server to respond with data. Once the web server provides its response, the communication is over.

However, there are some situations, where web pages require a long-term connection with the web server. A typical example is stock quotes on finance websites where price update happens automatically. Other examples are news feeds, sports results that run continuously on media websites, Facebook/Twitter updates and so on.

We can achieve the above, using HTML5 using SSE. It enables a web page to hold an open connection to the web server so that it can send a response automatically at any time. Thus there’s no need to reconnect and run the same server script from scratch over and over again.

Receive Server-Sent Event Notifications.

The EventSource interface contains the Server-Sent event API. We need to create an EventSource object to receive the Server-Sent event notifications. Following is the code for the same.

var source = new EventSource("sse_demo.php");

source.onmessage = function(event) {

document.getElementById("result").innerHTML += event.data + "<br>";

};

Above code performs following steps.

First, create a new EventSource object, and specify the URL of the page sending the updates (in this example “sse_demo.php”).

Every time an update arrives, onmessage event gets triggered.

When an onmessage event occurs, it places the received data into the element that has <id = result>.

Server-Side Code Example.

For the above example to work, we need a server capable of sending data updates. The server-side event stream syntax is simple. Set the “Content-Type” header to “text/event-stream”. Now you can start sending event streams. Following is the code (demo_sse.php).

<?php

header('Content-Type: text/event-stream');

header('Cache-Control: no-cache');

$time = date('r');

echo "data: The server time is: {$time}\n\n";

flush();

Following is the explanation of the above code.

Set the “Content-Type” header to “text/event-stream”.

Specify that the page should not cache.

Output the data to send (Always start with “data: “).

Flush the output data back to the web page.

ATechnoz

Search This Blog

Html Interview Question & Answer Q6 to 30

Comments

Post a Comment