MODULE 1

HTML

The Internet in Industry and Research

Computers and the Internet in health care: Electronic health records - It includes a patient's medical history,
prescriptions, lab results, allergies, insurance information and more.

Human Genome Project - founded to identify and analyze the 20,000+ genes in human DNA and store the
information in databases which have been made available over the Internet to researchers in many fields.

Computers and the Internet for social good: AMBER™ Alert - The AMBER (America’s Missing: Broadcast
Emergency Response) Alert System is used to find missing children.

World Community Grid - People worldwide can donate their unused computer processing power by installing
free secure software.

Computers and the Internet in entertainment: iTunes and the App Store - iTunes is Apple’s media store
where you can buy and download music, movies, TV shows, e-books, ringtones and apps.

Internet TV - Allow you to access content on demand, such as games, news, movies, TV shows and more.

Web Basics

Web page: An HTML document that describes to a web browser the document’s content and structure.

Hyper links: HTML documents contain hyperlinks, which, when clicked, load a specified web document.
It is widely used to reference sources, or sites that have more information on a particular topic.

URIs and URLs

URIs (Uniform Resource Identifiers) identify resources on the Internet. URIs that start with http:// are called
URLs (Uniform Resource Locators).

Parts of a URL
http://www.deitel.com/books/downloads.html

Protocol Hostname Resource location

Making a Request and Receiving a Response

Downloaded from Ktunotes.in

Steps:
 The request (in its simplest form) is:
GET /books/downloads.html HTTP/1.1
 The word GET is an HTTP method indicating that the client wishes to obtain a resource from the server.
 The client’s request also contains some required and optional headers.
 Any server that understands HTTP (version 1.1) can translate this request and respond appropriately.

Client receiving a response from the web server

Steps:
 The server first sends a line of text that indicates the HTTP version, followed by a numeric code and a
phrase describing the status of the transaction. For example,
HTTP/1.1 200 OK
It indicates success, whereas HTTP/1.1 404 Not found indicates that web server could not locate
the requested resource.

HTTP Headers
Next, the server sends one or more HTTP headers, which provide additional information about the data.
Content-type: text/html

The header or set of headers is followed by a blank line, which indicates to the client browser that the server is
finished sending HTTP headers. Finally, the server sends the contents of the requested document
(downloads.html).

HTTP get and post Requests

A get request gets information from a server, such as an HTML document, an image or search results based on a
user-submitted search term. A post request typically posts (or sends) data to a server. Common uses of post
requests are to send form data or documents to a server.
get and post requests can both be used to send data to a web server, but each type sends the information
differently. A get request appends data to the URL
e.g., www.google.com/search?q=deitel

Downloaded from Ktunotes.in

In this case search is the name of Google’s server-side form handler, q is the name of a variable and deitel is the
search term. The ? in the preceding URL separates the query string from the rest of the URL in a request.
If more than one name/value pair is submitted, each pair is separated by an ampersand (&).

A post request sends form data as part of the HTTP message, not as part of the URL. A get request typically limits
the query string to a specific number of characters. So it’s necessary to send large amounts of information using
the post method. The post method is preferred because it hides the submitted data from the user by embedding it
in an HTTP message.

Client-Side Caching
Browsers often cache (save on disk) recently viewed web pages for quick reloading. An HTTP response can
indicate the length of time for which the content remains “fresh.” Browsers typically do not cache the server’s
response to a post request, because the next post might not return the same result.

Multitier Application Architecture

Web-based applications are multitier applications. It divide functionality into separate tiers. Although tiers can be
located on the same computer, the tiers of web-based applications reside on separate computers.

World Wide Web Consortium (W3C)

In October 1994, Tim Berners-Lee founded this organization, mainly devoted to developing nonproprietary,
interoperable technologies for the World Wide Web. One of the W3C’s primary goals is to make the web
universally accessible. The W3C is also a standards organization. Web technologies standardized by the W3C are
called Recommendations.

Current W3C Recommendations include the HTML5, Cascading Style Sheets 3 (CSS3) and the Extensible
Markup Language (XML). A recommendation is a document that specifies a technology’s role, syntax rules, etc.

Introduction to HTML5
HTML5 is a markup language that specifies the structure and content of documents that are displayed in web
browsers. Computers called web servers store HTML5 documents. Clients (such as web browsers running on your
local computer or smart phone) request HTML5 documents from web servers.

W3C HTML5 Validation Service

Downloaded from Ktunotes.in

W3C provides a validation service (validator.w3.org) for checking a document’s syntax. Documents can be
validated by: providing the URL of an online web page, uploading a file to the validator, pasting code directly
into a text area provided on the validator site.

Headings
HTML5 provides six heading elements (h1 through h6).

Linking
A hyperlink references other resources, such as HTML5 documents and images.

Links are created using the a (anchor) element with an attribute href which specifies a resource’s location, such
as a web page or location within a web page or a file or an e-mail address.
Hyperlinking to an E-Mail Address: using a mailto: URL. When the user clicks this type of anchored link, most
browsers launch the user’s default e-mail program.

Images
Use an img element to include an image in the document. The image location is specified with the src attribute.
Optional attributes width and height specify the image’s dimensions. Images are measured in pixels (picture
elements).

If a browser cannot render an image, the browser displays the alt attribute’s value.

Downloaded from Ktunotes.in

 Symbol Description Character entity reference
& ampersand &
’ apostrophe '
> greater-than >
< less-than &lt;
“ quote &quot;
non-breaking space &nbsp;
© copyright &copy;
1/4 fraction 1/4 &frac14;
1/2 fraction 1/2 &frac12;
™ trademark &trade;
® registered trademark &reg;
Void Elements
Some HTML5 elements contain only attributes and do not mark up text (i.e., text is not placed between a start and
an end tag). We can terminate void elements by using the forward slash character.

Using Images as Hyperlinks

By using images as hyperlinks, we can create graphical web pages that link to other resources.

Special Characters
Certain characters may be difficult to embed directly into an HTML5 document. Some keyboards do not provide
these symbols (such as ©).
For example: <p>if x < 10 then increment x by 1</p>

HTML5 provides character entity references (in the form &code;) for representing special characters.
Eg: <p>if x &lt; 10 then increment x by 1</p>

Horizontal Rules
Horizontal rule, indicated by the <hr> tag inputs a horizontal line with extra space above and below it.

Lists
To organize content that similar in nature. Two types of lists are: Unordered list (uses <ul> element) and Ordered
list (uses <ol> element). The ul tag creates a list in which each item begins with a bullet symbol (typically a disc).
Each entry in an unordered list is an <li> element. Lists can be nested to represent hierarchical relationships.

Example Unordered List:

Downloaded from Ktunotes.in

Example: Ordered List

Tables
Tables are used to organize data into rows and columns.
<tbody>
<tr>
<td>Apple</td>
<td>$0.25</td>
</tr>
<tr>
<td>Orange</td>
<td>$0.50</td>
</tr>
</tbody>
</table>

Fruit Price
Apple $0.25
Orange $0.50
Total $0.75

Using rowspan and colspan with Tables

Table cells are sized to fit the data they contain, but we can create cells that apply to more than one row or column
using rowspan and colspan. The values assigned to these attributes specify the number of rows or columns
occupied by a cell.

<th rowspan = "2">

<img src = "camel.png" width = "205“ height = "167" alt = "a camel">
</th>
<th colspan = "4">
<strong>Camelid comparison</strong><br>

Downloaded from Ktunotes.in

 Approximate as of 10/2011
</th>

Forms
To provide information such as search queries, e-mail addresses and zip codes. Used for collecting data from a
user.

<form method = "post" action

= “test.php">
<p><label>Name:
<input name = "name"
type = "text" size =
"25”>
</label>
</p>
<p>
<input type =
"submit" value =
"Submit">
<input type = "reset"
value = "Clear">
</p>
</form>
Additional form elements
<input type = “hidden” ......>
<textarea name = “” rows = "4" cols = "36">

Downloaded from Ktunotes.in

 <input type = "password“ ........>
<input type = "checkbox“ ......... >
<input type = "radio“ ........ ... checked>
<select .........>
<option >1</option>
<option>2</option>

Internal Linking
Internal linking is a mechanism that enables the user to jump between locations in the same document without
scrolling.
<h1 id = "features">The Best Features of the Internet</h1>
<p><a href = "#bugs"> Go to Favorite Bugs</a></p>
....................................
....................................
<h1 id = "bugs">My 3 Favorite Bugs</h1>
<p><a href = "#features">Go to Favorite Features</a></p>

A hyperlink can also reference an internal link in another document as: href = "filename.html#id"

Meta Elements
Meta elements specifies information about a document. Search engines uses each page’s meta elements for
crawling the site - One of many methods of Search Engine Optimization (SEO). It is the process of tuning your
website to maximize your findability and improve your rankings search engine results. Two important attributes
are: name: identifies the type of meta element, content: provides the information for search engines.

New HTML5 Form input Types

Note: Validation
The new HTML5 input types are self validating on the client side, eliminating the need to add complicated
JavaScript code to your web pages to validate user input, reducing the amount of invalid data submitted and
consequently reducing Internet traffic between the server and the client to correct invalid input.

1. input Type color

It enables the user to select a color from a color picker. <input type = "color" autofocus />
The autofocus attribute is an optional attribute that can be used in only one input element on a form.

2. input Type date

It enables the user to select a date in the form yyyy-mm-dd. Chrome and Safari display a spinner control—a text
field with an up-down arrow allowing the user to select a date. The start date is the current date.

Downloaded from Ktunotes.in

3. input Type datetime
Enables the user to select a date, time(hour, minute, second, fraction of a second) and the time zone set to UTC
(Universal Time, Coordinated).

4. input Type email

It enables the user to enter an e-mail address or a list of email addresses separated by commas. Currently, all of
the browsers display a text field. If the user enters an invalid(not in proper format) e-mail address and clicks the
Submit button, a callout asking the user to enter an e-mail address is rendered pointing to the input element.

The placeholder attribute allows you to place temporary text in a text field. When the focus is placed in the text
field, the placeholder text disappears.

The required attribute forces the user to enter a value before submitting the form.

5. input Type month

It enables the user to enter a year and month in the format yyyy-mm.

6. input Type number

It enables the user to enter a numerical value. Mobile browsers typically display a numeric keypad for this input
type. Browser places a spinner control for adjusting the number. The min attribute sets the minimum valid
number, the max attribute sets the maximum valid number, and the step attribute determines the increment in
which the numbers increase.

7. input Type range

It appears as a slider control. You can set the min, max and value attributes.

Downloaded from Ktunotes.in

8. input Type search
It provides a search field for entering a query. It is functionally equivalent to an input of type text. When the user
begins to type in the search field, browser displays an X that can be clicked to clear the field.

9. input Type tel

It enables the user to enter a telephone number. Mobile browsers display a keypad specific to entering phone
numbers.

10. input Type time

It enables the user to enter an hour, minute, seconds and fraction of second. The HTML5 specification indicates
that a time must have two digits representing the hour, followed by a colon (:) and two digits representing the
minute.

11. input Type url

It enables the user to enter a URL. The element is rendered as a text field, and the proper format is
http://www.deitel.com.

12. input Type week

It enables the user to select a year and week number in the format yyyy-Wnn, where nn is 01–53. for example,
2012-W01 represents the first week of 2012.

Note:
The autocomplete attribute can be used on input types to automatically fill in the user’s information based on
previous input. You can enable this for an entire form or just for specific elements.
<form method = “post” autocomplete=“on”>
datalist Element
It provides input options for a text input element.
When the user clicks in the text field, a drop-down list of the items appears. If the user types a letter, all items
containing that letter appear in the drop-down list.

Page-Structure Elements
HTML5 introduces several new page-structure elements that identify areas of the page as headers, footers,
articles, navigation areas, figures, etc.

<header> : Creates header for the page, can include HTML headings (<h1> through <h6>)
<section id = "1"> : Section begin
<nav> : groups navigation links
<figure> : figure element describes the image
<figcaption> : Caption for the image
<mark> : mark element highlights text
<summary> : Summary for the contents of the page
<footer> : footer to a section or page

Downloaded from Ktunotes.in

<summary> and <details> : The summary element displays a right-pointing arrow next to a summary, when
clicked, the arrow points downward and reveals the content in the details element.
<footer> : footer to a section or page
<meter> : represents a scale within a range
<address> : for representing addresses

Downloaded from Ktunotes.in

1. Are the HTML tags and elements the same thing?

No. HTML elements are defined by a starting tag, may contain some content and a closing tag.For example,
<h1>Heading 1</h1> is a HTML element but just <h1> is a starting tag and </h1> is a closing tag.

2. What are tags and attributes in HTML?

Tags are the primary component of the HTML that defines how the content will be structured/ formatted, whereas
Attributes are used along with the HTML tags to define the characteristics of the element. For example, <p align=”
center”>Interview questions</p>, in this the ‘align’ is the attribute using which we will align the paragraph to show
in the center of the view.

3. What are void elements in HTML?

HTML elements which do not have closing tags or do not need to be closed are Void elements. For Example <br />,
<img />, <hr />, etc.

Download PDF

4. What is the advantage of collapsing white space?

In HTML, a blank sequence of whitespace characters is treated as a single space character, Because the browser
collapses multiple spaces into a single space character and this helps a developer to indent lines of text without
worrying about multiple spaces and maintain readability and understandability of HTML codes.

5. What are HTML Entities?

In HTML some characters are reserved like ‘<’, ‘>’, ‘/’, etc. To use these characters in our webpage we need to use
the character entities called HTML Entities. Below are a few mapping between the reserved character and its
respective entity character to be used.

Character Entity Name Entity Number

< &lt; &#60;
> &gt; &#62;
& &amp; &#38;
(non-breaking space) Eg. &nbsp; Eg.
&#160;
10 PM <p>10&nbsp&nbspPM</p>

6. What are different types of lists in HTML?

Downloaded from Ktunotes.in

 7. What is the ‘class’ attribute in HTML?

The class attribute is used to specify the class name for an HTML element. Multiple elements in HTML can have the
same class value. Also, it is mainly used to associate the styles written in the stylesheet with the HTML elements.

8. What is the difference between the ‘id’ attribute and the ‘class’
attribute of HTML elements?

Multiple elements in HTML can have the same class value, whereas a value of id attribute of one element cannot be
associated with another HTML element.

9. Define multipart form data?

Multipart form data is one of the values of the enctype attribute. It is used to send the file data to the server -side for
processing. The other valid values of the enctype attribute are text/plain and application/x-www-form-urlencoded.

10. Describe HTML layout structure.

Every web page has different components to display the intended content and a specific UI. But still, there are few
things which are templated and are globally accepted way to structure the web page, such as:

• <header>: Stores the starting information about the web page.

• <footer>: Represents the last section of the page.
• <nav>: The navigation menu of the HTML page.
• <article>: It is a set of information.
• <section>: It is used inside the article block to define the basic structure of a page.

Downloaded from Ktunotes.in

• <aside>: Sidebar content of the page.

11. How to optimize website assets loading?

To optimize website load time we need to optimize its asset loading and for that:

• CDN hosting - A CDN or content delivery network is geographically distributed servers to help reduce latency.
• File compression - This is a method that helps to reduce the size of an asset to reduce the data transfer
• File concatenation - This reduces the number of HTTP calls
• Minify scripts - This reduces the overall file size of js and CSS files
• Parallel downloads - Hosting assets in multiple subdomains can help to bypass the download limit of 6 assets per
domain of all modern browsers. This can be configured but most general users never modify these settings.
• Lazy Loading - Instead of loading all the assets at once, the non-critical assets can be loaded on a need basis.

12. What are the various formatting tags in HTML?

HTML has various formatting tags:

• <b> - makes text bold

• <i> - makes text italic
• <em> - makes text italic but with added semantics importance
• <big> - increases the font size of the text by one unit
• <small> - decreases the font size of the text by one unit
• <sub> - makes the text a subscript
• <sup> - makes the text a superscript
• <del> - displays as strike out text
• <strong> - marks the text as important
• <mark> - highlights the text
• <ins> - displays as added text

13. What are the different kinds of Doctypes available?

The three kinds of Doctypes which are available:

• Strict Doctype
• Transitional Doctype
• Frameset Doctype

14. Please explain how to indicate the character set being used by a
document in HTML?

The character set is defined in <meta> tag inside <head> element.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
...
...

Downloaded from Ktunotes.in

 </head>
...
</html>

15. What is the difference between <strong>, <b> tags and <em>, <i>
tags?

The effect on a normal webpage of the tags <strong>, <b> and <em>, <i> is the same. <b> and <i> tags stands
for bold and italic. These two tags only apply font styling and bold tag <b>, just adds more ink to the text, these
tags don't say anything about the text.

Whereas, <strong> and <em> tags represent that the span of text is of strong importance or more importance and
emphatic stress respectively than the rest of the text. These tags have semantic meaning.

16. What is the significance of <head> and <body> tag in HTML?

<head> tag provides the information about the document. It should always be enclosed in the <html> tag. This tag
contains the metadata about the webpage and the tags which are enclosed by head tag like <link>, <meta>,
<style>, <script>, etc. are not displayed on the web page. Also, there can be only 1 <head> tag in the entire Html
document and will always be before the <body> tag.

<body> tag defines the body of the HTML document. It should always be enclosed in the <html> tag. All the
contents which needs to be displayed on the web page like images, text, audio, video, contents, using elements like
<p>, <img>, <audio>, <heading>, <video>, <div>, etc. will always be enclosed by the <body> tag. Also, there can
be only 1 body element in an HTML document and will always be after the <head> tag.

17. Can we display a web page inside a web page or Is nesting of

webpages possible?

Yes, we can display a web page inside another HTML web page. HTML provides a tag <iframe> using which we can
achieve this functionality.

<iframe src=”url of the web page to embed” />

18. How is Cell Padding different from Cell Spacing?

Cell Spacing is the space or gap between two consecutive cells. Whereas, Cell Padding is the space or gap between
the text/ content of the cell and the edge/ border of the cell. Please refer to the above figure example to find the
difference.

19. How can we club two or more rows or columns into a single row or
column in an HTML table?

HTML provides two table attributes “rowspan” and “colspan” to make a cell span to multiple rows and columns
respectively.

20. Is it possible to change an inline element into a block level element?

Downloaded from Ktunotes.in

Yes, it is possible using the “display” property with its value as “block”, to change the inline element into a block-
level element.

21. In how many ways can we position an HTML element? Or what are
the permissible values of the position attribute?

There are mainly 7 values of position attribute that can be used to position an HTML element:

1. static: Default value. Here the element is positioned according to the normal flow of the document.
2. absolute: Here the element is positioned relative to its parent element. The final position is determined by
the values of left, right, top, bottom.
3. fixed: This is similar to absolute except here the elements are positioned relative to the <html> element.
4. relative: Here the element is positioned according to the normal flow of the document and positioned
relative to its original/ normal position.
5. initial: This resets the property to its default value.
6. inherit: Here the element inherits or takes the property of its parent.

22. In how many ways you can display HTML elements?

1. inline: Using this we can display any block-level element as an inline element. The height and width
attribute values of the element will not affect.
2. block: using this, we can display any inline element as a block-level element.
3. inline-block: This property is similar to inline, except by using the display as inline-block, we can actually
format the element using height and width values.
4. flex: It displays the container and element as a flexible structure. It follows flexbox property.
5. inline-flex: It displays the flex container as an inline element while its content follows the flexbox
properties.
6. grid: It displays the HTML elements as a grid container.
7. none: Using this property we can hide the HTML element.

Below are some of the display types which are rarely used:

1. table
2. inline-table
3. table-cell
4. table-column
5. table-row
6. inline-grid
7. list-item
8. inherit
9. initial
10. table-caption

23. What is the difference between “display: none” and “visibility:

hidden”, when used as attributes to the HTML element.

When we use the attribute “visibility: hidden” for an HTML element then that element will be hidden from the
webpage but still takes up space. Whereas, if we use the “display: none” attribute for an HTML element then the
element will be hidden, and also it won’t take up any space on the webpage.

Downloaded from Ktunotes.in

 24. How to specify the link in HTML and explain the target attribute?

HTML provides a hyperlink - <a> tag to specify the links in a webpage. The ‘href’ attribute is used to specify the link
and the ‘target’ attribute is used to specify, where do we want to open the linked document. The ‘target’ attribute
can have the following values:

1. _self: This is a default value. It opens the document in the same window or tab as it was clicked.
2. _blank: It opens the document in a new window or tab.
3. _parent: It opens the document in a parent frame.
4. _top: It opens the document in a full-body window.

25. In how many ways can we specify the CSS styles for the HTML
element?

There are three ways in which we can specify the styles for HTML elements:

• Inline: Here we use the ‘style’ attribute inside the HTML element.
• Internal: Here we use the <style> tag inside the <head> tag. To apply the style we bind the elements using ‘id’ or
‘class’ attributes.
• External: Here we use the <link> tag inside <head> tag to reference the CSS file into our HTML code. Again the
binding between elements and styles is done using ‘id’ or ‘class’ attributes.

Downloaded from Ktunotes.in

26. Difference between link tag <link> and anchor tag <a>?

The anchor tag <a> is used to create a hyperlink to another webpage or to a certain part of the webpage and these
links are clickable, whereas, link tag <link> defines a link between a document and an external resource and these
are not clickable.

27. How to include javascript code in HTML?

Downloaded from Ktunotes.in

HTML provides a <script> tag using which we can run the javascript code and make our HTML page more dynamic.

<!DOCTYPE html>
<html>
<body>
<h1>
<span>This is a demo for </span>
<u><span id="demo"></span></u>
</h1>
<script>
document.getElementById("demo").innerHTML = "script Tag"
</script>
</body>
</html>

28. When to use scripts in the head and when to use scripts in the body?

If the scripts contain some event-triggered functions or jquery library then we should use them in the head section.
If the script writes the content on the page or is not inside a function then it should be placed inside the body
section at the bottom. In short, follow below three points:

1. Place library scripts or event scripts in the head section.

2. Place normal scripts that do not write anything on the page, in the head section until there is any
performance issue.
3. Place scripts that render something on the web page at the bottom of the body section.

29. What are forms and how to create forms in HTML?

The HTML form is used to collect the user inputs. HTML provides a <form> tag to create forms. To take input from
the user we use the <input> tag inside the form so that all collected user data can be sent to the server for
processing. There are different input types like ‘button’, ‘checkbox’, ‘number’, ‘text’, ‘password’, ‘submit’ etc.

<form action="/submit_data.php">
<label>Enter your name: </label>
<input type="text" name="name" />
<label>Enter Mobile number </label>
<input type="number" name="mobile_no"/>
<input type="submit" value="Submit">
</form>

30. How to handle events in HTML?

HTML allows event trigger actions in browsers using javascript or JQuery. There are a lot of events like ‘onclick’,
‘ondrag’, ‘onchange’, etc.

<!DOCTYPE html>
<html>
<body style="padding-top:50px">
<h3 id="event_demo">0</h3>
<input type="button" onclick="myFunction()" value="Click Me" />
<input type="reset" onclick="reset()" value="Reset" />
</body>

Downloaded from Ktunotes.in

 <script>
function myFunction() {
var value = document.getElementById("event_demo").innerHTML
value = parseInt(value) + 1;
document.getElementById("event_demo").innerHTML = value;
}
function reset() {
document.getElementById("event_demo").innerHTML = 0;
}
</script>
</html>

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

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.

32. How can we include audio or video in a webpage?

HTML5 provides two tags: <audio> and <video> tags using which we can add the audio or video directly in the
webpage.

33. Inline and block elements in HTML5?

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

34. What is the difference between <figure> tag and <img> tag?

Downloaded from Ktunotes.in

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

35. How to specify the metadata in HTML5?

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.

36. Is the <datalist> tag and <select> tag same?

No. The <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.

37. Define Image Map?

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” />

Downloaded from Ktunotes.in

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

38. What are Semantic Elements?

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.

39. Convert the below data into Tabular format in HTML5?

S.no., Language, Mostly used for

1, HTML, FrontEnd

2, CSS, FrontEnd

3, Python, BackEnd

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

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

41. Is drag and drop possible using HTML5 and how?

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.

42. Difference between SVG and Canvas HTML5 element?

SVG Canvas
It is Raster based i.e., composed
SVG is a vector based i.e., composed of shapes.
of pixels.
Canvas works better with a
SVG works better with a larger surface.
smaller surface.
Canvas can only be modified
SVG can be modified using CSS and scripts.
using scripts.
SVG is highly scalable. So we can print at high quality
It is less scalable.
with high resolution.

Downloaded from Ktunotes.in

 43. What type of audio files can be played using HTML5?

HTML5 supports the following three types of audio file formats:

1. Mp3
2. WAV
3. Ogg

44. What are the significant goals of the HTML5 specification?

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.

45. Explain the concept of web storage in HTML5.

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.

46. What is Microdata in HTML5?

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>

Downloaded from Ktunotes.in

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

Downloaded from Ktunotes.in