Explore topic-wise InterviewSolutions in .

This section includes InterviewSolutions, each offering curated multiple-choice questions to sharpen your knowledge and support exam preparation. Choose a topic below to get started.

1.

Explain Web Components and it’s usage.

Answer»

These are used to create reusable custom elements which are very difficult in traditional HTML. It consists of three technologies:

  • Custom elements - These are JavaScript APIs that help in defining custom elements and their behavior.
  • Shadow DOM - These are JavaScript APIs that attach an encapsulated shadow DOM tree to an element to keep the element’s features private and unaffected by other parts.
<!DOCTYPE html><html> <head><meta charset="utf-8"><title>composed and composedPath DEMO</title><script src="main.js" defer></script> </head> <body><H1><code>composed</code> and <code>composedPath</code> demo</h1><open-shadow text="I have an open shadow root"></open-shadow><closed-shadow text="I have a closed shadow root"></closed-shadow> </body></html>customElements.define('open-shadow', class EXTENDS HTMLElement {constructor() { super(); const pElem = document.createElement('p'); pElem.textContent = this.getAttribute('text'); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.appendChild(pElem);} });customElements.define('closed-shadow', class extends HTMLElement {constructor() { super(); const pElem = document.createElement('p'); pElem.textContent = this.getAttribute('text'); const shadowRoot = this.attachShadow({mode: 'closed'}); shadowRoot.appendChild(pElem);} });document.querySelector('html').addEventListener('click', e => { console.log(e.composed); console.log(e.composedPath());});

Here 2 custom elements are defined <open-shadow> and <closed-shadow> which takes their text content and inserts them into a shadow DOM as content of a <p> element.

  • HTML templates - The markup templates are written using <template> and <slot> elements which can be reused multiple times as the basis of a custom element's structure.
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Simple template</title> <script src="main.js"></script></head><body> <h1>Simple template</h1> <template id="my-paragraph"><style> p { color: white; background-color: #666; padding: 5px; }</style><p><slot NAME="my-text">My default text</slot></p> </template> <my-paragraph><span slot="my-text">Let's have some different text!</span> </my-paragraph> <my-paragraph><ul slot="my-text"> <li>Let's have some different text!</li> <li>In a LIST!</li></ul> </my-paragraph></body></html>customElements.define('my-paragraph', class extends HTMLElement {constructor() { super(); const template = document.getElementById('my-paragraph'); const templateContent = template.content; this.attachShadow({mode: 'open'}).appendChild( templateContent.cloneNode(true) );} });const slottedSpan = document.querySelector('my-paragraph span');console.log(slottedSpan.assignedSlot);console.log(slottedSpan.slot);

Here we are reusing the <my-paragraph> template.

References:

Mozilla MDN

W3C

Additional Resource
  • Practice Coding
  • HTML MCQ
  • HTML Books
  • How To Become Front End Developer
  • CSS Interview Questions
  • Difference Between HTML and HTML5
  • Difference Between Frontend and Backend
  • Features of HTML
  • HTML Projects
  • HTML IDE
  • Difference Between HTML and JavaScript
  • HTML5 Features
  • Difference Between HTML and XML
Discussion
2.

Write HTML5 code to demonstrate the use of Geolocation API.

Answer»

&LT;!DOCTYPE html><html> <body> <P>Click "try it" button to get your coordinates.</p> <button onclick="getLocation()">Try It</button> <p id="demo"></p> <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation functionality is not supported by this browser."; } } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script> </body></html>

The above example asks for user PERMISSION for accessing the location data VIA geolocation API and after CLICKING the button the coordinates of the physical location of the client get displayed.
Discussion
3.

What is the Geolocation API in HTML5?

Answer»

Geolocation API is used to SHARE the physical LOCATION of the CLIENT with websites. This helps in serving locale-based content and a unique EXPERIENCE to the user, based on their location. This works with a new property of the GLOBAL navigator object and most of the modern browsers support this.

var geolocation = navigator.geolocation;
Discussion
4.

What is a manifest file in HTML5?

Answer»

The manifest file is used to list down RESOURCES that can be cached. Browsers use this information to make the web page load faster than the first time. There are 3 sections in the manifest file

  • CACHE Manifest - FILES NEEDS to be cached
  • Network - File never to be cached, always NEED a network connection.
  • Fallback - Fallback files in case a page is inaccessible
CACHE MANIFEST# 2012-06-16 v1.0.0/style.css/logo.gif/main.jsNETWORK:login.phpFALLBACK:/html/ /offline.html<!DOCTYPE HTML><html manifest="tutorial.appcache">......</html>
Discussion
5.

What are different approaches to make an image responsive?

Answer»
  • Art direction - USING <picture> element the landscape image fully shown in desktop layout can be zoomed in with the main SUBJECT in focus for a portrait layout.
<picture> <source media="(min-width: 650px)" srcset="img_cup.jpg"> <img src="img_marsh.jpg" style="width:auto;"></picture>

Bigger Screen (>650px)

For any other screen

  • Resolution switching - Instead of zoom and crop the images can be scaled accordingly using vector graphics. Also, this can be further optimized to serve different pixel density screens as well. 

For example SVG

<svg width="100" height="100"> <circle cx="50" cy="50" r="40" STROKE="green" stroke-width="4" fill="YELLOW" /></svg>
Discussion
6.

How to support SVG in old browsers?

Answer»

To SUPPORT old BROWSERS instead of defining the resource of svg in src attribute of &LT;img> tag, it should be defined in srcset attribute and in src the fallback PNG file should be defined.

<img src="circle.png" ALT="circle" srcset="circle.svg">
Discussion
7.

What are raster images and vector images?

Answer»

Raster Images - The raster image is defined by the arrangement of pixels in a grid with exactly what COLOR the pixel should be. Few raster file FORMATS INCLUDE PNG(.png), JPEG(.jpg), etc.
Vector Images - The vector image is defined using algorithms with shape and path definitions that can be used to render the image on-screen written in a similar markup fashion. The file extension is .SVG
Discussion
8.

What is the usage of a novalidate attribute for the form tag that is introduced in HTML5?

Answer»

Its value is a boolean type that indicates whether or not the data being submitted by the form will be validated beforehand. By making this false, FORMS can be submitted without VALIDATION which helps users to resume later also.

<form ACTION = "" method = "get" novalidate> NAME:<BR><input type="name" name="sname"><br> Doubt:<br><input type="number" name="doubt"><br> <input type="submit" value="Submit"></form>
Discussion
9.

What are the server-sent events in HTML5?

Answer»

The events pushed from the webserver to the BROWSERS are called server-sent events. DOM elements can be continuously updated using these events. This has a major advantage over straight-up polling. In polling, there is a LOT of overhead since every time it is ESTABLISHING an HTTP connection and tearing it down whereas, in server-sent events, there is one long-lived HTTP connection. To use a server-sent EVENT, <eventsource> element is used. The src attribute of this element specifies the URL from which sends a data stream having the events.

<eventsource src = "/cgi-bin/myfile.cgi" />
Discussion
10.

Why do we need the MathML element in HTML5?

Answer»

MathML stands for Mathematical Markup Language. It is used for displaying mathematical expressions on WEB PAGES. For this <math&GT; tag is used.

<!DOCTYPE HTML><html> <head> </head> <body><math> <mrow> <mrow> <msup> <mi> a </mi> <MN> 2 </mn> </msup> <mo> + </mo> <msup> <mi> b </mi> <mn> 2 </mn> </msup> <mo> + </mo> <mn> 2 </mn> <mn> a </mn> <mn> b </mn> </mrow> <mo> = </mo> <mn> 0 </mn> </mrow></math> </body></html>

This displays the equation a2 + b2 + 2ab = 0.
Discussion
11.

Why do you think the addition of drag-and-drop functionality in HTML5 is important? How will you make an image draggable in HTML5?

Answer»

The drag and drop functionality is a very intuitive way to select local files. This is similar to what most of the OS have copy functionality thus making it very easy for the user to COMPREHEND. Before the NATIVE drag and drop API, this was achievable by writing complex Javascript programming or external FRAMEWORKS like jQuery.

To enable this functionality there is a draggable attribute in the <img> tag and need to set ondrop and ondragover attribute to an eventhandler available in scripts.

<!DOCTYPE HTML><html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drop(ev) { ... } </script> </head> <body> ... <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="border: 1px SOLID #AAAAAA; width:350px; height: 70px;"></div> <br> <img id="drag1" src="img_logo.gif" draggable="true" width="336" height="69"> ... </body></html>
Discussion
12.

What are the New tags in Media Elements in HTML5?

Answer»
  • <audio> - Used for sounds, audio streams, or music, embed audio content without any additional plug-in.
  • <video> - Used for video streams, embed video content etc.
  • <source> - Used for multiple MEDIA resources in media elements, such as audio, video, etc.
  • <embed> - Used for an EXTERNAL application or embedded content.
  • <track> - Used for subtitles in the media elements such as video or audio.
<label> Video: </label> <video width="320" HEIGHT="240" controls> <source src="video.mp4" type="video/mp4"> <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English"> </video> <br> <label> Embed: </label> <embed type="video/webm" src="https://www.youtube.com/embed/MpoE6s2psCw" width="400" height="300"> <br> <label> Audio: </label> <audio controls> <source src="audio.mp3" type="audio/mpeg"> </audio>
Discussion
13.

Explain new input types provided by HTML5 for forms?

Answer»

Following are the significant new data TYPES offered by HTML5:

  • Date - Only SELECT date by using type = "date"
  • Week - Pick a week by using type = "week"
  • Month - Only select month by using type = "month"
  • Time - Only select time by using type = "time".
  • Datetime - Combination of date and time by using type = "datetime"
  • Datetime-local - Combination of  date and time by using type = "datetime-local." but ignoring the timezone
  • Color - Accepts multiple colors using type = "color"
  • Email - Accepts one or more email addresses using type = "email"
  • Number - Accepts a numerical value with ADDITIONAL CHECKS like min and max using type = "number"
  • Search - Allows searching queries by inputting text using type = "search"
  • Tel - Allows different phone numbers by using type = "tel"
  • Placeholder - To display a short hint in the input fields before entering a value using type = "placeholder"
  • Range - Accepts a numerical value within a specific range using type = "range"
  • Url - Accepts a web ADDRESS using type = "url”
<form> <div> <label>Date:</label> <input type="date" id="date" /> <br> <label>Week:</label> <input type="week" id="week" /> <br> <label>Month:</label> <input type="month" id="month" /> <br> <label>Time:</label> <input type="time" id="time" /> <br> <label>Datetime:</label> <input type="datetime" id="datetime" /> <br> <label>Datetime Local:</label> <input type="datetime-local" id="datetime-local" /> <br> <label>Color:</label> <input type="color" id="color"/> <br> <label>Email:</label> <input type="email" id="email" placeholder="email address" /> <br> <label>Number:</label> <input type="number" id="number" /> <br> <label>Search:</label> <input type="search" id="search" /> <br> <label>Phone:</label> <input type="tel" id="phone" placeholder="Phone Number" pattern="\d{10}$" /> <br> <label>Range:</label> <input type="range" id="range" /> <br> <label>URL:</label> <input type="url" id="url"/> </div> </form>
Discussion
14.

Explain HTML5 Graphics.

Answer»

HTML5 supports two kinds of graphics:

  • Canvas - It is like drawing on a WHITEPAPER or a blank webpage. We can ADD different graphic designs on web pages with available methods for drawing various geometrical shapes.
<!DOCTYPE HTML><html> <head> </head> <body> <canvas WIDTH="300" height="100" style="border:2px solid;"></canvas> </body></html>
  • SVG - SCALABLE Vector Graphics are used mostly for diagrams or icons. It follows the XML format.
<!DOCTYPE html><html> <body> <svg width="400" height="110"> <rect width="300" height="100" style="fill:#FFF;stroke-width:2;stroke:#000" /> </svg> </body></html>

Both of the above examples produce this output and represent two different approaches provided by HTML5 to implement graphical aspects in the webpage.
Discussion
15.

What is new about the relationship between the and tags in HTML5?

Answer»

As HTML5 was all about better semantics and ARRANGEMENTS of the tags and elements, the <header> tag specifies the header section of the WEBPAGE. Unlike in previous VERSION there was one <h1> ELEMENT for the entire webpage, now this is the header for one section such as <article> or <section>. According to the HTML5 specification, each <header> element must at least have one <h1> tag.
Discussion
16.

Which tag is used for representing the result of a calculation? Explain its attributes.

Answer»

The <output> tag is used for representing the RESULT of a calculation. It has the following attributes:

  • for - It defines the relationship between the elements used in calculation and result.
  • form - This is used to define the form the output ELEMENT belongs to.
  • name - The name of the output element.
<form oninput = "result.value=parseInt(n1.value)+parseInt(n2.value)"> <input type = "NUMBER" name = "n1" value = "1" /> + <input type = "number" name = "n2" value = "2" /><br /> The output is: <output name = "result"></output></form>

The above EXAMPLE looks like
Discussion
17.

What is Microdata in HTML5?

Answer»

It is used to help extract data for site crawlers and search engines. It is basically a group of name-value pairs. The groups are called items, and each name-value pair is a property. Most of the search engines like Google, Microsoft, Yandex, etc follow schema.org VOCABULARY to extract this microdata.

<div itemscope itemtype="http://schema.org/SoftwareApplication"> <SPAN itemprop="name">Interviewbit Games</span> - REQUIRES <span itemprop="operatingSystem">ANDROID</span><br> <link itemprop="applicationCategory" href="http://schema.org/GameApplication"/> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">RATING:<span itemprop="ratingValue">4.6</span> (<span itemprop="ratingCount">8864</span> ratings ) </div> <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">Price: Rs.<span itemprop="price">1.00</span><meta itemprop="priceCurrency" content="INR" /> </div></div>
  • itemid – The unique, GLOBAL identifier of an item.
  • itemprop – Used to add properties to an item.
  • itemref – Provides a list of element ids with additional properties.
  • itemscope – It defines the scope of the itemtype ASSOCIATED with it.
  • itemtype – Specifies the URL of the vocabulary that will be used to define itemprop.

The above example will be PARSED by Google as
Discussion
18.

Explain the concept of web storage in HTML5.

Answer»

This web storage helps in storing some of the static data in the local storage of the browser so that we do not need to fetch it from the server every time we need it. There is a size limit based on DIFFERENT BROWSERS. This helps in decreasing the load time and a smooth user experience. There are two types of web storage that are used to store data locally in HTML5:

  • Local Storage - This helps in storing data that will be retained even though the user reopens the browser. It is stored for each WEBAPP on different browsers.
  • SESSION Storage - This is used for one session only. After the user closes the browser this gets DELETED.
Discussion
19.

What are the significant goals of the HTML5 specification?

Answer»

These were the target area of the HTML5 specs:

  • Introduction of new element tags to better structure the WEB page such as <header> tag.
  • Forming a STANDARD in cross-browser behavior and support for DIFFERENT devices and platforms
  • Backward compatible with the older version HTML web pages
  • Introduction of basic interactive elements without the dependency of plugins such as <video> tag instead of the flash PLUGIN.
Discussion
20.

What type of audio files can be played using HTML5?

Answer»

HTML5 supports the FOLLOWING THREE types of audio file FORMATS:

  1. Mp3
  2. WAV
  3. Ogg
Discussion
21.

Difference between SVG and Canvas HTML5 element?

Answer»
SVGCanvas
SVG is a vector based i.e., composed of shapes. It is Raster based i.e., composed of pixels.
SVG WORKS better with a larger surface.Canvas works better with a SMALLER surface.
SVG can be modified USING CSS and scripts.Canvas can only be modified using scripts.
SVG is highly scalable. So we can print at high QUALITY with high resolution.It is less scalable.
Discussion
22.

Is drag and drop possible using HTML5 and how?

Answer»

YES, in HTML5 we can drag and drop an ELEMENT. This can be achieved USING the drag and drop-related events to be used with the element which we want to drag and drop.
Discussion
23.

What is the difference between tag and tag?

Answer»

<progress> tag should be used when we want to show the COMPLETION progress of a task, whereas if we just want a SCALAR measurement within a known range or fraction value. Also, we can specify multiple extra ATTRIBUTES for <METER> tags like ‘FORM’, ‘low’, ‘high’, ‘min’, etc.
Discussion
24.

Convert the below data into Tabular format in HTML5?

Answer»

S.no., LANGUAGE, MOSTLY USED for

1, HTML, FrontEnd

2, CSS, FrontEnd

3, Python, BackEnd
Discussion
25.

What are Semantic Elements?

Answer»

SEMANTIC ELEMENTS are those which describe the particular meaning to the browser and the developer. Elements like &LT;form>, <table>, <ARTICLE>, <FIGURE>, etc., are semantic elements.
Discussion
26.

Define Image Map?

Answer»

IMAGE Map lets a developer map/LINK different parts of images with the different web pages. It can be achieved by the <map> tag in HTML5, using which we can link images with CLICKABLE areas.

<img SRC=”image_url” , usemap=”#workspace” /><map name=”workspace”> <area SHAPE=”rect” coords=”34, 44, 270, 350” , href=”xyz.html” /> <area shape=”rect” coords=”10, 120, 250, 360” , href=”xyz.html” /></map>
Discussion
27.

Is the tag and tag same?

Answer»

No. The &LT;datalist> tag and <select> tag are different. In the case of <select> tag a user will have to choose from a LIST of options, whereas <datalist> when used ALONG with the <input> tag provides a suggestion that the user selects one of the options given or can ENTER some ENTIRELY different value.
Discussion
28.

How to specify the metadata in HTML5?

Answer»

To specify we can use <meta> tag which is a void tag,i.e., it does not have a CLOSING tag. Some of the attributes used with meta tags are name, content, http-equiv, ETC. The below IMAGE tells how to specify the METADATA.
Discussion
29.

What is the difference between tag and tag?

Answer»

The &LT;figure> TAG specifies the self-contained content, LIKE diagrams, images, code snippets, etc. <figure> tag is used to SEMANTICALLY organize the contents of an image like image, image caption, etc., whereas the <img> tag is used to embed the picture in the HTML5 document.
Discussion
30.

Inline and block elements in HTML5?

Answer»
InlineBlock
Inline elements just take up the space that is absolutely necessary for the content and does not start from a new line.
Example:- <SPAN>, <a>, <strong>, <img>, <button>, <em>, <select>, <abbr>, <label>, <sub>, <cite>, <abbr>, <script>, <label>, <i>, <input>, <output>, <q>, etc.		Block elements start on a new line and consume the full width of the PAGE available.
Example:- <DIV>, <p>, <header>, <footer>, <h1>...<h6>, <form>, <table>, <CANVAS>, <video>, <blockquote>, <pre>, <ul>, <ol>, <figcaption>, <figure>, <hr>, <ARTICLE>, <section>, etc.
Discussion
31.

How can we include audio or video in a webpage?

Answer»

HTML5 PROVIDES two TAGS: &LT;audio&GT; and <video> tags using which we can add the audio or video DIRECTLY in the webpage.
Discussion
32.

What are some of the advantages of HTML5 over its previous versions?

Answer»

Some advantages of HTML5 are:-

  • It has Multimedia Support.
  • It has the CAPABILITIES to store offline data using SQL databases and application cache.
  • Javascript can be run in the background.
  • HTML5 ALSO allows users to draw various SHAPES LIKE rectangles, circles, triangles, etc.
  • Included new Semantic tags and FORM control tags.
Discussion