1) What is HTML?

HTML is short for HyperText Markup Language and is the language of the World Wide
Web. It is the standard text formatting language used for creating and displaying
pages on the Web. HTML documents are made up of two things: the content and the
tags that format it for proper display on pages.

2) What are tags?

Content is placed in between HTML tags in order to properly format it. It makes use
of the less than symbol (<) and the greater than symbol (>). A slash symbol is also
used as a closing tag. For example:

<strong>sample</strong>
3) Do all HTML tags come in a pair?
No, there are single HTML tags that do not need a closing tag. Examples are the
<img> tag and <br> tags.

4) What are some of the common lists that can be used when designing a page?
You can insert any or a combination of the following list types:
– ordered list
– unordered list
– definition list
– menu list
– directory list
Each of this list types makes use of a different tag set to compose

5 Secrets Tips to Win an Interview

01:42
5) How do you insert a comment in HTML?
Comments in HTML begins with “<!–“nd ends with “–>”. For example:

<!-- A SAMPLE COMMENT -->

HTML Interview Questions

6) Do all character entities display properly on all systems?
No, there are some character entities that cannot be displayed when the operating
system that the browser is running on does not support the characters. When that
happens, these characters are displayed as boxes.

7) What is an image map?

Image map lets you link to many different web pages using a single image. You can
define shapes in images that you want to make part of an image mapping.

8) What is the advantage of collapsing white space?

White spaces are a blank sequence of space characters, which is treated as a single
space character in HTML. Because the browser collapses multiple spaces into a
single space, you can indent lines of text without worrying about multiple spaces.
This enables you to organize the HTML code into a much more readable format.

HTML5 Interview Questions

HTML5 Interview Questions
9) Can attribute values be set to anything or are there specific values that they
accept?
Some attribute values can be set to only predefined values. Other attributes can
accept any numerical value that represents the number of pixels for a size.

10) How do you insert a copyright symbol on a browser page?

To insert the copyright symbol, you need to type &copy; or & #169; in an HTML file.

11) How do you create links to sections within the same page?
Links can be created using the <a> tag, with referencing through the use of the
number (#) symbol. For example, you can have one line as <a href=”#topmost”>BACK TO
TOP</a>, which would result in the words “BACK TO TOP” appearing on the webpage and
links to a bookmark named topmost. You then create a separate tag command like <a
name=”topmost”> somewhere on the top of the same webpage so that the user will be
linked to that spot when he clicked on “BACK TO TOP”.

12) Is there any way to keep list elements straight in an HTML file?
By using indents, you can keep the list elements straight. If you indent each
subnested list in further than the parent list that contains it, you can at a
glance determine the various lists and the elements that it contains.

13) If you see a web address on a magazine, to which web page does it point?
Every web page on the web can have a separate web address. Most of these addresses
are relative to the top-most web page. The published web address that appears
within magazines typically points this top-most page. From this top level page, you
can access all other pages within the website.

14) What is the use of alternative text in image mapping?

When you use image maps, it can easily become confusing and difficult to determine
which hotspots correspond to which links. Using alternative text lets, you put a
descriptive text on each hotspot link.

15) Do older HTML files work on newer browsers?

Yes, older HTML files are compliant to the HTML standard. Most older files work on
the newer browsers, though some features may not work.

16) Does a hyperlink apply to text only?

No, hyperlinks can be used in the text as well as images. That means you can
convert an image into a link that will allow users to link to another page when
clicked. Surround the image within the <a href=” “>…</a> tag combinations.

17) If the user’s operating system does not support the needed character, how can
the symbol be represented?
In cases wherein their operating system does not support a particular character, it
is still possible to display that character by showing it as an image instead.

18) How do you change the number type in the middle of a list?
The <li> tag includes two attributes – type and value. The type attribute can be
used to change the numbering type for any list item. The value attribute can change
the number index.

19) What are style sheets?

Style sheets enable you to build consistent, transportable, and well-defined style
templates. These templates can be linked to several different web pages, making it
easy to maintain and change the look and feel of all the web pages within site.

20) State bullet types available in HTML

With ordered lists, you can select to use some different list types including
alphabetical and Roman numerals. The type attribute for unordered lists can be set
to disc, square, or circle.

21) How do you create multicolored text in a webpage?

To create text with different colors, use the <font color=”color”>…</font> tags for
every character that you want to apply color. You can use this tag combination as
many times as needed, surrounding a single character or an entire word.

22) Why are there both numerical and named character entity values?
The numerical values are taken from the ASCII values for the various characters,
but these can be difficult to remember. Because of this, named character entity
values were created to make it easier for web page designers to use.

23) Write an HTML table tag sequence that outputs the following:
50 pcs 100 500
10 pcs 5 50
Answer:

<table>
<tr>
<td>50 pcs</td>
<td>100</td>
<td>500</td>
</tr>
<tr>
<td>10 pcs</td>
<td>5</td>
<td>50</td>
</tr>
</table>
24) What is the advantage of grouping several checkboxes together?
Although checkboxes don’t affect one another, grouping checkboxes together help to
organize them. Checkbox buttons can have their name and do not need to belong to a
group. A single web page can have many different groups of checkboxes.

25) What will happen if you overlap sets of tags?

If two sets of HTML tags are overlapped, only the first tag will be recognized. You
will find this problem when the text does not display properly on the browser
screen.

26) What are applets?

Applets are small programs that can be embedded within web pages to perform some
specific functionality, such as computations, animations, and information
processing. Applets are written using the Java language.

27) What if there is no text between the tags or if a text was omitted by mistake?
Will it affect the display of the HTML file?
If there is no text between the tags, then there is nothing to format. Therefore no
formatting will appear. Some tags, especially tags without a closing tag like the
<img> tag, do not require any text between them.

28) Is it possible to set specific colors for table borders?

You can specify a border color using style sheets, but the colors for a table that
does not use style sheets will be the same as the text color.

29) How do you create a link that will connect to another web page when clicked?
To create hyperlinks, or links that connect to another web page, use the href tag.
The general format for this is: <a href=”site”>text</a>
Replace “site” with the actual page URL that is supposed to be linked to when the
text is clicked.

30) What other ways can be used to align images and wrap text?
Tables can be used to position text and images.
Another useful way to wrap text around an image is to use style sheets.

31) Can a single text link point to two different web pages?
No. The <a> tag can accept only a single href attribute, and it can point to only a
single web page.
32) What is the difference between the directory and menu lists and the unordered
list?
The key difference is that the directory and menu lists do not include attributes
for changing the bullet style.

33) Can you change the color of bullets?

The bullet color is always the same as that of the first character in the list
item. If you surround the <li> and the first character with a set of <font> tags
with the color attribute set, the bullet color, and the first character will be a
different color from the text.

34) What are the limits of the text field size?

The default size for a text field is around 13 characters. However, if you include
the size attribute, you can set the size value to be as low as 1. The maximum size
value will be determined by the browser width. If the size attribute is set to 0,
the size will be set to the default size of 13 characters.

35) Do <th> tags always need to come at the start of a row or column?
Any <tr> tag can be changed to a <th> tag. This causes the text contained within
the <th> tag to be displayed as bold in the browser. Although <th> tags are mainly
used for headings, they do not need to be used exclusively for headings.

36) What is the relationship between the border and rule attributes?
Default cell borders, with a thickness of 1 pixel, are automatically added between
cells if the border attribute is set to a nonzero value. Likewise, If the border
attribute is not included, a default 1-pixel border appears if the rules attribute
is added to the <table> tag.

37) What is a marquee?

A marquee allows you to put a scrolling text in a web page. To do this, place
whatever text you want to appear scrolling within the <marquee> and </marquee>
tags.

38) How do you create text on a webpage that will allow you to send an email when
clicked?
To change text into a clickable link to send email, use the mailto command within
the href tag. The format is as follows:

<A HREF=”mailto:youremailaddress”>text to be clicked</A>

39) Are <br> tags the only way to separate sections of text?
No. The <br> tag is only one way to separate lines of text. Other tags, like the
<p> tag and <blockquote> tag, also separate sections of text.

40) Are there instances where the text will appear outside of the browser?
By default, the text is wrapped to appear within the browser window. However, if
the text is part of a table cell with a defined width, the text could extend beyond
the browser window.

41) How are active links different from normal links?

The default color for normal and active links is blue. Some browsers recognize an
active link when the mouse cursor is placed over that link; others recognize active
links when the link has the focus. Those that don’t have a mouse cursor over that
link is considered a normal link.

42) Do style sheets limit the number of new style definitions that can be included
within the brackets?
Style sheets do not limit the number of style definitions that can be included
within the brackets for a given selector. Every new style definition, however, must
be separated from the others by a semicolon symbol.

43) Can I specify fractional weight values such as 670 or 973 for font weight?
Implementation largely depends on the browser, but the standard does not support
fractional weight values. Acceptable values must end with two zeroes.

44) What is the hierarchy that is being followed when it comes to style sheets?
If a single selector includes three different style definitions, the definition
that is closest to the actual tag takes precedence. Inline style takes priority
over embedded style sheets, which takes priority over external style sheets.

45) Can several selectors with class names be grouped together?

You can define several selectors with the same style definition by separating them
with commas. This same technique also works for selectors with class names.

46) What happens if you open the external CSS file in a browser?
When you try to open the external CSS file in a browser, the browser cannot open
the file, because the file has a different extension. The only way to use an
external CSS file is to reference it using <link/> tag within another HTML
document.

47) How do you make a picture into a background image of a web page?
To do this, place a tag code after the </head> tag as follows:

<body background = “image.gif”>

Replace image.gif with the name of your image file. This will take the picture and
make it the background image of your web page.

48) What happens if the list-style-type property is used on a non-list element like
a paragraph?
If the list-style-type property is used on a non-list element like a paragraph, the
property will be ignored and do not affect the paragraph.

49) When is it appropriate to use frames?

Frames can make navigating a site much easier. If the main links to the site are
located in a frame that appears at the top or along the edge of the browser, the
content for those links can be displayed in the remainder of the browser window.

50) What happens if the number of values in the rows or cols attribute doesn’t add
up to 100 percent?
The browser sizes the frames relative to the total sum of the values. If the cols
attribute is set to 100%, 200% the browser displays two vertical frames with the
second being twice as big as the first.

51) Which browsers support HTML5?

The latest versions of Google Chrome, Apple Safari, Mozilla Firefox, and Opera all
support most of the HTML5 features.

52) Name two new tags included in the HTML 5

<Video> and <Audio> are new tags which are included in HTML5 version. They are
mainly used as a replacement for Flash, Silverlight, and similar technologies to
play multimedia items.

53) Do you know which are two semantic tags are included in HTML5 version?
The <article> and <section> tags are two new tags that are included in HTML5.
Articles can be composed of multiple sections that can have multiple articles. An
article tag represents a full block of content which is a section of a bigger
whole.

54) What is <figure> in HTML5?

This tag represents a piece of self-contained flow content. It is mostly used as a
single unit as a reference the main flow of the document.

55) What is the use of Canvas element?

The canvas element helps to build charts, graphs, bypass Photoshop to create 2D
images and place them directly into HTML5 code.

56) What are the new FORM elements which are available in HTML5?
The new Form elements in HTML5 offers much better functionality than the earlier
versions.

The tags given provided to carry out these functions are:

1) <datalist> – This tag is use to specify a list of options for input controls.

2) <keygen> – This tag represents a key-pair generator field.

3) <output> – It represents the result of any scripting calculation.

57) Tell me two benefits of HTML5 Web Storage

Two main benefits of HTML5 Web Storage:

It can store up to 10 MB data which is certainly more than what cookies have.
Web storage data cannot be transferred with the HTTP request. It helps to increase
the performance of the application.
58) What are two types of Web Storage in HTML5?
Two storage types of HTML5 are:

Session Storage: It stores data of current session only. It means that the data
stored in session storage clear automatically when the browser is closed.

Local Storage: Local storage is another type of HTML5 Web Storage. In local
storage, data is not deleted automatically when the current browser window is
closed.

59) What is the Application Cache in HTML5 and why it is used?

The Application Cache concept means that a web application is cached. It can be
accessible without the need for internet connection.

Some advantages of Application Cache:

Offline browsing – Web users can also use the application when they are offline.
Speed – Cached resources load quicker
Reduce the server load – The web browser will only download updated resources from
the server.
60) Explain five new input types provided by HTML5 for forms?
Following are the important, new data types offered by HTML5:

Date: It allows the user to select a date.

datetime-local: This input type allows the user to select a date and time without
time zone.
datetime: This input type allows the user to select a date and time with time zone.
month: It enables the user to select a month and year
email: These input fields used to contain an e-mail address.
Q #1) What does HTML stand for?

Answer: HTML stands for Hypertext Markup Language.

Q #2) Describe HTML.

Answer: Hypertext Markup Language or HTML is a markup language that is used to

create website templates or WebPages to present the content on the World Wide Web.

HTML pages are saved by adding .html or .html in web page name.

Q #3) Write the basic structure of the HTML template?

Answer: The basic structure of the HTML template is:

<html>
<head>
<title></title>
</head>
<body>
</body></html>
Q #4) What is HTML5?

Answer: HTML5 is the latest or updated version of the markup language that defines
HTML.

Q #5) Name some new features which were not present in HTML but are added to HTML5?

Answer: Some new features in HTML5 include:

DOCTYPE declaration: <!DOCTYPE html>

section: Section tag defines a section in the document, such as a header, footer or
in other sections of the document. It is used to define the structure of the
document. <section></section>
header: Header tag defines the head section of the document. A header section
always sticks at the top of the document. <header></header>
footer: Footer tag defines the footer section of the document. A footer section
always sticks at the bottom of the document. <footer></footer>
article: Article tag defines an independent piece of the content of a document.
<article> </article>
main: The main tag defines the main section in the document which contains the main
content of the document. <main></main>
figcaption: Figcaption tag defines the caption for the media elements such as an
image or video. <figcaption></figcaption>
Q #6) What is Anchor tag and how can you open an URL into a new tab when clicked?

Answer: Anchor tag in HTML is used to link between two sections or two different
web pages or website templates.

To open an URL into a new tab in the browser upon a click, we need to add target
attribute equal to _blank.

<a href=”#” target=”_blank”></a>

Q #7) Write an HTML code to form a table to show the below values in a tabular form
with heading as Roll No., Student name, Subject Name, and values as

Ram, Physics
Shyam, Math
Murli, Chemistry
Answer: To represent the above values in an HTML table format, the code will be:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<table >
<tr>
<th> Roll No. </th>
<th> Student Name </th>
<th> Subject Name </th>
</tr>
<tr>
<td> 1 </td>
<td>Ram</td>
<td> Physics </td>
</tr>
<tr>
<td> 2 </td>
<td> Shyam </td>
<td> Math </td>
</tr>
<tr>
<td> 3 </td>
<td> Murli </td>
<td> Chemistry </td>
</tr>
</table>
</body>
</html>
Output:

table

Q #8) Define Semantic elements in HTML.

Answer: Semantic elements are HTML elements that represent its meaning to the
browser and developer about its contents.

For Example – p tag represents a paragraph, a tag represents anchor tag, form tag,
table tag, article tag and many more are semantic elements in HTML. Whereas, div
tag, span tag, bold tag are not semantic elements.

Q #9) Define attributes in HTML tag.

Answer: The HTML tag contains a field inside their tag which is called attributes
of that tag.

For Example:

<img src=”#”> here in this tag src is img tag attributes.

<input type=” text”> here in this tag type is input tag attributes.

Q #10) Can we modify the attribute’s value of the HTML tag dynamically?

Answer: Yes, we can modify the value of the attributes by using JavaScript.

Below is the input element whose attribute will be modified from text to password,
JS code to modify the attribute value:

<input type=“text” id=“inputField”>

document.getElementById(“inputField”).attr(“type”, “password”);
Q #11) How can we comment in HTML?

Answer: Comments are used by developers to keep a track of the code functionality
and also help the other developers in understanding the code functionalities
easily.

The commented outlines will not be shown in the browser. To comment a line, the
line should start by this <!– and end by this –>. Comments can be of one line or of
multiple lines.

For Example:

<!-- This is one line comment ?

<!-- This is multiple line of two or more line -->
Q #12) What are inline elements and block-level elements in HTML?

Answer: Block elements are the blocks that take the full available width and always
start from a new line. It will stretch itself to the full available width of the
available container width. Block-level elements are <div>, <p>, <img>, <section>
and many more.

Inline elements are the elements that will only take the width that is required to
fit into the container.

For Example, take the flow of text on the page. When the line of the text takes the
full width of the container it wraps itself into a new line and again goes in the
same way.

Whereas, the inline element will take only that much space or width that it is
needed for them. Inline elements are <span>, <label>, <a>, <b> and many more.

Q #13) Can we change inline elements into block-level elements?

Answer: Yes, we can change inline elements into block-level elements by adding
display equal to block in its CSS tag. Writing it will change the inline elements
into block elements and then inline elements will also take the full width of the
container.

display: block;
Q #14) What are the different browsers that support HTML5?

Answer: All modern browsers support HTML5 elements except some old browsers. But
fortunately, most of the browsers will take html5 elements as inline elements.

Q #15) What are <br> tags in HTML?

Answer: <br> tags are used to enter a new line into the HTML contents. These tags
are generally used to separate two different lines of text between each other.
Q #16) Explain the structure of the HTML webpage.

Answer: The common structure which all HTML pages follow are enlisted below:

(i) DOCTYPE – It is a special tag in HTML which is always written at the top of the
HTML document, i.e. at the start of the HTML template. DOCTYPE is used to convey to
the browser about the HTML version.

<!DOCTYPE html>
(ii) HTML – After DOCTYPE tag, the HTML tag is written to start the template. All
the code will be placed into this HTMLtag. It works as the container for the whole
HTML page elements.

<html>
<!-- Rest of the html code will come inside it -->
</html>
(iii) HEAD – <head> tag is the first element inside the <html> tag. It is used to
provide information to the browser about the page and its contents.

Search Engine Optimization (SEO) techniques are written inside this tag. <title>,
<meta> tags are written inside these tag. CSS and JS external links or internal CSS
and JS are also written inside this tag.

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<title>HTML Interview Questions</title>
</head>
(iv) BODY – <body> tags are written after the closing tag of the <head> tag, i.e.
after </head>. Whatever HTML code is written inside these tags will be shown by the
browser as website content.

<body>
<h2>Top HTML Interview Questions</h2>
<p>HTML stands for Hypertext Markup Language</p>
</body>
Together the whole body will be:

<! DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale = 1.0">
<title>HTML Interview Questions</title>
<style type="text/css">
<!-- CSS Code will be written into these -->
h2{
color: #1855b5;
}
p{
color: #3bd256;
font-weight: 600;
}
</style>
<script type="text/javascript">
<!-- Javascript code will be written into these -->
</script>
 </head>
<body>
<h2>Top HTML Interview Questions</h2>
<p>HTML stands for Hypertext Markup Language</p>
</body>
</html>
Output:

html-structure

Q #17) Why Meta tags are used in HTML?

Answer: Meta tags in HTML are used by the developer to tell the browser about the
page description, author of the template, character set, keywords and many more.

Meta tags are used for search engine optimization to tell the search engine about
the page contents.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<meta name="description" content="HTML interview questions">
<meta name="author" content="Author Name">
<meta name="copyright" content="All Rights Reserved">
Q #18) Explain list elements in HTML.

Answer: Enlisted below are the list elements in HTML:

Ordered List (<ol>) – An Ordered List or ol tag is the list that lists the items in
an ordered way, i.e. numbered or alphabetically.
Unordered List (<ul>) – An Unordered List or ul tag is the list which will list the
items in an unordered way, i.e. in bulleted format or in any other format.
Definition List (<dl>) – A Definition List or dl tag arrange the items in the way
in which they are arranged in a dictionary.
Ordered List:

<!DOCTYPE html>
<html>
<head>
<title>HTML Interview Questions Ordered
List</title>
</head>
<style>
h1{
color: red;
}
li{
color: #0070ff;
}
</style>
<body>
<h1>Ordered List : </h1>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap</li>
<li>JavaScript</li>
</ol>
</body>
</html>
Output:

ordered-list

Unordered List:

<!DOCTYPE html>
<html>
<head>
<title>HTML Interview Questions Unordered
List</title>
<style>
h1{
color: red;
}
li{
color: #0070ff;
}
</style>

</head>
<body>
<h1>Unordered List : </h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap</li>
<li>JavaScript</li>
</ul>
</body>
</html>
Output:

unordered-list

Definition List:

<!DOCTYPE html>
<html>
<head>
<title>HTML Interview Question Definition
List</title>
<style>
dt{
font-weight: 600;
font-size: 25px;
color: red;
}
dd{
font-weight: 500;
font-size: 15px;
color: #0070ff;
}
</style>
</head>
<body>
<dl>
<dt><strong>HTML</strong></dt>
 <dd>HTML stands for Hypertext Markup
Language</dd>
<dt><bold>CSS</bold></dt>
<dd>CSS stands for Cascading Style
Sheets</dd>
</dl>
</body>
</html>
Output:

definition-list

Q #19) Define iframe in HTML.

Answer: Iframe tag is written as <iframe>.

An iframe is used to display different document content inside the different

document content in a rectangular region in the browser. When different document
content is embedded into a current HTML content, then it is known as an inline
iframe.

The src attribute contains the path to the document that occupies the inline
iframe.

<!DOCTYPE html>
<html>
<head>
<title>HTML Interview Questions Iframes</title>
</head>
<body>

Iframe HTML Code

<iframe src = "demo_iframe.htm" width = "300"

height = "300">
Sorry your browser does not support
inline frames.
</iframe>
</body>
</html>
Output:

iframe

Q #20) Define forms in HTML.

Answer: Forms in HTML are required when we want to collect the user information
whenever a user fills any form or provides any details and when we want to save it
into our database.

<!DOCTYPE html>
<html>

<head>
<title>HTML Interview Question Form
tag</title>
<style>
form {
 width: 200px;
border: 2px solid blue;
margin: 0 auto;
padding: 60px 100px;
}
p{
color: red;
font-size: 16px;
font-weight: 600;

}
input::placeholder{
color: blue;
}
button{
line-height: 20px;
text-align: center;
background: green;
border: 0;
color: #ffffff;
font-size: 14px;
padding: 15px 64px;
margin-top: 20px;
}

</style>
</head>

<body>
<form >
<p>Name:</p>
<input type = "text" name = "user_name" placeholder =
"Enter Name"/>
<br/>
<br/>
<p>Email: </p>
<input type = "email" name = "user_email" placeholder
= "Enter email"/>
<br/>
<br/>
<p>Password: </p>
<input type="password" name = "user_pwd" placeholder
= "Enter Password" />
<br/>

<button> Submit </button>

</form>
</body>
</html>
Output:

form

Q #21) In how many ways can a heading be written in HTML?

Answer: A heading can be defined as a block-level element that is used to give a

heading to a particular section or topic.

Example using 6 types of headings in HTML:

<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: red;
}
h2{
color: blue;
}
h3{
color : green;
}
h4{
color: purple;
}
h5{
color: yellow;
}
h6{
color: orange;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
Output:

heading-tag

Q #22) How can we create a hyperlink in HTML?

Answer: An anchor tag or <a> tag in HTML is used to create hyperlinks. This creates
a path between two different HTML web pages.

Hyperlinks can be displayed in three ways:

Unvisited Link – These links are blue in color and underlined.

Visited Link – These links are purple in color and underlined.
Active Link – These links are red in color and underlined.
Q #23) Why do we use the required attribute in HTML?

Answer: The required attribute is used in HTML to make the field mandatory. It
forces the user to fill that particular field to submit the form.

If the field is input then it will throw a default HTML error.

<input type="email" name = "user_email" required />

Q #24) How can we include Google maps on a website?

Answer: HTML code to include Google maps on our web page:

<!DOCTYPE html>
<html>
<body>
<h1>HTML Interview Questions Google Map</h1>
<div id="map" style="width: 400px; height: 400px; background: yellow">
</div>
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12),
zoom: 10
}
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
}
</script>
<script src= "https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-
916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</body></html>
Output:

Output- google-map

Q #25) Differentiate between HTML and XHTML.

Answer: The differences between HTML and XHTML are:

HTML stands for Hypertext Markup Language, whereas XHTML stands for Extensible
Markup Language.
A static webpage is an HTML web page and dynamic web pages are XHTML.
XHTML are more stricter than HTML.
An XML application of HTML is defined as XHTML.
All modern browsers support XHTML.
Q #26) What are Web Workers?

Answer: Web Workers is a code of JavaScript which runs in the background threads
without disturbing the performance of the page. It is used for computing-heavy
tasks like an access database or function.

Q #27) What is the SVG element?

Answer: SVG is a followed XML format; it stands for Scalable Vector Graphics which
is used to create vector graphics with the support for interactivity and animation.

SVG is resolution independent as it does not lose its quality when they are resized
or zoomed.

Q #28) Explain about Canvas.

Answer: Canvas is a pixel-based graphics and it is one of the new features of

HTML5.

It provides a space in the document where we can draw graphics by using JavaScript
and it is resolution dependent, hence the quality will be affected when it’s zoomed
or resized.

Example:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;

color: #c9cc18;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var can = document.getElementById("myCanvas");
var canvas = can.getContext("2d");
canvas.font = "20px Hind-sanserif";
canvas.fillText("Canvas Example",30,60);
</script>
</body>
canvas

Q #29) Explain new form elements in HTML5.

Answer: The new form elements that were added into HTML5 are:

Datalist – It’s used as a list of options for input control.

Keygen – This tag defines a key-pair generator (Private/Public) field.
Output – It’s used to show the result of a calculation.
Q #30) What is Quirks mode in HTML5?

Answer: If we do not include the <!DOCTYPE> element in our HTML page or Document,
it will go to Quirks Mode. In this mode, the HTML element depends on the browser.
Hence the content will be displayed according to the browser.