HTML Deck 3

Question 1

What are Semantic Elements?

Answer 1

Semantic elements are those which describe the particular meaning to the browser and the developer. Elements like <form>, <table>, <article>, <figure>, etc., are semantic elements.</figure>

Question 2

What is the difference between <meter> tag and <progress> tag?</progress></meter>

Answer 2

<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.
</meter></progress>

Question 3

Is drag and drop possible using HTML5 and how?

Answer 3

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.

Question 4

Difference between SVG and Canvas HTML5 element?

Answer 4

SVG VS Canvas
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.

Question 5

What type of audio files can be played using HTML5?

Answer 5

HTML5 supports the following three types of audio file formats:

Mp3
WAV
Ogg

Question 6

What are the significant goals of the HTML5 specification?

Answer 6

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.</video>

Question 7

Explain the concept of web storage in HTML5.

Answer 7

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.

Question 8

What is Microdata in HTML5?

Answer 8

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>
<span>Interviewbit Games</span> -
REQUIRES <span>ANDROID</span><br></br>
<link></link>
<div>
RATING:
<span>4.6</span> (
<span>8864</span> ratings )
</div>
<div>
Price: Rs.<span>1.00</span>
<meta></meta>
</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.

Question 9

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

Answer 9

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

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>
<input></input> +
<input></input><br></br>
The output is: <output></output>
</form>

Question 10

What is new about the relationship between the <header> and <h1> tags in HTML5?

Answer 10

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.

Question 11

Explain HTML5 Graphics.

Answer 11

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></canvas>
</body>
</html>

SVG - Scalable Vector Graphics are used mostly for diagrams or icons. It follows the XML format.
<!DOCTYPE html>

<html>
<body>
<svg>
<rect></rect>
</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.

Question 12

Explain new input types provided by HTML5 for forms?

Answer 12

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”

Question 13

what is the difference between an element and a tag in html

Answer 13

HTML Tags are building blocks of HTML Page. HTML Elements are components that are used in HTML Page.

Question 14

What are the New tags in Media Elements in HTML5?

Answer 14

<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></source> - Used for multiple media resources in media elements, such as audio, video, etc.
<embed></embed> - Used for an external application or embedded content.
<track></track> - Used for subtitles in the media elements such as video or audio.

<label>
Video:
</label>
<video>
<source></source>
<track></track>
</video>
<br></br>
<label>
Embed:
</label>
<embed></embed>
<br></br>
<label>
Audio:
</label>
<audio>
<source></source>
</audio>
</video></audio>

Question 15

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 15

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></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></div>
<br></br>
<img></img>
...
</body>
</html>

Question 16

Why do we need the MathML element in HTML5?

Answer 16

MathML stands for Mathematical Markup Language. It is used for displaying mathematical expressions on web pages. For this <math> tag is used.</math>

Question 17

What are the server-sent events in HTML5?

Answer 17

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>

<eventsource></eventsource>

Question 18

What are Web Workers?

Answer 18

These are added to bring parallelism and async capability. It runs in the background to do the computationally expensive tasks without yielding to make the page responsive. It is achieved by starting a separate thread for such tasks. These are not meant to perform UI operations. There are three types of web workers:

Dedicated Workers - These are workers that are utilized by a single script.
Shared Workers -These are workers that are utilized by multiple scripts running in different windows, IFrames, etc.
Service Workers - These act as proxy servers between web applications, the browser, and the network. Mostly used for push notifications and sync APIs.

<p>Count numbers: <output></output></p>

<button>Start Worker</button>
<button>Stop Worker</button>

var w;
function startWorker() {
 if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
  document.getElementById("result").innerHTML = event.data;
};
 }
}
function stopWorker() {
 w.terminate();
 w = undefined;
}

Question 19

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

Answer 19

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>
Name:<br></br><input></input><br></br>
Doubt:<br></br><input></input><br></br>
<input></input>
</form>

Question 20

What are raster images and vector images?

Answer 20

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

Question 21

How to support SVG in old browsers?

Answer 21

To support old browsers instead of defining the resource of svg in src attribute of <img></img> tag, it should be defined in srcset attribute and in src the fallback png file should be defined.

<img></img>

Question 22

What are different approaches to make an image responsive?

Answer 22

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>

<picture>
<source></source>
<img></img>
</picture>

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>
<circle></circle>
</svg>

Question 23

What is a manifest file in HTML5?

Answer 23

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.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html
<!DOCTYPE HTML>

<html>
...
...
</html>

Question 24

What is the Geolocation API in HTML5?

Answer 24

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;

Question 25

Write HTML5 code to demonstrate the use of Geolocation API.

Answer 25

<!DOCTYPE html>

<html>
<body>
<p>Click "try it" button to get your coordinates.</p>
<button>Try It</button>
<p></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.

Question 26

Explain Web Components and it’s usage.

Answer 26

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></meta>
<title>composed and composedPath demo</title>

</head>
<body>
<h1><code>composed</code> and <code>composedPath</code> demo</h1>
<open-shadow></open-shadow>
<closed-shadow></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());
});

Question 27

Data html attributes

Answer 27

A custom data attribute starts with data- and would be named based on the requirement.

The values of these attributes can be retrieved using JavaScript APIs or CSS, similar to standard attribute.

Question 28

What are elements and tags, and what are the differences between them?

Answer 28

HTML Tags: Tags are the starting and ending parts of an HTML element. They begin with < symbol and end with > symbol. Whatever is written inside < and > are called tags.

Syntax:

<b> </b>
HTML elements: Elements enclose the contents in between the tags. They consist of some kind of structure or expression. It generally consists of a start tag, content, and an end tag.

Syntax:

<b>This is the content.</b>

Question 28

Which attribute defines the accelerator key to be used for keyboard access to an element.

Answer 28

accesskey

Question 29

What are the various heading tags and their importance?

Answer 29

There are 6 levels of headings defined by HTML. These six heading elements are H1, H2, H3, H4, H5, and H6; with H1 being at the highest level and H6 at the least.

Importance of Heading:

Search Engines use headings for indexing the structure and content of the webpage.
Headings are used for highlighting important topics.
They provide valuable information and tell us about the structure of the document.

Question 30

How to redirect to a particular section of a page using HTML?

Answer 30

One can use the anchor tag to redirect to a particular section on the same page. You need to add “id attribute” to the section that you want to show and use the same id in href attribute with “#” in the anchor tag. So that On click a particular link, you will be redirected to the section that has the same id mentioned in the anchor tag.

Syntax:

<a>home</a>

<section>
Information About Page
</section>

Question 31

What are attributes?

Answer 31

An attribute is used to provide extra or additional information about an element.

All HTML elements can have attributes. Attributes provide additional information about an element.
It takes 2 parameters ie., name and value. These define the properties of the element and are placed inside the opening tag of the element. The name parameter takes the name of the property we would like to assign to the element and the value takes the property value or extent of the property names that can be aligned over the element.
Every name has some value that must be written within quotes.

Question 32

Are <b> and <strong> tags same? If not, then why?</strong></b>

Answer 32

If you want to highlight a text section as important in terms of content, you should always use strong. You should only use bold if you intend to draw attention to a section.

The main difference between the <bold> tag & <strong> tag is that the strong tag semantically emphasizes the important word or section of words while the bold tag is just offset text conventionally styled in bold</strong></bold>

Question 33

What is the difference between <em> and <i> tags?</i></em>

Answer 33

The <em> tag is used to draw the reader’s attention to the text and suggests that the enclosed text should be spoken with a higher pitch and with a slightly drawn out and more emphasized voice compared to a regular sentence. The <i> tag, on the other hand, is used to render text in an italicized font.</i></em>

By default, the visual result is the same but the main difference between these two tags is that the <em> tag semantically emphasizes the important word or section of words while the <i> tag is just offset text conventionally styled in italic to show alternative mood or voice.</i></em>

Question 34

How are comments added in HTML?

Answer 34

The comment tag (<!– Comment –>) is used to insert comments in the HTML code.

Question 35

What are the different formats in which colors in HTML can be declared?

Answer 35

The color of an element can be defined in the following ways:

Built-In Color
RGB Format
RGBA Format
Hexadecimal Notation
HSL
HSLA
Hue: Hue is the degree of the color wheel. Its value lies between 0 to 360 where 0 represents red, 120 represents green and 240 represents blue color.
Saturation: It takes a percentage value, where 100% represents completely saturated, while 0% represents completely unsaturated (gray).
Lightness: It takes a percentage value, where 100% represents white, while 0% represents black.

Question 36

How to create a link in HTML?

Answer 36

A Link is a connection from one Web resource to another. A link has two ends, An anchor and a direction. The link starts at the “source” anchor and points to the “destination” anchor, which may be any Web resource such as an image, a video clip, a sound bite, a program, an HTML document, or an element within an HTML document.

HTML Link Syntax: Links are specified in HTML using the “a” tag.

<a>Link Text<a></a></a>

xplanation:

href: The href attribute is used to specify the destination address of the link used.
Text link: The text link is the visible part of the link.

Question 37

What is the use of the target attribute in the <link></link> tag?

Answer 37

The HTML <link></link> target Attribute is used to specify the window or a frame where the linked document is loaded. It is not supported by HTML 5.

Syntax:

<link></link>

Attribute Values:

_blank: It opens the link in a new window.
_self: It opens the linked document in the same frame.
_parent: It opens the linked document in the parent frameset.
_top: It opens the linked document in the full body of the window.
framename: It opens the linked document in the named frame.

Question 38

What is the use of alt attribute in images?

Answer 38

The <img></img> alt attribute is used to specify the alternate text for an image. It is useful when the image is not displayed. It is used to give alternative information for an image.

Syntax:

<img></img>

Question 39

What are the HTML tags used to display a table?

Answer 39

<table>: It is used to define a table.
<tr>: It is used to define a row in a table.
<th>: It is used to define a header cell in a table.
<td>: It is used to define a cell in a table.
<caption>: It is used to define the table caption.
<colgroup>: It is used to define a group of one or more columns in a table for formatting.
<col></col>: It is used with <colgroup> element to specify column properties for each column.
<tbody>: It is used to define a group of body content in a table.
<thead>: It is used to group the header content in a table.
<tfooter>: It is used to group the footer content in a table.
</tfooter></thead></tbody></colgroup></colgroup></caption></td></th></tr></table>