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.

<article>
<figcaption>
<figure>
<header>
<footer>
<nav>
<section>
<article>
<aside>
<summary>
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.

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

<script>
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>
<form oninput="sumresult.value=parseInt(val1.value)+parseInt(val2.value)+parseInt(val3.value)">
<input type="range" name="va1" value="10" /> +
<input type="number" name="val2" value="20" /> +
<input type="number" name="val3" value="40" /><br />
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>

<audio controls="controls" >
<source src="URL1" type="audio/mp3" />
<source src="URL2" type="audio/wma" />
<source src="URL3" type="audio/x-wav" />
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> 
<fieldset> 
<legend>Personal Information</legend> 
First Name: <input type="text" /> 
<br/><br/> Last 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.

<basefont>
<big>
<center>
<font>
<s>
<strike>
<tt>
<u>
<frame>
<frameset>
<noframe>
<acronym>
<applet>
<isindex>
<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.

<li><meter min="0" max="100" value="25">25%</meter></li>
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.


Post a Comment

please do not enter any spam link in the comment box