HTML5 Interview Questions Part 5

21. What is the use of <template> tag in HTML5?

Answer:

A <Template> tag is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript.

A <template> tag is used to insert fragments of HTML code into your web page.

Template code can be defined nearly anywhere; the head, body or even a frameset, it will not be displayed.

Example:

HTML File

<table id="studenttable">
  <thead>
    <tr>
      <td>Roll No.</td>
      <td>Student Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- existing data could optionally be included here -->
  </tbody>
</table>

<template id="studentrow"> //Template created
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

CSS File

table
{
  background: #000;
}
table td
{
  background: #fff;
}

JS File

if ('content' in document.createElement('template'))
{
   var t = document.querySelector('#studentrow'),
   td = t.content.querySelectorAll("td");
   td[0].textContent = "101";
   td[1].textContent = "ABC";

   // Clone the new row and insert it into the table
   var tb = document.querySelector("tbody");
   var clone = document.importNode(t.content, true);
   tb.appendChild(clone);
   
   // Create a new row
   td[0].textContent = "102";
   td[1].textContent = "PQR";

   // Clone the new row and insert it into the table
   var clone2 = document.importNode(t.content, true);
   tb.appendChild(clone2);
}
else
{
   // Find another way to add the rows to the table because
   // the HTML template element is not supported.
}


template tag

22. What is the use of DataList tag in HTML5?

Answer:

The <datalist> tag specifies a list of predefined options for an <input> element.

It provides a list of predefined options to the users to select data.

Example:

<input list="countries">
<datalist id="countries">    
    <option value="India">India</option>    
    <option value="United States"></option>    
    <option value="United Kingdom"></option>    
    <option value="Indonesia"></option>    
    <option value="Iraq"></option>    
    <option value="Ireland"></option>    
</datalist>


23. What is the use of <fieldset> tag in HTML5?

Answer:

The <fieldset> tag is like a box which is used to group related elements in a form and draws a box around the related elements.

This tag must start with a <legend> tag, because the <legend> tag defines the title of the field set. And it will help you to make your form much easier to understand for the users.

Example:

<!DOCTYPE html>
<html>
   <body>
      <form>
         <fieldset>
            <legend>Basic Information:</legend>
            Name: <input type="text"><br>
            Email: <input type="text"><br>
            DOB : <input type="text">
         </fieldset>
      </form>
   </body>
</html>


fieldset tag

24. What do you know about Application Cache in HTML5?

Answer:

Caching comes in two flavors: Data Caching and Application Caching.

In HTML5, data caching can be done with the help of Web storage, indexedDB, etc.

Application caching enables the web application to store its resources like HTML, CSS, Images, JavaScript pages etc. in the browser, so that the application can be made fully or partially accessible during offline or when the Internet connection is not available.

Developers can use the Application Cache (AppCache) interface to specify resources that the browser should cache and make available to offline users.

Your app will load and work correctly, even if the user presses the refresh button while they're offline.

25. What is the difference between Progress Tag and Meter Tag?

Answer:

Progress tag represents the completion progress of a task whereas Meter tag is used to represent gauges.

Progress tag represents a dynamic data whereas Meter tag represents a static data.

Meter tag is used to represent a scalar measurement within a known range and should not be used to indicate the progress. We have the progress tag to indicate the progress.

Meter Tag

<!DOCTYPE html>
<html>
   <body>
      <p>Display a gauge:</p>
      <meter value="2" min="0" max="10">2 out of 10</meter><br>
      <meter value="0.6">60%</meter>
   </body>
</html>


meter tag

Progress Tag

<!DOCTYPE html>
<html>
   <body>
      Downloading:
      <progress value="22" max="100">
      </progress>
   </body>
</html>


progress tag
▲